/* ============================ BROWSER RESET ============================ */

html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

    box-sizing: border-box;

    background-color: transparent;
}

/* Above code is modified from this post by user shenole latimer: https://stackoverflow.com/questions/44186354/div-not-extending-to-top-of-body */


/* ======================================== UNIVERSAL ======================================= */

ul, ol{
    margin: 10px auto 10px auto;
    list-style-position: inside;
}
p{
    margin-bottom: 10px;
}
i{
    font-style: italic;
}
body{
    background-image: url(bliss.png);
    background-size: cover;
    height: 100vh;
    width: 100vw;

    overflow-y: hidden;
    overflow-x: hidden;
}
ul{
    padding-left: 40px;
}
a:link{
    color: #ec722b;
    text-decoration: none;
}
a:visited{
    color: #b6406d;
    text-decoration: none;
}
a:hover{
    color: #fffc40;
    text-decoration: underline;
}
h1{
    display: block;
    font-size: 2em;
    margin: 0 auto 10px auto;

    font-weight: bold;
}
h2{
    display: block;
    font-size: 1.25em;
    margin: 0 auto 10px auto;

    font-style: italic;
}
h3{
    display: block;
    font-size: 1.05em;
    margin: 0 auto 5px auto;

    text-decoration: underline;
}

h1, h2, h3{
    color: #0704a0;
}

/* ===================================== CUSTOM  STYLES ===================================== */

#box{
    width: 80vw;
    height: 80vh;

    margin: 10vh auto auto auto;

    color: #071ef0;

    padding: 0;

    overflow-x: hidden;
    overflow-y: auto;
}

.frutigerGradient{
    background-color: #29a8f1;
    background-image: linear-gradient(to bottom, #76cbfc, #29a8f1, #0b5dc7);
    
    background-repeat: no-repeat;
    background-attachment: fixed;

    padding: 25px;
}

.innercontents{
    display: block;
    height: fit-content;
    border-radius: 5px;

    background-color: rgba(169, 244, 255, 0.60);

    padding: 15px 10px 10px 10px;
    margin: 15px auto auto auto;
}

.result{
    color: #FFF;
    margin: 1% 0 1% 0;
}

.chapters{
    border: 1px solid #7a94d1;
    border-radius: 4px;
    margin: 10px auto 4px auto;
    padding: 4px 8px 4px 8px;

    width: 50%;

    background-color: #d4d4d4;
    background-image: linear-gradient( #dbdbdb,#a6b7df);
    color: #0401B4;

    cursor: pointer;
}

.chapters:hover{
    border: 1px solid #747474;
    background-color: #d4d4d4;
    background-image: linear-gradient( #ffffff,#adbbdb);
    color: #002fff;
}
.chapters:active{
    border: 1px solid #4f6db3;
    background-color: #d4d4d4;
    background-image: linear-gradient( #adbbdb,#7a94d1);
    color: #020061;
}
.chapters:disabled{
    border: 1px solid #777777;
    background-color: #b6b6b6;
    background-image: linear-gradient( #bdc1c9,#7c818b);
    color: #610000;

    cursor: not-allowed;
}

.chapters > h1, h2, h3{
    color:inherit;
}

#experiments, #quizzes, #ch2, #ch3, #ch4, #ch5, #ch6, #ch7, #ch8, #ch9, #ch10{
    display: none;
}

.handson > li:nth-of-type(6n){
    margin-top: 15px;
}
.innerMulti{
    margin-top: 0;
}


/* Stolen from my portfolio site /*
/* ========================== WINDOW FORMATTING ========================== */
.headerBox{
    background-image: linear-gradient(
        to top,
        #026AFE,
        #0055E5 25% 80%,
        #499CFF
    );

    border-bottom: ridge 3px #0055E5;
    border-left: groove 3px #0536d6;
    border-right: ridge 3px #002AB7;
    border-top: solid 2px #026AFE;
    border-radius: 5px 5px 0 0;

    display: flex;

    height: 30px;
    padding: 4px 2px 4px 2px;
    text-indent: 2%;

    overflow: visible;

    user-select: none;
}
.headerText{
    color: white;
    font-weight: bold;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    margin: 3px auto auto 0;
    text-shadow: 1px 1px #0A1883;

    text-align: left;
    vertical-align: middle;
    font-size: 15px;

    width: 100%;
}
.fake-menu{
    display: flex;
    flex-direction: row;

    float: right;
    margin-right: 2px;
}

.content{
    border: ridge 4px #0048F1;
    border-left: groove 4px #0048F1;
    border-top: none;
    
    background-color: #ECE9D8;

    margin-top: 0;
    overflow-y: auto;
    overflow-x: hidden;

    height: calc(100% - 30px);
}

.icon-container{
    height: 20px;
    width: 20px;
    border-radius: 15%;
    margin: 0 0.5% 0 0.5%;

    border: 1px solid white;

    overflow: hidden;
}
.blueIcon{
    height: 100%;
    width: 100%;
    margin: 0;
    
    background-image: linear-gradient(120deg, #94B2F9, #2467F5, #0B68F7);
    border: 1px solid #0048F1;
}
.redIcon{
    height: 100%;
    width: 100%;
    margin: 0;
    
    background-image: linear-gradient(120deg, #F1AB99, #E64E1C, #B42701);
    border: 1px solid #B42701;
}
.symb{
    height: 65%;
    width: 65%;
    margin: 17.5%;
}

.blueIcon:hover{
    background-image: linear-gradient(120deg, #99BAFF, #4F90FF, #3EB1FF, #1790FC);
    border: 1px solid #0048F1;
}
.redIcon:hover{
    background-image: linear-gradient(120deg, #FFB3AA, #FF6F5E, #CA3F2F);
    border: 1px solid #CA3F2F;
}
.redIcon:active{
    background-image: linear-gradient(120deg, #69220F, #BE3C1C, #C5431F, #C3411E);
    border: 1px solid;
    border-color: #5D1E0D #BF3D1C #BF3D1C #5D1E0D;
    opacity: 100%;
}
.blueIcon:active{
    background-image: linear-gradient(120deg, #003070, #0048AD, #005EC3, #0057BC);
    border: 1px solid;
    border-color: #002453 #0050B5 #0050B5 #002453;
    opacity: 100%;
}
.redIcon:active .symb{
    opacity: .5;
}
.blueIcon:active .symb{
    opacity: .5;
}