*{
  margin : 0em;
  padding : 0em;
}

.hidden{
  display : none;
}

.dark{
  background-color : #22222a;
  color : #ffffffc9; 
}

.light{
  background-color : #ffffff;
  color : #22222af4;
}

body{
  transition : background-color 0s ease, color 0s ease, border-color 0s ease,opacity 0s ease;
  display : flex;
  flex-direction : column;
  justify-content : center;
  align-items : center;
  font-family :  'Roboto Condensed',Helvetica, sans-serif,Arial,'Big Shoulders';
}

.dark header, .light header{
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3em;
  background-color: inherit;
}

.info_container{
  display : flex;
  flex-direction : column;
  justify-content : space-evenly;
  align-items : center;
  height : 8em;
}

.info_container img{
  width : 7em;
  height : auto;
}

.favicon{
  display : flex;
  justify-content : center;
  align-items : center;
}

.favicon img{
  width: 6em;
  height: auto;
}

.name{
  font-size : 2.3em;
  width : auto;
  font-weight : 500;
  margin-top: 0.75em;
}

.dark .name{
  color: #ffffff;
}

.light .name{
  color: #22222a;
}

.links ul{
  width : 12em;
  display : flex;
  flex-wrap: wrap;
  justify-content : space-around;
  align-items: space-evenly;
  align-items : center;
  font-size : 1.1em;
}

nav{
  position : fixed;
  top : 0em;
  left : 0em;
  width: 100%;
  height : 4em;
  transform : translateY(-100%);
  transition: box-shadow 0s ease, transform 0.25s ease;
  background-color: inherit;
  color: inherit;
}

.utilities{
  display : flex;
  justify-content : space-between;
  align-items: center;
  width : 100%;
  background-color: inherit;
  color: inherit;
  height: 100%;
}

.progress_bar{
  width:100%;
  transition: width 0s ease;
}

.dark .progress_bar{
  background-color: rgb(203, 223, 255);
  height:0.1em;
}

.light .progress_bar{
  background-color:rgb(6, 72, 144);
  height:0.105em;
}
.dark nav{
  box-shadow: 0 0.4em 0.5em 0 rgba(0, 0, 0, 0.15), 0 0.6em 0.7em 0 rgba(0, 0, 0, 0.14);
  border-bottom: solid #1a1a1a 0.1em;
}

.light nav{
  box-shadow: 0 0.4em 0.5em 0 rgba(0, 0, 0, 0.15), 0 0.6em 0.7em 0 rgba(0, 0, 0, 0.11);
  border-bottom:  solid #b8b8b8 0.1em;
}

.web_link{
  display : flex;
  justify-content : left;
  align-items : center;
  width : auto;
  margin-left : 0.5em;
  font-size : 1.8em;
}

.web_link p{
  cursor: pointer;
}

ul{
  list-style: none;
}

img{
  position: absolute;
}

a{
  text-decoration-line: none;
}

.sub_nav{
  display : flex;
  width : 50%;
  justify-content : space-evenly;
  align-items : center;
  font-size : 1.2em;
}

.toggle{
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 300ms ease;
}

.toggle img{
  width : 1.1em;
  height : auto;
}

li a,.toggle img,.favicon img{
  cursor : pointer;
}

main{
  display: flex;
  flex-direction:column ;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.quote_container{
  display : flexbox;
  border : solid 0.01em;
  border-radius : 0.5em;
  height :auto ;
  width : 49.5em;
  padding : 0.25em;
  font-size : 0.9em;
  text-align : center;
  line-height : 0.5em;
  white-space : pre-wrap; 
  min-height : 7.2em;
  cursor: pointer;
}

.quote_container p{
  line-height : 2em;
}

.card_container{
  width : 45.5em;
  display : flex;
  flex-direction : column;
  flex-wrap : wrap;
  justify-content : top;
  align-items : center;
  height : 60.5em;
  border-radius : 0.5em;
  color: inherit;
  background-color: inherit;
}

.card{
  display : flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width : 22em;
  border : solid 0.01em;
  height : auto;
  margin-top : 0.75em;
  border-radius : 0.35em;
  transition : background-color 0.5 ease, color 0.5 ease;
  background-color: inherit;
  color: inherit;
  overflow: hidden;
  cursor: default;
}

.author{
  font-size : 1.1em;
}

.about{
  margin-top : 0.75em;
  line-height : 1.6em;
  width : 22.25em;
  font-size : 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: left;
  height: 22em;
}

.dark .about p, .light .about p{
  padding-left: 0.5em;
  padding-right: 0.5em;
  
}

.dark .about span,.dark .author,.dark .web_link #name,.dark .title{
  font-weight: 580;
}

