:root {
    --green-opacity:50%;
    --red-opacity:50%;
    --yellow-opacity:50%;
    --orange-opacity:50%;
    --blue-opacity:100%;
    --purple-opacity:50%;
    --turq-opacity:50%;
    --back-color:rgb(100, 134, 235);
}

body, html{
    margin:0;
    padding:0;
    justify-content: center;
    font-family: monospace;
    box-sizing: border-box;
    height:100%;
    scroll-behavior: smooth;
}

.page_name {
    position:fixed;
    background-color:var(--back-color);
    border-color:var(--back-color) ;
    top:0px;
    z-index: 200;
    border-width:0px 40px 0px 0px;
    border-style: solid;
    border-radius: 0px 20px 20px 0px;
    padding: 0px;
    margin:0px;
    box-sizing: border-box;
    font-size:20px;
    word-break: normal;
}


.other_items {
    position:fixed;
    background-color:slategrey;
    border-color:slategrey ;
    bottom:0vh;
    z-index: 200;
    border-width:0px 40px 0px 0px;
    border-style: solid;
    border-radius: 0px 20px 20px 0px;
    padding: 0px;
    margin:0px;
    box-sizing: border-box;
    max-width:30%;
    font-size:160%;
}
.other_items:hover {
    opacity:100%;
}

.page_name h2, .other_items h2 {
    margin:10px;
}

.container {
    display:block;
    flex-direction: column;
    height:100%;
    width:100%;
    box-sizing: border-box;
    align-items: center;
    flex-direction: row;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

.text-icon  {
    height:20px;
    width:20px;
    display: inline-flex;
}

.ext-link:hover {
border-bottom: 2px solid blue;

}


.menu {
    position:fixed;
    width:150px;
    justify-content: left;
    z-index: 100;
    height:100%;
    background-color:rgb(172, 191, 211);
}

.return_container {
    display: flex;
    height:25%;
    align-items: center;
}

.return {
    display: flex;
    text-orientation: upright;
    writing-mode:vertical-lr;
    text-align: center;
    justify-content: center;
    align-items: center;
    width:100%;
}

#nav {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    width:100%;
    height:50%;
    justify-content: center;
    padding:0;
    z-index: 100; 
}

.menu li {
    list-style-type: none;
    display:flex;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    margin:3px 0px 3px 0px;
    border-width:0px 40px 0px 0px;
    border-style: solid;
    width:90%;
    overflow: visible;
    z-index: 100;
    border-radius: 0px 20px 20px 0px;
    font-size: 20px;
    color:black;
    height: 50px;
    opacity:50%;
}

.menu li:hover {
    opacity:100% !important;
}

.chapter {
    position:relative;
    z-index: 1;
    display:flex;
    background-image: url('imgs/transbackground.webp');
    background-size: cover;
    height:100%;
    width:100%;
    justify-content: center;
    align-items: center;
    font-size: 110%;
    color:white;
    flex-direction: column;
    flex:2;
    z-index: 10;
    scroll-snap-align: start;
    padding:0px 0px 0px 150px;
    box-sizing: border-box;
    background-color: var(--back-color);
    transition:1.2s;
}

.green {
    background-color:rgb(96, 168, 128);
    border-color: rgb(96, 168, 128);
    opacity: var(--green-opacity) !important;
}

.blue {
    background-color:rgb(100, 134, 235);
    border-color: rgb(100, 134, 235);
    opacity: var(--blue-opacity) !important;
}

.yellow {
    background-color:rgb(214, 209, 132);
    border-color: rgb(214, 209, 132);
    opacity: var(--yellow-opacity) !important;
}

.orange {
    background-color: rgb(236, 187, 97);
    border-color: rgb(236, 187, 97);
    opacity: var(--orange-opacity) !important;
}



.purple {background-color: rgb(167, 126, 221);
    border-color: rgb(167, 126, 221);
    opacity: var(--purple-opacity) !important;

}

.turquoise {background-color: rgb(78, 202, 175);
    border-color: rgb(78, 202, 175);
    opacity: var(--turq-opacity) !important;

}

.writing{
    text-align: justify;
    width:100%;
    z-index: 3;
    background-color: white;
    color: black;
    border-radius: 30px;
}

