/* all pages */
@font-face {
  font-family: "myFirstFont";
  src: url("../font/Sono.ttf") format("truetype");
}
html {
  scroll-behavior: smooth;
}
body{ 
    background-color: #fffefa;  
    margin-left:10%;
    margin-right:10%;
    
    font-family: "Sono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:"MONO" 1;

    text-align:center;
    line-height: 1.4;
    letter-spacing: 0.02em;
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
}
h1, h2, h3{
    font-family: "Sono", monospace;
    font-weight: 400;
}
h1 {font-size: 17px;}
h2 {font-size: 16px;}
h3 {font-size: 15px;}
p {
    font-family: "Sono", monospace;
    font-size: 14px;
}
.smallText, .leftAlignText{
    padding: 3%;
    width: 80%;
    text-wrap: break-word;
    text-align: left;
}
.smallText{
font-size: small;
}
.leftAlignText{
    font-size: 14px;
}
#expandName{
    /* color: black; */
    cursor: help;
    text-decoration: double underline;
}
#expandName:hover{
    color: rgb(255, 112, 40);
    text-decoration: none;
}
#researchElaborate, #codeElaborate, #artElaborate {
  display: none;
}
#research, #researchElaborate, #researchLabel{
    color: black;
    background-color: rgb(255, 210, 210);
}
#code, #codeElaborate,#codeLabel {
    color: black;
    background-color: rgb(197, 214, 255);
}
#art, #artElaborate, #artLabel  {
    color: black;
    background-color: rgb(247, 237, 202);
}
#arrowDown{
    padding-top: 50px;  
    padding-bottom:50px; 
    cursor: s-resize;  
    font-size: 20px;
}
#arrowUp{
    position: fixed;   
    text-align: center;   
    text-decoration: none;    
    bottom: 400px;            
    left: 30px;             
    padding: 0px 0px;   
    font-size: 40px;
    color: grey;        
    cursor: pointer;
    transition: color 0.3s ease;
    border-top: 1px solid black;
}
#arrowUp:hover{
    color: black;
    transform: scale(1.1);   
    transition: 0.3s;   
    border-top: 1px solid black;
}
#arrowUp:active{
    color: white;
}
.link.link {
    color: black;
    text-decoration: underline;
}
.link:hover {
    color: rgb(255, 136, 0); 
}
.link:active {
    color: white; 
}
/* Headings */
header{
    height: 60vh;
    margin-left:10%;
    margin-right:10%;
}
header .textbox{
    width: 90%;
    height: 300px;
    margin: 0 auto;
    text-align: left;
    padding-top:100px;
    padding-bottom: 100px;
    overflow: hidden;
}
/* name 'logo' */
.name{
    background: 0; 
    text-decoration-color: black;
    font-size: 16px;
    z-index: 20;
    position: fixed;  
    top: 3%;            
    left: 2%;
}
/* day&night switch */
.day{
    background: 0; 
    position: fixed;  
    width: 25px;
    height: 25px;
    top: 5%;            
    right: 5%;
    transition: transform 0.3s ease;
}
.night{
    position: fixed;  
    width: 24px;
    height: 24px;
    top: 11%;            
    right: 5%;
    overflow: visible;
    transition: transform 0.3s ease;
}
.day:hover,.night:hover {
  transform: scale(1.1);
}
/* navigation bar */
#navbar {
    position: sticky; 
    top: 0;
    width: 90%;           
    text-align: center;
    margin: 0 auto;
    padding: 0;
    border-top: 1px solid black;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap; 
    justify-content:space-around;
    font-weight: 450;
}
.navlink{
    padding: 20px 0;
    padding-bottom: 5px;
}
.navlink a:link{
    color: rgb(185, 177, 177);
    text-decoration: none;
}
.navlink a:visited{
    color: rgb(185, 177, 177);
}
.navlink a:hover{
    color: rgb(185, 177, 177);
}
.navlink a:active{
    color: rgb(185, 177, 177);
    text-decoration: line-through;
}
.navlink a.active{
    color: black;
}

/* layouts */
.textbox{
    width: 80%;
    padding: 0;
    margin: 0 auto;
    margin-top: 7%;
    margin-bottom: 5%;
    text-align: center;
}
.textbox img{
    width: 100%;
    height: auto;
}
/* 1 column layout - 'Present'page */
.gallary{
    display:block;
    text-align: center;
}
/* 2 columns with flex layout - 'Past'page */
.flex-container{
    margin: auto;
    margin-top: 5%;
    border-top: 2.5px double black;
    max-width: 90%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.flex-item{
    width: 100%;
    border-bottom: 1px dashed black;  
    padding: 3%; 
}
.flex-item img{
    width: 80%;
    height: auto;
    padding: 5%;
}
/* footer */
footer{
    position: relative;
    margin-top: 10%;
    padding: 10px 0;
    bottom: 0;
    width: 100%;
    height: auto;
    font-style: none;
    text-decoration: none; 
    text-align: center; 
}
@keyframes fadeIn {
    to {opacity: 1;}
}

/* jQuery Interactivity */
/* user’s preferred color scheme */
@media (prefers-color-scheme: light) {
    body {
    background-color: #fffefa;  
    color: black;
    }
    .header{
    background-color: #fffefa;  
    }
    .day svg .cls-1,
    .day svg .cls-2 {
    stroke: black;
    }
    /* #expandName {
        color: darkgrey;
    } */
}
@media (prefers-color-scheme: dark) {
    body {
    background-color: black;
    color: white;
    }
    .header{
    background-color: black;
    }
    .link:link{
    color: rgb(255, 255, 255);
    }
    .link:hover {
    color: rgb(255, 100, 100, 0.6); 
    }
    .navlink a:link{
    color: rgb(50, 50, 50, 0.3);
    }
    .navlink a:visited{
    color: lightgrey;
    }
    .navlink a:hover{
    color: darkgray;
    }
    .navlink a:active{
    color: lightgrey;
    }   
    #navbar {
    border-top: 1px solid rgb(244, 244, 244);
    }
    .navlink a.active{
    color: white; 
    }
    .flex-container, .flex-item {
    border: 1px solid darkgrey;
    }
    #expandName{
    color: lightgrey;
    }
    #arrowUp {
    border-top: 1px solid white;
    }
    #arrowUp:hover{
    color: white;
    
    }
    #arrowUp:active{
    color: white;
    }
    .day svg .cls-1,
    .day svg .cls-2 {
    /* fill: white; */
    stroke: white;
    }
}
/* Optimized layout  */
@media screen and (min-width: 1281px) {
    body,p {
    font-size: 1em;
    }
}
@media screen and (min-width:721px) and (max-width: 1280px) {
    body,p {
    font-size: 1em;
    }
}
@media screen and (min-width: 461px) and (max-width: 720px) {
     .flex-container{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    }
    body,p {
    font-size: 1em;
    }

}
@media screen and (max-width: 460px) {
     .flex-container{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    }
    body,p {
    font-size: small;
    }
}