@media (min-aspect-ratio:16/9){ /* laptop display*/
  body{
    min-width: 1024px;
    min-height: 800px;
  }

  :root {
      --base-color: white;
      --base-variant: black;
      --accent-color: #FFD457;
    }
    
    .darkmode {
      --base-color: #1e1e1e;
      --base-variant: white;
      --accent-color: #5A6374;
    }
    
    .container {
      color: var(--base-variant);
      font-family: Georgia, 'Times New Roman', Times, serif;
    }
    
    .header { 
      display: flex;
      flex-direction: row;
    }
    
    #theme-swap {
      background-color: var(--base-color);
      border: none;
      outline: none;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top:0.3vh;
    }
    
    
    
    #theme-swap-link {
      background-color: var(--base-color);
      border: none;
      outline: none;
      margin-left:auto;
      justify-content: flex-end;
    }
    
    #theme-swap-link h2{
      align-items: center;
      font-family: 'roboto slab', Georgia, 'Times New Roman', Times, serif;
    }
    
    #theme-swap img{
      padding-left:0.5vw;
      margin-left:0;
      padding-top:1%;
      width:7vmin;
      height:7vmin;
    }
    
    #theme-swap img:last-child{
      display: none;
    }
    
    .darkmode #theme-swap img:first-child{
      display: none;
    }
    
    .darkmode #theme-swap img:last-child{
      display: block;
    }
    
    .image-swap img:last-child{
      display: none;
    }
    
    .darkmode .image-swap img:first-child{
      display:none;
    }
    
    .darkmode .image-swap img:last-child{
      display: block;
      width:1.5em;
      height:1.7em;
      padding-top:1.5em;
      margin-left:auto;
      justify-content: flex-end;
    }
    .image-swap {
      margin-left:auto;
      justify-content: flex-end;
    }
    
    .header .image-swap img{ 
      width:3vmin;
      height:3vmin;
      padding-left:10px;
      padding-right: 10px;
      padding-top:3vh;
      margin-left:auto;
      justify-content: flex-end;
    }
    
    .header a{
      padding-top:0;
      justify-content: flex-end;
      margin-left:auto;
      font-size: 2vmin;
    }
    
    .Line {
      position:absolute;
      margin-top: 0.2em;
      margin-left: -1%;
      border-left: 0;
      padding-left: 0;
      width: 101%;
      border-top:2px solid; 
      border-color: var(--base-variant);
      height: 1%;
    }
    
    .potraits {
      position: relative;
    }
    
    .profile-shadow {
      width:25%;
      height:50%;
      position: relative;
      margin-top:10%;
      margin-left:15%;
    }
    
    .shadow-swap img:last-child{
      display: none;
    }
    
    .darkmode .shadow-swap img:last-child{
      display: block;
    }
    
    .darkmode .shadow-swap img:first-child{
      display: none;
    }
    
    .shadow-swap img{
      max-width: 25%;
      height: auto;
      width: auto\9;
      position: relative;
      margin-top:20vh;
      margin-left:15vw;
    }
    
    .profile-pic {
      max-width: 25%;
      height: auto;
      width: auto\9;
      position: absolute;
      margin-top:22vh;
      margin-left:15vw;
      top: 3vh;
      left: 2vw;
    }
    
    .Biography {
      position:absolute;
      margin-left:50vw;
      margin-top:-57vh;
      padding-right:10vw;
    }
    
    .Biography h1{
      font-size:6vmin;
    }
    
    h1::after{
      content: "";
      display: block;
      width: 30%;
      height: 3px;
      margin-top:1%;
      background-color: var(--accent-color);
      justify-content: flex-start;
      border-radius: 2px;
    }
    
    .Biography h2{
      font-size:3.5vmin;
      margin-top: -1vh;
      line-height: 1.5em;
      word-spacing: 0.2em;
    }
    
    .name {
      margin-left: 15%;
      margin-top: -1%;
      font-size: 2vmin;
    }
    
    .name p{
      margin-top: -1.4%;
      font-size: 2vmin;
    }
    
    .footer {
      display: flex;
      flex-direction: row;
      font-family: 'inter', Georgia, 'Times New Roman', Times, serif;
    }
    
    .footer h2{
      margin-top:2vh;
      margin-right:-50%;
      font-size: 2.5vmin;
    }
    
    .footer img{
      width:3em;
      height:3em;
    }
    
    .footer a{
      justify-content: flex-end;
      margin-left:auto;
      margin-right:0;
      margin-left:-0.3%;
      margin-top:1%;
    }
    
    
    .footer-line {
      content: "";
      margin-left: -1%;
      width: 102%;
      height: 2px;
      margin-top: 5vh;
      bottom: 1vh;
      background-color: var(--base-variant);
      justify-content: flex-start;
      border-radius: 1px;
    }
    
    a:link {
      text-decoration: none;
      color:var(--base-variant);
    }
    a:visited {
      text-decoration: none;
      color:var(--base-variant);
    }
    a:hover {
      text-decoration: none;
      color:var(--base-variant);
      opacity: 50%;
    }
    
    .right-aligned-top {
        position: absolute;
        display: flex;
        top:8px;
        right: 16px;
    }
    
    .right-aligned-bottom {
        position: absolute;
        right: 0.5vw;
        margin-top: 1vh;
        margin-bottom: 0;
    }

    .projects-mobile{
      display: none;
    }

    .projects-laptop {
      font-family: 'roboto slab';
      margin-left: 5vw;
      margin-right: 5vw;
      animation: bottomSlide;
      animation-duration: 1.5s;
    }

    .projects-laptop h1{
      font-size: 6vmin;
      margin-left: 6vw;
    }

    .projects-laptop h2{
      font-size:4vmin;
      padding-bottom: 5vh;
    }

    .projects-laptop p{
      font-size: 2.2vmin;
      font-family: "inter", Georgia, 'Times New Roman', Times, serif;
    }

    .projects-laptop a {
      text-decoration: underline;
    }

    .projects-laptop table {
      margin-left: -3vw;
      margin-right: 7vw;
  }

  .projects-laptop td {
      padding: 0; 
      margin: 0;
      padding-top: 2vh; 
  }


    .projects-laptop img{
      display: block;
      margin-right: 3vw;
      max-width: 50%;
      height: auto;
      width: auto\9;
      float: right;
    }

    .skills-laptop{
      margin-top: 8vh;
      margin-left: 7vw;
      margin-right: 7vw;
      font-family: 'roboto slab', Georgia, 'Times New Roman', Times, serif;
    }

    .skills-laptop td{
      padding-top:1vh;
    }

    .skills-laptop h1{
      font-size: 6vmin;
      margin-left: 5vw;
    }

    .skills-laptop img{
      max-width: 35%;
      height: auto;
      width: auto\9;
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding-top:2vh;
      border-radius: 1em;
      border-top-left-radius: 2em;
      border-top-right-radius: 2em;
    }

    .skills-laptop p{
      text-align: center;
      font-size: 3vmin;
    }

    .skills-mobile{
      display: none;
    }

    @font-face {
      font-family: "inter";
      src: url('./assets/fonts/Inter/static/Inter_18pt-Regular.ttf');
    }
  }

  @media (max-aspect-ratio:16/9){ /* mobile display*/
    body{
      min-width: 320px;
      min-height: 640px;
    }

    :root {
        --base-color: white;
        --base-variant: black;
        --accent-color: #FFD457;
      }
      
      .darkmode {
        --base-color: #1e1e1e;
        --base-variant: white;
        --accent-color: #5A6374;
      }
      
      .container {
        color: var(--base-variant);
        font-family: Georgia, 'Times New Roman', Times, serif;
      }
      
      .header { 
        display: flex;
        flex-direction: row;
      }
      
      #theme-swap {
        background-color: var(--base-color);
        border: none;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top:0.3vh;
      }
      
      
      
      #theme-swap-link {
        background-color: var(--base-color);
        border: none;
        outline: none;
        margin-left:auto;
        justify-content: flex-end;
      }
      
      #theme-swap-link h2{
        align-items: center;
        font-family: 'roboto slab', Georgia, 'Times New Roman', Times, serif;
      }
      
      #theme-swap img{
        padding-left:0.5vw;
        margin-left:0;
        padding-top:1%;
        width:7vmin;
        height:7vmin;
      }
      
      #theme-swap img:last-child{
        display: none;
      }
      
      .darkmode #theme-swap img:first-child{
        display: none;
      }
      
      .darkmode #theme-swap img:last-child{
        display: block;
      }
      
      .image-swap img:last-child{
        display: none;
      }
      
      .darkmode .image-swap img:first-child{
        display:none;
      }
      
      .darkmode .image-swap img:last-child{
        display: block;
        width:1.5em;
        height:1.7em;
        padding-top:1.5em;
        margin-left:auto;
        justify-content: flex-end;
      }
      .image-swap {
        margin-left:auto;
        justify-content: flex-end;
      }
      
      .header .image-swap img{ 
        width:3vmin;
        height:3vmin;
        padding-left:10px;
        padding-right: 10px;
        padding-top:1.5vh;
        margin-left:auto;
        justify-content: flex-end;
      }
      
      .header a{
        padding-top:0;
        justify-content: flex-end;
        margin-left:auto;
        font-size: 2vmin;
      }
      
      .Line {
        position:absolute;
        margin-top: 0.2em;
        margin-left: -1%;
        border-left: 0;
        padding-left: 0;
        width: 101%;
        border-top:2px solid; 
        border-color: var(--base-variant);
        height: 1%;
      }
      
      .potraits {
        position: relative;
      }
      
      .profile-shadow {
        width:25%;
        height:50%;
        position: relative;
        margin-top:10%;
        margin-left:15%;
      }
      
      .shadow-swap img:last-child{
        display: none;
      }
      
      .darkmode .shadow-swap img:last-child{
        display: block;
      }
      
      .darkmode .shadow-swap img:first-child{
        display: none;
      }
      
      .shadow-swap img{
        max-width: 25%;
        height: auto;
        width: auto\9;
        position: relative;
        margin-top:20vh;
        margin-left:15vw;
      }
      
      .profile-pic {
        max-width: 25%;
        height: auto;
        width: auto\9;
        position: absolute;
        margin-top:22vh;
        margin-left:15vw;
        top: 3vh;
        left: 2vw;
      }
      
      .Biography {
        position:absolute;
        margin-left:50vw;
        margin-top:-57vh;
        padding-right:10vw;
      }
      
      .Biography h1{
        font-size:6vmin;
      }
      
      h1::after{
        content: "";
        display: block;
        width: 40%;
        height: 3px;
        margin-top:1%;
        background-color: var(--accent-color);
        justify-content: flex-start;
        border-radius: 2px;
      }
      
      .Biography h2{
        font-size:3.5vmin;
        margin-top: -1vh;
        line-height: 1.5em;
        word-spacing: 0.2em;
      }
      
      .name {
        margin-left: 15%;
        margin-top: -1%;
        font-size: 2vmin;
      }
      
      .name p{
        margin-top: -1.4%;
        font-size: 2vmin;
      }
      
      .footer {
        display: flex;
        flex-direction: row;
        font-family: 'inter', Georgia, 'Times New Roman', Times, serif;
      }
      
      .footer h2{
        margin-top:2vh;
        margin-right:-50%;
        font-size: 2.5vmin;
      }
      
      .footer img{
        width:3em;
        height:3em;
      }
      
      .footer a{
        justify-content: flex-end;
        margin-left:auto;
        margin-right:0;
        margin-left:-0.3%;
        margin-top:1%;
      }
      
      
      .footer-line {
        content: "";
        margin-left: -1%;
        width: 102%;
        height: 2px;
        margin-top: 5vh;
        bottom: 1vh;
        background-color: var(--base-variant);
        justify-content: flex-start;
        border-radius: 1px;
      }
      
      a:link {
        text-decoration: none;
        color:var(--base-variant);
      }
      a:visited {
        text-decoration: none;
        color:var(--base-variant);
      }
      a:hover {
        text-decoration: none;
        color:var(--base-variant);
        opacity: 50%;
      }
      
      .right-aligned-top {
          position: absolute;
          display: flex;
          top:8px;
          right: 16px;
      }
      
      .right-aligned-bottom {
          position: absolute;
          right: 0.5vw;
          margin-top: 1vh;
          margin-bottom: 0;
      }
  
      .projects-laptop{
        display: none;
      }
      .projects-mobile {
        display: block;
        font-family: 'roboto slab', Georgia, 'Times New Roman', Times, serif;
        margin-left: 7vw;
        margin-right: 7vw;
        margin-top: -5vh;
        animation: bottomSlideMobile;
        animation-duration: 1.5s;
      }
  
      .projects-mobile h1{
        font-size: 6vmin;
      }
  
      .projects-mobile h2{
        font-size:4vmin;
        padding-bottom: 5vh;
      }
  
      .projects-mobile p{
        font-size: 3vmin;
        line-height: 5vmin;
        font-family: "inter", Georgia, 'Times New Roman', Times, serif;
      }
  
      .projects-mobile a {
        text-decoration: underline;
      }
  
    .projects-mobile td {
        padding: 0; 
        margin: 0;
        padding-top: 2vh; 
    }
  
  
      .projects-mobile img{
        display: block;
        margin-right: 3vw;
        max-width: 90%;
        height: auto;
        width: auto\9;
        float: right;
      }
      
      .skills-laptop{
        display: none;
      }

      .skills-mobile {
        display: block;
        margin-top: 8vh;
        margin-left: 7vw;
        margin-right: 7vw;
        font-family: 'roboto slab', Georgia, 'Times New Roman', Times, serif;
      }
  
      .skills-mobile td{
        padding-top:1vh;
      }
  
      .skills-mobile h1{
        font-size: 6vmin;
        margin-left: 5vw;
      }

      .skills-mobile h1::after{
        width: 70%;
      }
  
      .skills-mobile img{
        max-width: 35%;
        height: auto;
        width: auto\9;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-top:2vh;
        border-radius: 1em;
        border-top-left-radius: 2em;
        border-top-right-radius: 2em;
      }
  
      .skills-mobile p{
        text-align: center;
        font-size: 3vmin;
      }
  
      @font-face {
        font-family: "inter";
        src: url('./assets/fonts/Inter/static/Inter_18pt-Regular.ttf');
      }
    }

@keyframes bottomSlide {
  0%{
    margin-top: 30vh;
    opacity: 0.1;
  }
  100%{
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes bottomSlideMobile {
  0%{
    margin-top: 30vh;
    opacity: 0.1;
  }
  100%{
    margin-top: -5vh;
    opacity: 1;
  }
}