.light .about span,.light .author,.light .web_link #name,.light .title{
  font-weight: 485;
}

.dark .card, .dark .quote_container{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.28);
  border : solid rgba(255,255,255,0.4) 0.01em;
}

.light .card, .light .quote_container{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
  border : solid rgba(34,34,42,0.4) 0.01em;
}

.dark .card:hover, .dark .quote_container:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.35);
  border : solid rgba(255,255,255,0.8) 0.01em;
}

.light .card:hover, .light .quote_container:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.11);
  border : solid rgba(34,34,42,0.8) 0.01em;
}

footer{
  display: flex;
  flex-direction: column;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  width:44em;
  height:auto;
  justify-content: space-between;
}

.social-media{
  display: flex;
  justify-content: space-between;
  font-size: 1.15em;
}

.dark li a,.dark .more,.dark a{
  color: rgb(203, 223, 255);
  cursor: pointer;
}

.light li a,.light .more,.light a{
  color:rgb(6, 72, 144);
  cursor: pointer;
}

li a:hover{
  opacity: 0.8;
}

.dark li a:hover,.dark .more a:hover,.dark a:hover{
   color: rgb(233, 198, 252);
}

.light li a:hover,.light .more a:hover,.light a:hover{
  color: rgb(60, 8, 88);
}

li a:active{
  opacity: 0.9;
}

.favicon img:hover{
  opacity: 0.95;
}

.tooltip{
  position: absolute;
  z-index: 10;
  height: 1.75em;
  width: auto;
  pointer-events: none;
  text-align: center;
  font-size: 1em;
}

.dark .tooltip::after{
  padding: 0.25em;
  content: 'Light Mode';
  background-color: rgba(0, 0, 0, 0.95);
  color: rgba(255, 255, 255, 0.9);
}

.light .tooltip::after{
  padding: 0.25em;
  content: 'Dark Mode';
  background-color: rgb(0, 0, 0,0.85);
  color: rgba(255, 255, 255, 0.97);
}

.LaTeX{
  position: relative;
  z-index: -1;
}

.dark #one img{
  filter: brightness(110%) contrast(1.001)
}

.light #one img{
  filter: invert(1) brightness(80%) contrast(3);
}

#one img{
  width: 100%;
  height: auto; 
  position: relative;
  z-index: -1;
  border-radius: auto;
  margin-top: 1em;
}

#one{
  height:auto;
}

.dark #two img{
  filter: brightness(110%) contrast(1.01)
}

.light #two img{
  filter: invert(1) brightness(80%) contrast(3);
}

#two img{
  width: 100%;
  height: auto; 
  position: relative;
  z-index: -1;
  border-radius: auto;
  margin-top: 1em;
}

#two{
  height:auto;
}


.more{
  font-size: 1.24em;
  margin-bottom: 1em;
}

.brief a{
  font-size: 1.1em;
}

.card p,.card h1{
  padding-left:0.75em;
  padding-right:0.75em;
  margin-top:0.5em;
}

.more a{
  color: inherit;
}

.more{
  margin-bottom:0.6em;
  margin-top:0.6em;
  display: flex;
  justify-content: space-around;
  width: 100%;
}

#reading{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: left;
  height: 24.88em;
  text-align: left;
}

#reading p{
  width: 100%;
  margin-left: 2em;
  font-size: 1em;
  margin-bottom: 0.3em;
  color:inherit;
}

.dark .brief,.light .brief{
  color:inherit;
}

