body {
    font-family:"Chakra Petch",monospace,sans-serif;
    color:cadetblue;
    background-color:#141414;

}

h1 {
    font-family: "Chakra Petch",monospace,sans-serif;
    align-content: center;
    font-size: 200%;
}

h2 {
    font-family: "Chakra Petch",monospace,sans-serif;
    font-size: 30px;

}

h1, h2 {
    color: cadetblue;
    animation-name: fontChange;
    animation-duration: 5s;
    animation-iteration-count: ;
    /*
    color: #e0e6e1; */
}

h4 {
    display: none;
}

/* animation */



h5 { 
    color: #e0f2f1;
    text-align: left;
    font-size: 100%;
    padding-left: 2%;

}


#content {

    width: 85%;
    margin: 10px auto;
    background-color: #171717;
    padding: 1em 4em;
     background-image: url(cyber.jpg);
    background-size: 165%;
    background-repeat:repeat;
    background-blend-mode:luminosity;  
    
}

/* links */

a:link, a:visited, a:active {
    font-family: "Chakra Petch",monospace,sans-serif;
    text-decoration: none;
     color:#b2dfdb;
}

a:hover {
    font-family: "Chakra Petch",monospace,sans-serif;
    text-decoration: none;
    font-style: bold;
    font-size-adjust: 120%;
    color: #004d40;
    transition: 0.2s;
    padding: 2px;
    background-color: #e0f2f1;
    border-bottom: solid;
    border-bottom-width: 5px;
    border-bottom-color: #004d40;
}

#navigation {
    
    font-family:"Chakra Petch",monospace,sans-serif;
    font-size: 110%;
    border-top: solid 2px #141414;
    border-bottom: solid 2px #141414;
    text-align: right;
    padding-right: 5%;
    background-color: #141414;
    opacity: 79%;
}
    
li {
    display: inline;
    list-style-type: none;
    
    }

#studentID {
    display: inline-flex;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 10px;
    padding-left: 5%;
    float: left;
    color: #b2dfdb;
    
    
}


.container {

    display: flex;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    width: 100%;
 
}

.heading {
    display: relative;
    align-items: center;
    grid-row: 1fr;
    grid-row-gap: 5px;
    font-size: 200%;
    text-align: right;
    padding: 4%;
    border-right-style: solid;
    border-right-color: cadetblue;
    border-width:10px;
    /*background-color: #141414;
    opacity: 90%;*/
}


/* animation

@keyframes textSlide {
    from {right: -100px;}
    to {left: 100px;}
}



/* The element to apply the animation to */
.text {
     position: relative;
    font-size: auto;
    width: 105%;
    position: relative;
    color: #e0f2f1;
    padding: 2%;
    /*background-color: #141414;
    opacity: 82%; */
   /* animation-name: textSlide;
    animation-duration: 2s;
    transition-timing-function: ease-in; */
}



/* screen adjustment */

@media screen and (max-width:960px) {
    .wrapper {
        width: 640px;
    }
}

@media screen and (max-width: 640px) {
    .wrapper {
        width:100vw;

    }
    h1,h2,h3,h4,h5,p {
        word-wrap:  break-word;
    }
    h3,h4,h5 {
        width: 100vw;
    }
    
    h1{
        font-size: 150%;
    }
   
    h4 {
        display: contents;
        color:#b2dfdb;
    
    }

    .scroll {
        align-content: center;
        width: 80vw;
        position: relative;
        top: -60%;
        transform: translate(50%,-80%);
    }
    .container {
        width: 100vw;
        display: grid;
        align-content: center;
        align-items: center;
        grid-template-columns: 1fr;
        column-width: 100vw;
        grid-auto-rows: 1fr 1fr 1fr 1fr 1fr;
        font-size: 100%;   
        top: 50%;
        left: 50%;
        transform: translate(-20%, -5%);
    
    }
    
    .text {
        width: 80vw;
        position: relative;
        top:-80%;
         transform: translate(20%, -5%);
        font-size: 110%;
        
    }
    #navigation {
        width:100vw;
        
    }
    
    #banner {
        display: none;
    }
    
    #studentID {
    width: 100vw;
    font-family:"Chakra Petch",monospace,sans-serif;
    font-size: 110%;
    border-top: solid 2px #141414;
    border-bottom: solid 2px #141414;
    text-align: right;
    padding-right: 5%;
    background-color: #141414;
    opacity: 79%;
    }
    
    #content {
        width: 100vw;
        
    }
   
    }
 
/* icons */
#fruit {
    color: green;
    align-items: center;
}

 /* <div id='fruit'>
            <i class="fa-solid fa-apple-whole fa-2xl" ></i>
            <i class="fa-solid fa-seedling fa-10x"></i>
            

        </div> */

/* fonts */

.chakra-petch-light {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.chakra-petch-regular {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.chakra-petch-medium {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.chakra-petch-semibold {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.chakra-petch-bold {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.chakra-petch-light-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.chakra-petch-regular-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.chakra-petch-medium-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.chakra-petch-semibold-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.chakra-petch-bold-italic {
  font-family: "Chakra Petch", sans-serif;
  font-weight: 700;
  font-style: italic;
}