.chapter ul {
    list-style-type:circle;
    text-align: justify;
    width:80%;
    padding-left: 5em;
}

.writing p {    
    margin:30px auto;
    width:70%;
    text-align: justify; 
    font-size:120%;
}

.writing h2 {
    width:70%;
    text-align: justify; 
    font-size:200%;
    margin:30px 0px 0px 120px;
}

.writing h3 {
    width:70%;
    text-align: justify; 
    font-size:150%;
    margin:0px auto;
}

.writing ul { margin:30px auto;
    width:70%;
    text-align: justify; 
    font-size:120%;
}

.asab-logo {
    position:relative;
    width:100%;
    height:60px;
    object-fit: contain;
    padding:10px;
    

    justify-self: center;
}



#example-videos {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items:flex-end;
    width: 100%;
    justify-content: space-around;
}

.video-box {
    display: flex;
    position: relative;
    flex-direction: row;
    width: 100%;
    max-height: 33%;
    font-size: 80%;
    flex-wrap: nowrap;
    margin:10px 0px 0px 0px;
    padding:0% 5%;
    align-self: center;
}

.video-box iframe{
    width:240px;
    height:180px;
    
}

.video-box ul {
    list-style: none;
    margin:0px 10px;
    padding: 0px 10px;
    width:80%;
    
}

.video-box h3, p {
    margin:0px 10px;
    padding: 0px 10px;
    width:80%;
    min-width:500px;
}


#hand-cog, #frame1 {
    background-color: steelblue;
}

.outer {
    fill: rgb(26, 221, 179);
}

#about-us {
    display: flex;
    flex-direction: row;
    color: black;
    width:100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.person-info {
    width:250px;
    max-width:250px;
    position: relative;
    justify-content: space-evenly;
    flex-wrap: wrap;
    box-sizing: border-box;

}

.person-info h3, .person-info p {
    margin:0px;
    padding:20px;
    background: white;
    width:250px;
    min-width:0;
  
}




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


    .menu {
        width:100vw;
        height:120px;
        flex-direction: row;
        display: flex;
 
    }

    #nav {
        display: flex;
        box-sizing: border-box;
        flex-direction: row;
        width:100%;
        justify-content: center;
        z-index:5;
        align-items: center;
        padding:0px;
        flex-wrap: wrap;
    }

 

    
    .menu li {        
        margin:0px 5px;
        border:10px;
        border-radius: 20px;
        width:20%;
        font-size:120%;
        padding:0px;
        min-width:80px;
}

.other_items {
    position: relative;
    bottom:unset;
    width:180px;
    padding:0;
    margin:0;
}

    .page_name {
        display:none;
    }

    .chapter {
        padding:30px 0px;
        font-size: 100%;
        max-width:100%;
        flex-wrap: wrap;
        height:unset;
        justify-content: center;
    }

    #about {padding:150px 0px 0px 0px;
        font-size: 100%;}
    .container {
        height:unset;
        max-width:100%;
        flex-wrap: wrap;

    }

    .writing h2, .writing h3, .writing p{
        width:90%;
        flex-wrap: wrap;
        word-break: normal;
        min-width:0;
        flex-shrink:1;
        margin:0px;
        padding:0px 20px;
  
    }


    .video-box {
        flex-wrap: wrap;
       max-width:80%;
        max-height:unset;
        justify-content: center;
    }
}

@media only screen and (max-height: 600px) {
    .container {
        height:unset
    }

    .chapter {
        padding:50px 0px 50px 150px;
        font-size: 100%; 
    }
}

@media only screen and (max-width: 600px) {
    body {font-size:80%;}
    .chapter {
        background-image: none;
        background-color: unset;
    }
    #using-videos .writing{
        background-color:rgb(96, 168, 128, 0.5);
    
    }
    
    #about .writing {
        background-color:rgb(100, 134, 235, 0.5);
    
    }
    
    #sign_up .writing{
        background-color:rgb(214, 209, 132, 0.5);
    
    }
    
    #asab .writing{
        background-color: rgb(236, 187, 97, 0.5);
    
    }
    
    #example-videos .writing{background-color: rgb(167, 126, 221, 0.5);
    
    
    }
    
    #about-us .writing {background-color: rgb(78, 202, 175, 0.5);
    
    }


}