.title{
  width: 100%;
  text-align: left;
  margin-left: 2em;
  font-size: 1.5em;
}

#reading .title{
  width: 100%;
  text-align: left;
  margin-left: 2em;
  font-size: 1.5em;
}

.web_link a{
  color: inherit;
}

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }

@media (max-width:799px) {
 
html,body{
  overflow-x : hidden;
}

nav{
  height :3em;
}

.web_link{
  font-size : 0.9em;
  width: 25%;
}

.sub_nav{
  font-size : 0.65em;
  width: 60%;
  margin-left: 7.5em;
  justify-content: space-evenly;
}

.toggle img{
  width :1.1em;
  height : auto;
}

.info_container{
  height:5em;
}

.name{
  font-size : 1.7em;
}


.links ul{
  width : 10em;
  font-size : 1em;
  height: 2.5em;
}

.favicon img{
  width : 4.5em;
  height : auto;
}

.dark .quote_container,.light .quote_container{
  width : 93.1%;
  font-size : 0.8em;
  border-radius : 0.25em;
  height: auto;
  margin-top:1.5em;
}

.card_container{
  width : 98%;
  height :auto;
  flex-wrap: nowrap;
  align-items: center;
}

.dark .about, .light .about{
  font-size : 0.9em;
  text-align : left;
  line-height : 1.4em;
  width : 95%;
}

.dark .card,.light .card{
  width : 95%;
  border-radius : 0.25em;
}

footer{
  width:92%;
}

.tooltip{
  display: none;
}

.about{
  height: 24em;
}

.dark .about,.light .about{
  line-height: 1.9em;
}

.light .progress_bar{
  height: 0.1em;
}

.order-1 { order: 2; }
.order-2 { order: 1; }
.order-3 { order: 3; }

  .dark #one img{
    filter: contrast(0.955);
  }

  .links ul li:nth-child(1) { order: 1; }
  .links ul li:nth-child(2) { order: 4; }
  .links ul li:nth-child(3) { order: 2; }
  .links ul li:nth-child(4) { order: 3; }

} 

@media (max-width:420px) {
  html,body{
    overflow-x : hidden;
  }
  
  nav{
    height :3em;
  }
  
  .web_link{
    font-size : 0.8em;
    width: 20%;
  }
  
  .sub_nav{
    font-size : 0.55em;
    width: 65%;
    margin-left: 7.5em;
    justify-content: space-evenly;
  }
  
  .toggle img{
    width :1.1em;
    height : auto;
  }
  
  .info_container{
    height:5em;
  }
  
  .name{
    font-size : 1.7em;
  }
  
  
  .links ul{
    width : 10em;
    font-size : 1em;
    height: 2.5em;
  }
  
  .favicon img{
    width : 4.5em;
    height : auto;
  }
  
  .dark .quote_container,.light .quote_container{
    width : 93.1%;
    font-size : 0.8em;
    border-radius : 0.25em;
    height: auto;
    margin-top:1.5em;
  }
  
  .card_container{
    width : 98%;
    height :auto;
    flex-wrap: nowrap;
    align-items: center;
  }
  
  .dark .about, .light .about{
    font-size : 0.9em;
    text-align : left;
    line-height : 1.4em;
    width : 95%;
  }
  
  .dark .card,.light .card{
    width : 95%;
    border-radius : 0.25em;
  }
  
  footer{
    width:92%;
  }
  
  .tooltip{
    display: none;
  }
  
  .about{
    height: 24em;
  }
  
  .dark .about,.light .about{
    line-height: 1.9em;
  }
  
  .light .progress_bar{
    height: 0.1em;
  }
  
  .order-1 { order: 2; }
  .order-2 { order: 1; }
  .order-3 { order: 3; }
  
    .dark #one img{
      filter: contrast(0.955);
    }
  
    .links ul li:nth-child(1) { order: 1; }
    .links ul li:nth-child(2) { order: 4; }
    .links ul li:nth-child(3) { order: 2; }
    .links ul li:nth-child(4) { order: 3; }
}