@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');


html{
  /*scroll-behavior: smooth;*/
}

body{
  margin: 0;
  padding: 0;
}

.shrink{
  /*padding: 20px 0;*/
  margin: -2.4% 0;
  font-size: 16px !important;

}

.nav_shrink{
  display: none !important;
/*  height: 0;
  overflow: hidden;*/
}


@media only screen and (max-width: 800px) {


body .home_nav{
  position: absolute !important;
}

body .mob_align{
  text-align: right;
}

body .smallfont{
  font-size: 6vw;
}

body .hidden_mob{
    display: none !important;
}

body .dash, body #dash_home{
  padding-left: 10%;
}

body .hidden_dsktop{
    display: block;
}

body .spacing1{
  letter-spacing: 0.1px;
}

body .spacing2{
  letter-spacing: -0.1px;
}

body .dot2{
  display: none;
}

body li{
  display: block;
}

body .scrollToTop{
  display: none !important;
}

body .shrink{
  margin:0;
}

body .close_btn{
  top: 2.5%;
}

body .fill_gap{
  margin-top: 25%;
}

body .fill_gap_project{
  margin-top: 90vw;
}

body .fill_gap_project_small{
  margin-top: 65vw;
}

body #footer_home{
  position: relative;
  margin-top: 10%;
}

body footer{
  padding-bottom: 10%;
}

body .sub_grid{
  display: block;
  line-height: 3;
  width: 80%;
  margin: auto;
  font-size: 12px;
}

body .footer_grid{
  line-height: 2;
  font-size: 12px;
  width: 80%;
  gap:10px 50px;
  float: unset;
  margin: auto;
}

body #list_container{
  position: unset;
  padding: 10%;
  width: unset;
  margin-top: 40%;
}

body .copyright_label{
  display: flex;
  flex-direction: column;
  float: unset;
  margin: auto;
  width: 90%;
  font-size: 12px;
  pointer-events: none !important;
  background: #e5e5e5;
  text-align: center;
  gap:0;
  display: none;
}

body .big_nav_txt{
  font-size: 10vw;
  line-height: 2;
  letter-spacing: -0.5vw;
  width: unset;
}

body .Note{
width: 80%;
padding: unset; 
text-align: left; 
margin: auto;
padding-bottom: 15%;
padding-top: 5%;
font-size: 12px;
}

body video, body img{
width: 80%;  
margin: auto;
}

body .title{
font-size: 10vw;  
margin-bottom: 8%;
padding-top: 10%;
padding-left: 10%;
}

}

.simpleNav{
  padding-left: 5%;
}



video, img{
  width: 50%;
  margin-left: 5%;
  display: block;
  margin-bottom: 20px;
  clip-path: inset(2px 2px);
 /* border-radius: 10px;*/
}  


.title{
margin: auto;
font-family: 'Roboto', sans-serif;
font-size: 30px;
padding-top: 5%;
padding-left: 5%;
user-select: none;
font-weight: bold;
}

.big_nav_txt{
    font-family: 'Roboto', sans-serif;
    font-size: 60px;
    user-select: none;
    position: inherit;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    width: 90%;
}

#list_container{
    margin: auto;
    padding-left: 5%;
    padding-right: 5%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    height: 50%;
    width: 60%;
}

.Note{
/*background: #efefef;*/
padding: 20px;
width: calc(60% - 40px);
margin-left: 5%;
line-height: 2;

border-radius: 10px;
margin-bottom: 5%;
font-family: 'Roboto', sans-serif;  
}

.red_highlight{
color: #ff0000;

}

.red_highlight2{
color: #ff0000;
text-decoration: underline;
}

.scrollToTop{
transition: all 0.2s ease-out;

pointer-events:all !important;  
border-radius: 100px;
cursor:pointer;
height:50px;
width:50px;
display:none;
position:fixed;
margin:auto;
right:5%; bottom:15%;
z-index: 9;
}

.scrollToTop:hover, .close_btn:hover{
transition: all 0.2s ease-out;
opacity: 0.5;
transform: scale(1.5,1.5);

/*background: #D9D9D9;*/
}

.scrollToTop_icon{
height: 20px;
width: 20px;
position: absolute;
margin: auto;
left: 0; right: 0; top: 0; bottom: 0;
}

.dot{
width: 10px;
height: 10px;
border-radius: 50px;
background: #00df00;
display: inline-block;
margin-right: 10px; 
}

.dot2{
color: #ff0000;
font-family: "monospace";
}

ul{
  list-style: none;
  padding-left: 0; 
}

li{
  color: #bfbfbf;
  margin-bottom: 2%;
  display: inline;
}

.dash{
  color: #FF0000;
  padding-left: 5%;
  padding-bottom: 2.5%;
}

#dash_home{
  color: #FF0000;
  padding-left: 5%;
  padding-bottom: 2.5%;
  font-family: auto !important;
}

footer{
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  user-select: none;
}

#footer_home{
  position: absolute;
  bottom: 0;
  width: 100%;
}

.footer_grid {
  display: grid; 
  grid-template-columns: 0.8fr 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 10px 50px; 
  grid-template-areas: 
    ". ."
    ". ."; 
  width: 25%;
  margin-left: 5%;
  margin-bottom: 5%;
  float: left;
}

.copyright_label{
  float: right;

  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: 1fr 1fr; 
  gap: 10px 0px; 
  grid-template-areas: 
    ". "
    ". "; 
  margin-right: 5%;
  opacity: 0.5;
}

.spacing1{
  letter-spacing: 0.2px;
}

.spacing2{
  letter-spacing: -0.1px;
}

.title_links{
  text-decoration: none;
  color: unset;
}

.title_links:hover{
  text-decoration: line-through;
  text-decoration-color: #ff0000;
  text-decoration-thickness: 2px;
  color: #1b1b1b;
}

a{
  color: #1b1b1b;
   text-decoration-thickness: 1px;
}

a:hover{
  color: #ff0000;
}

.underlinex{
  text-decoration: underline;
}

.sub_grid {
  font-family: 'Roboto', sans-serif;
  display: flex; 
  gap:40px; 
  grid-template-areas: 
    ". . ."; 
  width: fit-content;
  margin-left: 5%;
  margin-bottom: 1%;

}

.extlink_icon{
  width: 10px;
  height: 10px;
}

.arrow{
  font-size:16px;
}

abbr{
  text-decoration: none;
}

.fixed_nav{
  background: #ffffff;
  position: fixed;
  width: 100%;
  z-index: 9;
  top: 0;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
}

.fill_gap, .fill_gap_project, .fill_gap_project_small{
  margin-top: 12.5%;
}

.close_btn{
  width: 30px;
  height: 30px;
  position: fixed;
  top: 10%;
  right: 5%;
  z-index: 99;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.hidden_dsktop{
  display: none;
}

.archived_link{
  color: #000;
  text-decoration: none;
}