:root {
  --color1pc: #05172e;
  --color2pc: #0c1426;
  --color3pc: #001121;
  --color1mo: #0099c3;
  --color2mo: #007a78;
  --color3mo: #0c1426;
  --linkcolor:#347acb;
  --linkcolormo: #006ba5;
  --margin-top: 0 50%;
  }  
  
@media only screen and (min-width:899px){
    body {
        font-family: 'Quicksand', sans-serif;
        background: linear-gradient(var(--color1pc), var(--color2pc), var(--color3pc));
        padding: full;
    }
    .box{
      font-family: 'Source Code Pro', monospace;	color: aliceblue;
      color: aliceblue;
      text-decoration: aliceblue;
      background-color: var(--color1pc);
      top:0;
      padding-right:0%;
      border-bottom: 3000vw;
      max-width: 3000%;
      max-height: 1300%;
      margin-top: -9px;
      margin-left:-3%;
      border-width: 0px 0px 1px 0px;
      border-color: rgb(219, 232, 250);
      border-style: solid;
      display: block;
      position: fixed;
      z-index: 1030;
  }
    nav{
        display: inline;
        position: inherit;
        border:inherit;
        border: inherit;
        background-color: inherit;
        padding-right: 85.6vw;
        margin-right: -85.6vw;

    }
    #Nav-for-posts{
      margin-right: -20vw;
    }
    .navbar {
        overflow: hidden;
        background-color: transparent;
    }
    
    /* Links inside the navbar */
    .navbar a {
        float: left;
        font-size: 1em;
        color: transparent;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    
    /* The dropdown container */
    .dropdown {
        float: left;
        overflow: hidden;
    }
    
    /* Dropdown button ("home" or "languages") */
    .dropbtn{
      font-size: 1.3em;
      border: none;
      outline: none;
      color: aliceblue !important;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0; 
      margin-left: 1em;
      transition: 300ms;
    }
    .gallery-button{
      font-size: 1.3em;
      color: inherit;
      text-decoration: none;
      background-color: transparent;
      border: none;
      outline: none;
      transition: 300ms;
    } 
    .publications-button{
      font-size: 1.3em;
      color: inherit;
      text-decoration: none;
      background-color: transparent;
      border: none;
      outline: none;
      transition: 300ms;
    }
    
    
    .navbar a:hover, .dropbtn:hover {
        font-size: 1.3em;
        color: aliceblue;
        transition: 300ms;
    }
    
    /* Dropdown content (hidden by default) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: transparent;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    /* Links inside the dropdown */
    .dropdown-content a {
        float: none;
        transition: 300ms;
        color: aliceblue;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    /* Add a grey background color to dropdown links on hover */
    .dropdown-content a:hover {
        background-color: transparent;
        text-shadow: 300px 0 300px 300px;
        transition: 300ms;
    }
    
    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
        display: block;
    }
    ::-webkit-scrollbar {
        width: 2px;
    }
    
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 1px;
    }
    ::-webkit-scrollbar-thumb {
        background: rgb(0, 0, 0);
        border-radius: 1px;
    }
    .main-title{
        text-align: left;
        font-size: 4em;
        margin: 0 0 1em;
        clear: left;
        width: 1240px;
        margin: 1.5em auto;
        color: aliceblue;
    }
    .intro {
        text-align: left;
        font-size: 1.45em;
        width: 1000px;
        color: aliceblue;
        margin: 2em;
    }
    .subtitles{
        text-align: left;
        font-size: 2.5em;
        color: aliceblue;
        margin: 2.5em;
        position: static;
        min-height: 25px;
    }
    .typewriter p {
      font-family: monospace;
      white-space: pre;
      visibility: hidden;
      flex-wrap: wrap;
  }
    .descriptions{
        text-align: left;
        font-size: 1.45em;
        width: 600px;
        color: aliceblue;
        height: auto;
        margin: 2em;
    }
    #main-content{
      margin-top: 15vh;
    }
    .publication-content{
      text-align: left;
      font-size: 1.45em;
      width: auto;
      color: aliceblue;
      height: auto;
      margin: 3em;
    }
    p.publication-content{
      line-height: 1.1em;
      margin-bottom: 2em;
    }

    #DateAndTime{
      margin-left: 15vw;
      color: aliceblue;
      font-family: monospace;
      font-size: 1em;
      font-style: italic;
    }

    .descriptions{
        display: flex;
    }
    
    .publication-title{
      margin-bottom: auto;
      margin-left: 5em;
      display: flex;
      z-index: 4;
    }
    .postslist-title{
      color: var(--linkcolor);
    }

    #publication-image{
      height: auto;
      width: 24vw;
      margin-bottom: 20vh;
      margin-top: 4vh;
      /*The margin-left value is given by the formula m = (50-width/2) if the image is to be held in the center*/
      margin-left: 38vw;
      margin-right: 2vw;
      border-radius: 1%;
    }
    #publication-video{
      aspect-ratio: 16 / 9;
      width: 30vw;
      margin-bottom: 20vh;
      margin-top: 4vh;
      /*The margin-left value is given by the formula m = [50-(width/2)] if the image is to be held in the center*/
      margin-left: 35vw;
      margin-right: 2vw;
      border-radius: 1%;
    }
    .publication-image-descriptor{
      text-align:center;
      color: aliceblue;
      font-style: italic;
      font-family: monospace;
      padding-left:8vw;
      padding-right: 8vw;
      /*The margin-top value shall be negative if the #publication-image's margin-bottm value is too great.*/
      margin-top: -19vh;
    }
    
    #not-footer{
      z-index:1;
    }

    .dynamicgen{
      text-align: center;
      margin-top: auto;
      margin-bottom: 0%;
      height: 4.62962963;
      color: aliceblue;
      background-color: var(--color3pc);
      border-width: 1px 0px 0px 0px;
      border-color: rgb(219, 232, 250);
      border-style: solid;
      display: flexbox;
    }
    footer{
      text-align: center;
      margin-top: 113.8%;
      margin-bottom: 0%;
      height: 50px;
      color: aliceblue;
      background-color: var(--color3pc);
      border-width: 1px 0px 0px 0px;
      border-color: rgb(219, 232, 250);
      border-style: solid;
      display: flexbox;
    }
    footer a{
      forced-color-adjust: revert;
      color: #044152 !important;
      text-decoration:none;
    }
    #publication-footer{
      margin-top: 13vh;
      z-index: 0;
    }
    #publication-list-footer{
      margin-top:73vh;
    }
    .dark-link{
      color: var(--linkcolormo);
    }
    .bright-link{
      color: var(--linkcolor);
    }
}
@media only screen and (max-width: 900px) {
   body.dynamic-body{
    font-family: 'Quicksand', sans-serif;
    padding: 0% 0% auto 0%;
    background: var(--color1pc);
    background: linear-gradient(var(--color1pc), var(--color2pc) 30%, #0c1426 90%);
    z-index: 1;
    font-size: 1.7vh;
    scroll-behavior: smooth;
    }
  .static-body{
    font-family: 'Quicksand', sans-serif;
    padding: 0% 0% 435.5% 0%;
    background: var(--color1pc);
    background: linear-gradient(var(--color1pc), var(--color2pc) 30%, #0c1426 90%);
    z-index: 0;
    font-size: 1.7vh;
    scroll-behavior: smooth;
    }
    nav{
      display: inline;
      position: inherit;
      border:inherit;
      border: inherit;
      background-color: inherit;
      padding-right: 85.6vw;
      margin-right: -85.6vw;
  }
  
  .navbar {
    overflow: hidden;
    background-color: inherit;
    margin-left: 10%;
  }
  
  .navbar a {
    font-size: 2vh;
    color: inherit;
    text-align: center;
    padding: 1.54% 1.78%;
    margin-left: 10%;
  }
  
  .dropdown {
    overflow: hidden;
    margin-left: 10%;
  }
  
  .dropdown .dropbtn {
    position: absolute;
    display: flex;
    font-size: 2vh;
    color:aliceblue;
    border: none;
    outline: none;
    padding: 1.54% 8%;
    margin-top: -1.54%;
    background-color: inherit;
    font-family: inherit;
    top:0;
    margin-left: 1vw;
    transition: 300ms;
  }

  .navbar a:hover, .dropdown:hover .dropbtn {
    font-size: 2.25vh;
    transition: 300ms;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: transparent;
    min-width: 8.89%;
    box-shadow: 0px 0.44% 0.89% 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-top: 3%;
    margin-left: 13vw;
  }
  
  .dropdown-content a {
    transition: 300ms;
    padding: 2% 1.78%;
    text-decoration: none;
    display: block;
    text-align: left;
    margin-left: 13vw;
  }
  
  .dropdown-content a:hover {
    background-color: transparent;
    text-shadow: 33.33% 0 33.33% 0px;
    transition: 300ms;
    margin-left: 13vw;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
    margin-left: 7%;
  }
  .gallery-button{
    position: absolute;
    margin-left: -4vw;
    font-family: inherit;
    background-color: transparent;
    border: none;
    outline: none;
    text-decoration: none;
    transition: 300ms;
    top:0;
  }
  .publications-button{
    position: absolute;
    margin-left: 46vw;
    font-family: inherit;
    background-color: transparent;
    border: none;
    outline: none;
    text-decoration: none;
    transition: 300ms;
    top:0;
  }
  .dark-link{
    color: var(--linkcolormo);
  }
  .bright-link{
    color: var(--linkcolor);
  }

  .box{
    font-family: 'Source Code Pro', monospace;
    text-align: left;
    color: aliceblue;
    text-decoration: aliceblue;
    background-color: transparent;
    border-bottom: 166.67%;
    max-width: 333.33%;
    max-height: 72.22%;
    top:0;
    margin-left: -0.33%;
    margin-right: -0.06%;
    margin-top: 3vh;
    border-width: 0 0 0.06vh;
    border-color: rgb(219, 232, 250);
    border-style: solid;
    display: flexbox;
    position: fixed;
    z-index: 4;
    font-size: 1.3em;
}
    
    .dropdown:hover .dropdown-content {
      display: block;
      margin-left: 7%;
    }

  ::-webkit-scrollbar {
    width: 0.22%;
  }
  
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 11.11% grey;
    border-radius: 0.11%;
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgb(0, 0, 0);
    border-radius: 0.11%;
  }
  .main-title{
    text-align: left;
    font-size: 6vw;
    margin: 0 0 2vw;
    clear: left;
    width: 100%px;
    margin: 1.5em auto;
    color: aliceblue;
}
  .intro, .descriptions {
    padding: 0px 1.67% 1.67% 0px;
    text-align: left;
    font-size: 1.7vh;
    width: 94.44%;
    margin-left: 2.22%;  
  }
  .subtitles{
    text-align: left;
    font-size: 2.5vh;
    color: aliceblue;
    margin: 2.5vw;
    position: static;
    min-height: 10vh;
}
.typewriter p {
  font-family: monospace;
  visibility: hidden;
  flex-wrap: wrap;
}

  .descriptions {
    display: flex;
    padding: 0% 0% -16.7% 0%;
  }
  .intro{
    padding: 0% 0% -16.7% 0%;
    COLOR: whitesmoke;
  }
  
  .ai, .coding, .reverse-engineering, .SciTech {
    padding: full;
    width: 90%;  
  }
  
  .ai {
    padding: 0% 0% 0% 0px;
    position: absolute;
    color: whitesmoke;
}
  
  .coding {
    padding: 120% 0% 0% 0%;
    position: absolute;
    color: whitesmoke;
  }

  .reverse-engineering {
    padding: 220% 0% 0% 0;
    position: absolute;
    color: aliceblue;
  }
  
  .SciTech {
    padding: 320% 0% 16.67% 0;
    position: absolute;
    color: aliceblue;
  }
  
  .aipics {
    margin-left: -0.5vb;
    margin-top: 55%;
    border-radius: 5%;
    transition: transform .4s;
    position: absolute;
    height: auto;
    width:115vw;
    }
    .codepic .img7{
        margin-left: 12.5%;
        margin-top: 155%;
        border-radius: 2%;
        transition: transform .4s;
        transition: 400ms;
        position: relative;
    }

    .decompilerpic .img8{
        margin-left: 7.5%;
        margin-top: 55%;
        border-radius: 2%;
        transition: transform .4s;
        transition: 400ms;
        position: absolute;
    }
    .medalspic .img9{
        margin-left: 7.5%;
        margin-top: 185%;
        border-radius: 2%;
        transition: transform .4s;
        transition: 400ms;
        position: absolute;
    }
    .ja .codepic .img7{
      margin-left: 7.5%;
      margin-top: 155%;
      border-radius: 2%;
      transition: transform .4s;
      transition: 400ms;
      position: absolute;
  }
  .ja .decompilerpic .img8{
    margin-left: 7.5%;
    margin-top: 250%;
    border-radius: 2%;
    transition: transform .4s;
    transition: 400ms;
    position: absolute;
}
  .ja .medalspic .img9{
    margin-left: 7.5%;
    margin-top: 376%;
    border-radius: 2%;
    transition: transform .4s;
    transition: 400ms;
    position: absolute;
  }
  #image-container{
    margin-left: 3vw;
    z-index: 99;
  }
  .my-image {
    width: 28.12vw;
    height: 28.12vw;
    border-radius: 2%;
    margin: 1vw;
    transition: 450ms;
  }
  .my-image:hover {
    display: auto;
    padding: 10vh 30vw ;
    border-radius: 2%;
    margin: 1vw;
    transform: scale(2);
    transition: 225ms;
    z-index: 1;
  }
  #DateAndTime{
    margin-left: 15vw;
    color: aliceblue;
    font-family: monospace;
    font-size: 0.675em;
    font-style: italic;
  }
  #publication-image{
    display: block;
    height: auto;
    width: 58vw;
    margin-bottom: 12vh;
    margin-top: 12vh;
    /*The margin-left value is given by the formula (50-width/2) if the image is to be held in the center*/
    margin-left: 21vw;
    margin-right: 2vw;
    border-radius: 1%;
    transition: inherit;
  }
    .img_wrapper{
    overflow: visible;
    transition: transform 0.3s ease-in-out; 
  }
  .img_wrapper:has(#publication-image:hover){
    transform: scale(1.4);
    .publication-image-descriptor{
      transform: scale(calc(1/1.4));
    }
  }

  #publication-video{
    aspect-ratio: 16 / 9;
    width: 68vw;
    margin-bottom: 12vh;
    margin-top: 1vh;
    /*The margin-left value is given by the formula m = [50-(width/2)] if the image is to be held in the center*/
    margin-left: 16vw;
    margin-right: 2vw;
    border-radius: 1%;
  }
  .publication-image-descriptor{
    --margin-top:-11vh;
    font-size: 0.675em;
    text-align:center;
    color: aliceblue;
    font-style: italic;
    font-family: monospace;
    padding-left:8vw;
    padding-right: 8vw;
    /*The margin-top value shall be negative if the #publication-image's margin-bottm value is too great.*/
    margin-top: var(--margin-top);
    transition: transform 0.3s ease-in-out;
  }

  #main-content{
    margin-top: 15vh;
  }
  .publication-title{
    margin-bottom: auto;
    margin-left: 2em;
    display: flex;
    z-index: 4;
  }
  .publication-content{
    text-align: left;
    font-size: 1em;
    width: auto;
    color: aliceblue;
    height: auto;
    margin: 1em;
  }
  p.publication-content{
    line-height: 1.1em;
    margin-bottom: 2em;
  }
  .postslist-title{
    color: var(--linkcolormo);
    font-size: 0.75em;
    /*This element is for the <a> tag of the title, so DO NOT EDIT IT UNLESS YOU WANT TO COLOR IT!*/
  }
  .dynamicgen{
    text-align: center;
    margin-top: auto;
    margin-bottom: 0;
    color: aliceblue;
    background: var(--color3mo);
    border-width: 0.06% 0 0 0;
    border-color: rgba(0, 0,0, 0);
    border-style: solid;
    display: flexbox;
  }
  footer a{
    forced-color-adjust: revert;
    color: #002b5d !important;
    text-decoration:none;
  }
  footer{
      text-align: center;
      margin-top: 450.5%;
      margin-bottom: -450.5%;
      color: aliceblue;
      background: var(--color3mo);
      border-width: 0.06% 0 0 0;
      border-color: rgba(0, 0,0, 0);
      border-style: solid;
      display: flexbox;
  }
  #publication-footer{
    margin-top: 12vh;
  }
  #publication-list-footer{
    margin-top:76vh;
  }
}
    
/*Sorry for my terribly repetitive/boilerplate-ridden code, I'll try improving it soon-ish.*/