@charset "UTF-8"; 
    :root {
      --background-color: rgb(11, 11, 11);
      --font-color: rgb(208, 208, 208);
      --accent-color: rgb(125, 114, 166);
      --image-size: 12rem;
    }
    .sec-accent-colored {
      color: var(--sec-accent-color);
    }
    .accent-colored {
      color: var(--accent-color);
    }
    * {
      padding: 0;
      margin: 0;
      color: var(--font-color);
      border: 0px white dotted;
      box-sizing: border-box;
      text-decoration: none;
      scroll-behavior: smooth;
    }
    body {
      background-color: var(--background-color);
      color: var(--font-color);
      font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      letter-spacing: -0.05em;
      font-size: 2rem;
      font-weight: 400;
      overflow-x: hidden;
      width: 100%;
    }
    ::selection {
      color: var(--background-color);
      background: var(--accent-color);
    }
    #windowSize {
      z-index: 4;
      position: fixed;
      display: none;
      color: grey;
    } 
    #scrollToTop {
      z-index: 4;
      position: fixed;
      bottom: 50px;
      right: -55px;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      border: 2px var(--accent-color) solid;
      color: var(--accent-color);
      background-color: var(--background-color);
      transition: right .1s ease-in-out;
      display: block;
    }
    .circle-centered {
      border: 0px solid white;
      position: relative;
      width: 100%;
      height: 100%;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
    .scrollToTopAppear {
      right: 50px !important;
      transition: right .1s ease-in-out;
    }
    nav > div, footer {
      z-index: 3;
      display: flex;
      margin: 0 5vw;
      background-color: var(--background-color);
    }
    footer {
      justify-content: center;
    }
    nav > div a{
      padding: .5rem .5rem;
      margin: 0;
      display: flex;
      height: auto;
      font-size: 2.5rem;
      justify-items: center;
      align-items: center;
    } 
    .nav-btn:hover {
      text-decoration-line: underline;
      text-decoration-color: var(--accent-color);
    }
    #logo {
      margin-right: auto;
      text-decoration: none;
      font-style: italic;
      font-weight: 600;
      padding-left: 0px !important;
      display: flex;
    }

    #logo-shortened { display: none; }
    #logo-normal { display: flex; }

    #contact1 { display: block; }
    #contact2 { display: none; }

    #burger-btn {
      user-select: none;
      display: none;
      padding-right: 0px !important;
    }  
    #burger-btn:hover {
      cursor: pointer;
    }

    .accented-btn {
      position: relative;
      padding-right: 0px !important;
      font-weight: 600;
      display: block;
    }
    .dropdown > .accented-btn {
      padding: 0 !important;
    }
    .accented-btn > div {
      color: var(--accent-color);
      width: 100%;
      height: 100%;
      padding: 0px 1rem .25rem 1rem;
      border: var(--accent-color) 2px solid;
    }
    .accented-btn:hover > div > span {
      color: var(--background-color);
    }
    .accented-btn > div > span {
      color: var(--accent-color);
    }
    .accented-btn:hover > div{
      background-color: var(--accent-color);
      color: var(--background-color);
    }
    .dropdown {
      display: none;
      margin: 0 2vw;
      justify-content: center;
      overflow: hidden; 
    }
    .dropdown > div, .dropdown > a {
      margin: 0 0 0.5rem 0;
      width: auto;
      display: block;
      text-align: center;
    }
    .dropdown-down {
      display: block;
    }
    #copyright, #copyright > span {
      color: var(--accent-color);
    }
    #copyright {
      display: block;
      font-size: 1rem;
      letter-spacing: 0;
      text-align: center;
    }

    main {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .paragraph {
      text-align: center;
      margin: 5rem 0 0 0;
      padding: .5rem;
      max-width: 60rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .paragraph > * {
      margin: 1rem;
    }

    #hero {
      flex-direction: row-reverse;
    }
    #hero-txt {
      font-size: 4rem;
      line-height: 4.5rem;
      margin: 0;
    }
    #hello-txt {
      font-size: 5.5rem;
    }
    #img-wrapper {
      display: flex;
      border: 2px solid var(--accent-color)
    }
    #hero-img {
      width: var(--image-size);
      height: var(--image-size);
      background-color: var(--background-color);
      box-sizing: content-box;
      overflow: hidden;
    }
    #img-wrapper:hover {
      border: var(--font-color) 2px solid;
    }

    .animated-reveal {
      animation: revealAnimation 1s;
      background-color: var(--background-color);
      position: absolute;
      opacity: 0;
      width: var(--image-size);
      height: var(--image-size);
    }
    @keyframes revealAnimation {
      0% { opacity: 1;}
      10% { opacity: 1;}
      100% { opacity: 0;}
    }


    .project-example {
      border: 2px solid var(--accent-color);
      height: 20rem;
      width: 15rem;
    }
    div:hover > .project-example {
      cursor: pointer;
      transform: translateY(-5%);
      border: 2px solid var(--font-color);
    }

    .email {
      color: var(--accent-color);
      font-weight: 600;
      font-style: italic;
      letter-spacing: 0;
    }
    .email:hover{
      color: var(--font-color);
    }

    @media (min-width: 851px) {
      .dropdown-down {
        display: none;
      }
    }
    @media (max-width: 850px) {
      .dropdown-down {
        display: block;
      }
      nav > div, footer {
        margin: 0 2vw;
      }
      .nav-btn {
        display: none;
      }
      #burger-btn {
        display: flex;
      }

    }
    @media (max-width: 500px) {
      .email {
        font-size: 1.5rem;
      }
      .paragraph {
        margin: 3rem 0 0 0;      
      }
      #hero-txt {
        font-size: 2.25rem;
        line-height: 2.5rem;
      }
      #hello-txt {
        font-size: 3.5rem;
      }
      :root {
        --image-size: 8rem;
      }
      #contact1 {
        display: none;
      }
      #contact2 {
        display: block;
      }
      #burger-btn > div{
        padding: 0rem .75rem .25rem .75rem;
      }
      nav a{
        font-size: 2rem;
      }
      #scrollToTop {
        display: None;
      }
      
    }
    @media (max-width: 300px) {
      .email {
        font-size: 1rem;
      }
      .paragraph {
        margin: 2rem 0 0 0;
      }
      nav a{
        font-size: 1.5rem;
        padding: .5rem .25rem;
      }
      :root {
        --image-size: 6rem;
      }
      
      #logo-shortened { display: flex; }
      #logo-normal { display: none;}
      #cv-normal { display: none;}
    }