body{
    overflow-x:hidden;
    font-family:'Computer Modern Serif';
    background-color: #dffcff;
    background-image:  linear-gradient(135deg, #e6fffd 25%, transparent 25%), linear-gradient(225deg, #e6fffd 25%, transparent 25%), linear-gradient(45deg, #e6fffd 25%, transparent 25%), linear-gradient(315deg, #e6fffd 25%, #d7f1ef 25%);
    background-position:  5px 0, 5px 0, 0 0, 0 0;
    background-size: 5px 5px;
    background-repeat: repeat;
    /* IDEA: IT MIGHT BE AN IDEA TO ANIMATE THIS BACKGROUND SO THE PATTTERN MOVES A TINY BIT IN SOME DIRECTION CONSTANTLY. COULD LOOK VERY NICE. */
}

#grad{
    position:absolute;
    left:0%;
    top:0%;
    width:105%;
    height:104vh;
    
    background: linear-gradient(90deg, rgb(0, 2, 8) 0%, rgb(4, 7, 22) 40.057%, rgb(240, 243, 255) 50%, rgb(4, 7, 22) 59.943%, rgb(0, 2, 8) 100%);
    border-bottom:solid;
    border-width: 2.5px;
    border-color:rgb(161, 49, 92);

    z-index:1;
}

#trailerVid{
    position:relative;
    padding-top:33.75%;
    margin-top:calc(440px - 20vw);
    z-index:3;
    transition:opacity, 500ms;
    display: none;
    opacity: 0;
}
#trailerVidIFrame{
    border:solid;
    position:absolute;
    top:0;
    left:20%;
    width:60%;
    height:100%;
}
#introVid{
    position:relative;
    padding-top:33.75%;
    top:30px;
    z-index:3;
}
#introVidIFrame{
    border:solid;
    position:absolute;
    top:0;
    left:20%;
    width:60%;
    height:100%;
}
#tutorialTitle{
    position:relative;
    left: 20%;
    top:35px;
    font-style: italic; 
    font-size:30px; 
    margin-bottom:-5px;
}
#tutorialVid{
    position:relative;
    top:0px;
    padding-top:33.75%;
    top:65px;
    z-index:3;
}
#tutorialVidIFrame{
    border:solid;
    position:absolute;
    top:0;
    left:20%;
    width:60%;
    height:100%;
}

#quitLogo{
    position:fixed;
    bottom:7%;
    height:4.0vw;
    left:50%;
    z-index:10;
    opacity:0.5;
    transition:opacity, 100ms;
}
#quitLogo:hover{
    bottom:7.5%;
    opacity:1;
    cursor:pointer;
}

/* LOGO AND ANIMATION */
#tagline{
    position:absolute;
    left:9.4vw;
    top:calc(12.502vw + 50px);
    font-size: 4.6vw;
    display:inline-block;
    z-index: 2;
    transition:opacity,100ms;
}

@keyframes idle { 100% {} }
#logo{
    transition:opacity,100ms;
    position:relative; left:8.5vw; top:5vh; width:80vw; height:7.502vw; z-index: 2;
    /* clip-path:polygon(0% 0%, 0% 100%, 40% 100%, 40% 0%) */
}
#piLogo{
    position:absolute; bottom:23.85%; width:7.931%; 
    left:49.1%;
    /* animation-name: piAnim; */
    animation-name: idle;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-fill-mode: forwards;
}
#piLogoM{
    position:absolute; bottom:24.05%; width:2.652%;
    left:56.20%;
    opacity:0;
    /* animation-name: piMAnim; */
    animation-name: idle;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-fill-mode: forwards;
}
@keyframes piAnim {
    from {left: 49.1%;}
    to {left: 0%;}
}
@keyframes piMAnim {
    0% {left: 55.107%;}
    40% {opacity:0;}
    100% {left: 7.107%; opacity:1;}
}

#atematik{
    position:absolute; bottom:22.68%; width:44.384%;
    left:10.67%;
    opacity:0;
    clip-path: polygon(100% 0, 99% 0, 100% 17%, 95% 19%, 95% 44%, 98% 100%, 100% 100%);
    /* animation-name: atematikAnim; */
    animation-name: idle;
    animation-duration: 2s;
    animation-delay: 1s;
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    animation-fill-mode: forwards;
}
@keyframes atematikAnim {
    0% {opacity:0; clip-path: polygon(100% 0, 99% 0, 100% 17%, 95% 19%, 95% 44%, 98% 100%, 100% 100%);}
    10% {opacity:1;}
    100% {opacity: 1; clip-path: polygon(100% 0, -10% 0, -10% 14%, -10% 25%, -10% 40%, -10% 100%, 100% 100%);}
}


#underlineLogo{
    position:absolute; left:59.044%; bottom:11.996%; width:41.1%;
    clip-path:polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
    /* animation-name: underlineAnim; */
    animation-name: idle;
    animation-duration:3.4s;
    animation-delay:2080ms;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}
@keyframes underlineAnim {
    3% {
        clip-path:polygon(12% 12%, 7% 100%, 0% 100%, 0% 0%);
        animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
    }
    15% {
        clip-path:polygon(70% 0%, 700% 100%, 100% 100%, 100% 0%);
        animation-timing-function: linear;
        opacity:1;
    }
    19% {
        clip-path:polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%);
        opacity:0;
    }
    20% {
        clip-path:polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%);
        opacity:0;
        animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0);
    }
    23%{
        opacity:1;
    }
    49% {
        clip-path:polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        opacity:1;
    }
    100% {
        clip-path:polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    }
}

#TLogo{
    position:absolute; bottom:22.24%; width:5.923%;
    left:52.84%;
    opacity:0;
    /* animation-name: TAnim;  */
    animation-name: idle;
    animation-delay:2850ms;
    animation-duration:1100ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-fill-mode:forwards;
}
@keyframes TAnim{
    100% {left: 57.84%; opacity:1;}
}

#globe{
    position:absolute; bottom:21.45%; width:4.511%;
    left:58.03%;
    opacity:0;
    /* animation-name: globeAnim;  */
    animation-name: idle;
    animation-delay:2980ms;
    animation-duration:1000ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-fill-mode:forwards;
}
@keyframes globeAnim{
    100% {left: 63.83%; opacity:1;}
}

#t0Logo{
    position:absolute; bottom:21.08%; width:5.023%;
    left:56.74%; 
    opacity:0;
    /* animation-name: t0Anim;  */
    animation-name: idle;
    animation-delay:3105ms;
    animation-duration:900ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-fill-mode:forwards;
}
@keyframes t0Anim{
    100% {left: 68.743%; opacity:1;}
}
#t1Logo{
    position:absolute; bottom:21.40%; width:3.793%;
    left:61.025%; 
    opacity:0;
    /* animation-name: t1Anim;  */
    animation-name: idle;
    animation-delay:3193ms;
    animation-duration:800ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-fill-mode:forwards;
}
@keyframes t1Anim{
    100% {left: 74.025%;  opacity:1;}
}
#t2Logo{
    position:absolute; bottom:0.0%; width:3.244%;
    left:64.134%;
    opacity:0;
    /* animation-name: t2Anim;  */
    animation-name: idle;
    animation-delay:3262ms;
    animation-duration:750ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-fill-mode:forwards;
}
@keyframes t2Anim{
    100% {left: 78.134%; opacity:1;}
}
#t3Logo{
    position:absolute; bottom:21.08%; width:5.023%;
    left:67.182%; 
    opacity:0;
    /* animation-name: t3Anim;  */
    animation-name: idle;
    animation-delay:3321ms;
    animation-duration:700ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-fill-mode:forwards;
}
@keyframes t3Anim{
    100% {left: 82.182%;  opacity:1;}
}
#t4Logo{
    position:absolute; bottom:21.35%; width:2.741%;
    left:71.464%; 
    opacity:0;
    /* animation-name: t4Anim;  */
    animation-name: idle;
    animation-delay:3373ms;
    animation-duration:675ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-fill-mode:forwards;
}
@keyframes t4Anim{
    100% {left: 87.464%;  opacity:1;}
}
#t5Logo{
    position:absolute; bottom:21.12%; width:4.287%;
    left:71.948%;
    opacity:0;
    /* animation-name: t5Anim;  */
    animation-name: idle;
    animation-delay:3419ms;
    animation-duration:662ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-fill-mode:forwards;
}
@keyframes t5Anim{
    100% {left: 90.948%; opacity:1;}
}
#t6Logo{
    position:absolute; bottom:21.29%; width:3.733%;
    left:74.982%;
    opacity:0;
    /* animation-name: t6Anim;  */
    animation-name: idle;
    animation-delay:3461ms;
    animation-duration:650ms; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); animation-fill-mode:forwards;
}
@keyframes t6Anim{
    100% {left: 95.982%; opacity:1;}
}




#toolbar{
    display:none;

    position: absolute;
    top: calc(100vh + 2.5px);
    
    left:0%;
    width:200%;
    height:60px;

    background-color: #7ae6dd;
    opacity: 1;
    background-image:  repeating-radial-gradient( circle at 25% -40px, transparent 0, #7ae6dd 40px ), repeating-linear-gradient( #69d0c855, #6fd8cf );
    
    /* border-bottom: solid 2.5px; */

    font-size:0;

    z-index: 10;
}
#spaceLeft{
    padding-left:calc(24% - 450px);

    font-size:23px;
    position:relative; top:6px;
    padding-top:10px;
    padding-bottom:15px;
    background: linear-gradient(0deg, rgba(122,230,221,0) 0%, rgba(122,230,221,0.3) 18%, rgba(122,230,221,0.5) 50%, rgba(122,230,221,0.3) 87%, rgba(122,230,221,0) 100%);

    border-bottom: solid 2.5px;
    border-right: solid 1px;
}
#spaceRight{
    padding-right:calc(25% - 450px);

    font-size:23px;
    position:relative; top:6px;
    padding-top:10px;
    padding-bottom:15px;
    background: linear-gradient(0deg, rgba(122,230,221,0) 0%, rgba(122,230,221,0.3) 18%, rgba(122,230,221,0.5) 50%, rgba(122,230,221,0.3) 87%, rgba(122,230,221,0) 100%);

    border-bottom: solid 2.5px;
    border-left: solid 1px;
}
.toolbarItem{
    font-size:23px;
    position:relative; top:12px;
    padding-top:10px;
    padding-bottom:15px;
    padding-left:20px;
    padding-right:20px;
    background: linear-gradient(0deg, rgba(122,230,221,0) 0%, rgba(122,230,221,0.6) 18%, rgba(122,230,221,0.8) 50%, rgba(122,230,221,0.6) 87%, rgba(122,230,221,0) 100%);
    transition:opacity, 150ms;
    cursor: pointer;

    border-bottom: solid 2.5px;
    border-right: solid 1px;
    border-left: solid 1px;
    /* border-left:solid 1px;
    border-right: solid 1px; */
}
.toolbarItem:hover{
    top:18px;
    padding-top:16px;
    background-color: rgb(122,230,221);
}
.toolbarItem:hover #searchBar{
    height:1.8em;
    bottom:6px;
}
.toolbarItem:hover #searchText{
    bottom:6px;
}
.toolbarItem:hover #searchRemove{
    height:0.6em;
    top:19px;
    left:calc(287px + 4vw);
}
#searchBarItem{
    font-size:23px;
    position:relative; top:12px;
    padding-top:10px;
    padding-bottom:15px;
    padding-left:20px;
    padding-right:20px;
    background: linear-gradient(0deg, rgba(122,230,221,0) 0%, rgba(122,230,221,0.6) 18%, rgba(122,230,221,0.8) 50%, rgba(122,230,221,0.6) 87%, rgba(122,230,221,0) 100%);

    border-bottom: solid 2.5px;
    border-right: solid 1px;
    border-left: solid 1px;
}
#searchBar{
    position:relative;
    left: 5px;
    height:1.5em;
    width:calc(225px + 2%);
    border-radius:5px;
    transition:opacity, 100ms;
}
#searchText{
    margin-left:0px;
    position:relative;
}
#searchRemove{
    position:absolute;
    left:calc(289px + 4vw);
    top:21px;
    height: 0.5em;
    cursor: pointer;
    transition:opacity, 100ms;
}

#noResult{
    font-size:20px;
    width:500px;
    margin-left:20px;
    margin-top:20px;
}
#searchResults{
    display:none;

    position:absolute;

    top:60px;
    left:max(50% - 450px, 0px);
    
    width:900px;

    background-color: #e6fffd;
    background: repeating-linear-gradient( 45deg, #dffcf9, #dffcf9 10px, #e6fffd 10px, #e6fffd 65px);

    border-left: solid;
    border-right: solid;
    border-width: 2px;
    border-color:rgb(202, 224, 223);

    padding-bottom:200px;

    z-index:4;

    transition:opacity,500ms;
}

.searchResult{
    margin-left:15px;
    margin-top:50px;
    width:890px;
    opacity: 0;
    transition: opacity, 100ms;
}
.searchResult:hover{
    margin-left:20px;
}
.searchResultTitle{
    display:inline-block;
    font-size: 25px;
    font-weight: bold;
    max-width:750px;
}
.searchResultTitle:hover{
    cursor:pointer;
}
.searchResultChapterAndPage{
    font-size:20px;
    color:darkgrey;
}
.searchResultDescription{
    font-size:20px;
    width:700px;
    margin-top:10px;
    word-wrap:break-word;
    text-align:justify;
}
.searchResultExpand{
    opacity:0.7;
    transition:opacity, 100ms;
}
.searchResultExpand:hover{
    cursor:pointer;
    opacity: 1;
}

#korrekturGuide{
    display:none;

    position:absolute;

    top:60px;
    left:max(50% - 450px, 0px);
    
    width:900px;

    background-color: #e6fffd;
    background: repeating-linear-gradient( 45deg, #dffcf9, #dffcf9 10px, #e6fffd 10px, #e6fffd 65px);

    border-left: solid;
    border-right: solid;
    border-width: 2px;
    border-color:rgb(202, 224, 223);

    padding-bottom:200px;
    padding-top:15px;
    padding-left:30px;
    padding-right:20px; 

    font-size: 20px;

    z-index:4;

    transition:opacity,500ms;
}
#korrekturTilbage{
    font-weight: bold;
    transition:opacity, 50ms;
}
#korrekturTilbage:hover{
    margin-left:5px;
    cursor:pointer;
}

#contentBackground{
    display:none;

    position:absolute;

    top:100vh;
    left:max(50% - 450px, 0px);
    
    width:900px;

    background-color: #e6fffd;
    background: repeating-linear-gradient( 45deg, #dffcf9, #dffcf9 10px, #e6fffd 10px, #e6fffd 65px);

    border-left: solid;
    border-right: solid;
    border-width: 2px;
    border-color:rgb(202, 224, 223);

    z-index:0;
}

h1{
    /* font-style:italic; */
    letter-spacing:1px;
    font-weight: normal;

    font-size:60px;
    margin-bottom:60px;
}
#introH1{
    width:25%;
    padding-left: 500px;
    margin-left:-430px;
    opacity:0;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.13) 45%, rgba(0,0,0,0.13) 83%, rgba(0,0,0,0) 100%);
    transition:opacity, 700ms;
    transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
}
#chaptersH1{
    width:84%;
    padding-left:80px;
    margin-left:465px;
    opacity:0;
    background: linear-gradient(-90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.13) 45%, rgba(0,0,0,0.13) 83%, rgba(0,0,0,0) 100%);
    margin-bottom:100px;
    transition:opacity, 550ms;
    transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
}
#tocH1{
    margin-top:-50px;
    width:66%;
    padding-left: 330px;
    margin-left:-330px;
    opacity:0;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.13) 45%, rgba(0,0,0,0.13) 83%, rgba(0,0,0,0) 100%);
    transition:opacity, 550ms;
    transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
}


h4{
    font-style:normal;
    font-weight:bold;
    font-size:1em;
    margin-bottom:-9px;
}

#browserAnbefaling{
    position:absolute;
    top:70px;
    left: 20px;
    font-size:21px;
}

#startOff{
    position:absolute;
    top:82px;
    left:700px;
}
#startOffTitle{
    font-size:17.5px;
    margin-left:-18px;
    margin-bottom:7px;
    pointer-events: none;
}
#startOffBorder{
    position:relative;
    width:143px;
    height:87px;
    border:solid 2px;
    z-index:3;
    pointer-events: none;
}
#startOffImgCase{
    position:relative;
    top:-89px;
    width:145px;
    height:89px;
    background-color: black;
    cursor:pointer;
    clip-path: inset(0px 0px);
}
#startOffImg{
    position:absolute;
    width:170%;
    left:-40px;
    top:-50px;
    opacity:0.95;
    -webkit-filter:blur(0.5px);
    transition:opacity, 100ms;
}
#startOffImgCase:hover #startOffImg{
    -webkit-filter:blur(0px);
    width:140%;
    left:-20px;
    top:-40px;
    opacity:1;
}

#intro{
    position:relative;
    width:700px;
    margin-left:100px;

    margin-top:10px;

    border-top:solid;
    border-right:solid;
    border-width:1px;
    border-color:rgb(79, 79, 79);

    background: linear-gradient(90deg, rgba(230, 255, 253,1) 0%, rgba(203,224,221,1) 100%);

}
#introContent{
    height:500px;
    overflow-y:auto;

    word-wrap: break-word;
    text-align:justify;
    font-size: 21px;
    line-height: 30px;

    padding-right:25px;
    padding-top:15px;
}
#introMask{
    position:absolute;
    bottom:0px;

    width:100%;
    height:100px;
    
    background: linear-gradient(0deg, rgba(230, 255, 253,1) 0%, rgba(230, 255, 253,0) 100%);
    transition:opacity, 500ms;
}
#intro:hover #introMask{
    opacity:0;
}

#TLDR{
    margin-left:50px;
    margin-top:120px;
    width:800px;
    word-wrap: break-word;
    text-align:justify;
    font-size: 21px;
    line-height: 30px;
}
#TLDRTitle{
    font-style: italic; 
    font-size:30px; 
    margin-bottom:-5px;
}


/* CHAPTERS */

#chap1Body{ width:900px; height:532.2px; position:relative; top:-247px; z-index:3;
            clip-path: polygon(0px 527px, 900px 457px, 900px 0%, 0% 239px); }
#chap2Body{ width:900px; height:989px; position:relative; top:-22.5px; z-index:3;
            clip-path: polygon(0 0, 100% 16.8px, 100% 989px, 0 965px); }            
#chap25Body{ width:900px; height:609.5px; position:relative; top:-24.5px; z-index:3;
            clip-path: polygon(0 18.5px, 100% 0, 100% 100%, 0 537.4px); }
#chap3Body{ width:900px; height:367px; position:relative; top:-30px; z-index:3;
            clip-path: polygon(0 8.2px, 100% 0, 100% 250px, 0 337px); }
#chap4Body{ width:900px; height:1100px; position:relative; top:-24px; z-index:3;
            clip-path: polygon(0 20.08px, 100% 0, 100% 1061.2px, 0 100%); }
#chap5Body{ width:900px; height:296.5px; position:relative; top:-26px; z-index:3;
            clip-path: polygon(0 18.23px, 100% 0, 100% 100%, 0 100%); }

.chapBodyImg{
    position:relative;
    width:110%;
    left:-5%;
    top:-5%;
    transition:opacity, 150ms;
    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.chap:hover .chapBodyImg{
    width:113%;
    left:-6.5%;  
    top:-6.5%;
}
.chap:hover .chapSection{
    padding-top:11px;
    padding-bottom:11px;
    margin-bottom:38px;
}
.chap:hover .chapTitle{
    letter-spacing: normal;
}

#chap1Can{
    clip-path: polygon(0% 180px, 100% 0, 100% 59px, 0 100%);
}
.chap{position:relative; }
#chap1{
    height:590px; top: 0px;
    clip-path: polygon(0% 180px, 100% 0, 100% 100%, 0 100%);
}
#chap2 {height:1137px; top: -74.5px;}
#chap25{height:692px; top: -91.5px;}
#chap3 {height:458px; top: -164px;}
#chap4 {height:1244.5px; top: -231.5px;}
#chap5 {height:505px; top: -246px; }

#chapterBorders{
    z-index:6;
    pointer-events: none;
    position:absolute;
    top:2371px;
}

.chapTitle{
    /* font-weight:bold; */
    font-size:37px;
    letter-spacing:-0.8px;
    position:absolute;
    transition:opacity, 100ms;
    transition-timing-function: ease-out;
    /* pointer-events: none; */
}
.chapTitle:hover{
    padding-left:10px;
    cursor:pointer;
}
.chapSections{
    position:absolute;
    left:154px;
}
.chapSection{
    cursor:pointer;
    font-size:29px;
    letter-spacing:2.29px;
    /* font-weight: bold; */
    width:591px;
    padding-left:11px; padding-right:11px;
    padding-top:8px; padding-bottom: 8px;
    border:solid 2px;
    margin-bottom:45px;
    transition:opacity, 100ms;
    transition-timing-function: ease-out;
}
.chapSection:hover{
    margin-left:-10px;
}

#chap1 .chapTitle{
    top:260px;
    left:65px;
}
#chap1 .chapBodyImg{
    cursor:pointer;
}
#chap2 .chapTitle{
    top:60px;
    left:480px;
}
#chap2 .chapSections{
    top:225px;
}
#chap25 .chapTitle{
    top:70px;
    left:65px;
}
#chap25 .chapSections{
    top:175px;
}
#chap3 .chapTitle{
    top:45px;
    left:520px;
}
#chap3 .chapBodyImg{
    cursor:pointer;
}
#chap4 .chapTitle{
    top:60px;
    left:55px;
}
#chap4 .chapSections{
    top:235px;
}
#chap5 .chapTitle{
    top:50px;
    left:335px;
}
#chap5 .chapBodyImg{
    cursor:pointer;
}

.chapterExpand{
    pointer-events: all;
    display:inline;
    height:0.6em;
    opacity:0.5;
}
.chapterExpand:hover{
    opacity:1;
}
.sectionExpand{
    opacity:0.5;
    display:inline-block;
    height:0.7em;
}
.sectionExpand:hover{
    opacity:1;
}


/* TABLE OF CONTENTS */
#TOCBackground{
    width:700px;
    margin-left:100px;
}
#collapseAllIcons{
    display:flex;
}
.collapseAll{
    width:22px;
    margin-left:7px;
    border-top:solid 1px;
}
.collapseAllImg:hover{
    cursor:pointer;
}

#collapseAllImgH0{
    padding-top:5px;
    height: 20px;
    margin-left:1px;
    opacity:1;
    transition:opacity, 100ms;
}
#collapseAllImgH1{
    padding-top:5px;
    height: 17px;
    margin-left:3px;
    opacity:1;
    transition:opacity, 100ms;
}
#collapseAllImgH2{
    padding-top:1px;
    height: 15px;
    margin-left:4px;
    opacity:0.5;
    transition:opacity, 100ms;
}
#collapseAllImgH3{
    padding-top:3px;
    position:relative;
    top:-2px;
    height: 13px;
    margin-left:5px;
    opacity:0.5;
    transition:opacity, 100ms;
}
#collapseAllImgH3:hover{opacity:1;}


#TOC{
    width:100%;
    margin-top:-25px;
}
.TocCont{
    position:relative;
    top:0px;
    margin-top:10px;
    transition:opacity, 200ms;
}

.TocH{
    position:relative;
    left:0px;
    transition:opacity, 100ms;
}
.TocH:hover{
    cursor:pointer;
    left:5px;
}
.TocH0{
    font-weight: bold;
    letter-spacing: 0.1px;
    margin-top:47px;
    font-size: 25px;
}
.TocH1{
    font-weight: bold;
    margin-top:38px;
    margin-left:10px;
    font-size: 20px;
}
.TocH2{
    margin-top:22px;
    margin-left:10px;
    font-size: 20px;
}
.TocH3{
    margin-top:15px;
    margin-left:25px;
    font-size: 19px;
}
.TocH4{
    margin-top:10px;
    margin-left:40px;
    font-size: 17px;
}
.expandImg{
    position:relative;
    left:0.3em;
    top:0.1em;
    display:inline;
    height:0.8em;
    opacity:0.2;
}
.expandImg:hover{
    opacity:1;
}
.collapseToc{
    position:relative;
    left:0.6em;
    display:inline;
    height:0.65em;
    opacity:0.5;
}
.collapseToc:hover{
    opacity:1;
}

#TocResumeCover{
    display:none;
    align-items: center;
    justify-content: center;

    position:fixed;
    left:0px;
    top:0px;

    width:100vw;
    height:100vh;

    background-color: rgba(0,0,0,0);
    z-index: 5;
    transition:opacity, 100ms;
}
#TocResume{
    display:none;
    position:absolute;
    z-index: 6;
    width:650px;
    max-height:600px;
    margin-top:60px;
    margin-left:-15px;

    background-color: rgb(160,239,160);
    border:solid 1px;

    display:flex;
    flex-flow:column;
}
#resumeParents{
    margin-left:10px;
    margin-top:10px;
}
.resumeParentItem{
    opacity: 0.5;
    transition:opacity, 100ms;
}
.resumeParentItem:hover{
    cursor:pointer;
    opacity:1;
}
#resumeTitle{
    font-size:30px;
    margin-left:10px;
    width:calc(100% - 25px);
    margin-top:15px;
    transition:opacity, 100ms;
}
#resumeTitle:hover{
    margin-left:15px;
    cursor:pointer;
}
#resumeSectionIL{
    margin-left:10px;
    margin-top:0px;
}
#resumeContent{
    margin-top:8px;
    padding-left:10px;
    padding-bottom:15px;
    min-height: 100px;
    background: rgb(180,243,180);
    border-top:solid 1px;
    border-color:rgb(150, 224, 150);
    overflow:auto;
    flex:2;
    font-size:18.5px;
}
#resumeText{
    margin-top:10px;
    text-align:justify;
    word-wrap: break-word;
    width:calc(100% - 20px);
}
#resumeChildrenTitle{
    display:none;
    margin-top:25px;
    width:calc(100% - 10px);
    
    border-top:solid 1px;
    padding-top:5px;

    font-weight: bold;
}
#resumeChildren{
    list-style:none;
    padding-left:5px;
    line-height: 2em;
}
#resumeChildren li{
    transition:opacity, 100ms;
}
#resumeChildren li:hover{
    margin-left:-2px;
    cursor:pointer;
}
#resumeCurTitle{
    display:none;
    margin-top:25px;
    width:calc(100% - 10px);
    
    border-top:solid 1px;
    padding-top:5px;

    font-weight: bold;
}
#resumeCur{
    list-style:square;
    line-height: 2em;
}
#resumeImportantResultsTitle{
    font-weight: bold;
}
#resumeImportantResultsIntro{
    opacity:0.65;
}
.resumeImportantResultsBlock{
    margin-left:10px;
    margin-bottom:30px;
    margin-top:20px;
    border-left: solid 1.5px;
    padding-left:5px;
}
.resumeImportantResultsLink{
    text-decoration: underline;
    margin-top:5px;
    margin-left:0px;
    color:black;
    transition:opacity, 150ms;
}
.resumeImportantResultsLink:hover{
    cursor:pointer;
    margin-left:5px;
    color:blue;
}


/* CONTACTS */
#kontakt{
    position:relative;
    z-index:1;
    left:min(-50vw + 450px, 0px);
    top:100px;
    width:200vw;
    height:150px;
    background-color: rgba(0,0,0,0.92);
    color: white;
    padding:30px;
}
#kontaktTitle{
    z-index:2;
    font-size:23px;
    margin-bottom:15px;
}







/* #typewriterBar{
    height:50px;
    width:0.5em;
    background-color: black;
    display:inline-block;
} */


/* #atematik{
    clip-path: polygon(30% 0%, 30% 100%, 100% 100%, 100% 0%);
    transition: clip-path 1s;
}
#atematik:hover{
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
} */




/* SCROLLBAR */

::-webkit-scrollbar {
    width: 15px;
    }
    
/* Track */
::-webkit-scrollbar-track {
background: rgba(203,224,221,0); 
}

/* Handle */
::-webkit-scrollbar-thumb {
background: rgb(79, 79, 79); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: rgb(43, 43, 43); 
}

/* MOBILE SUPPORT */
@media only screen and (max-width: 600px) {
    #grad{
        height:110vh;
    }
    #quitLogo{
        left:48%;
    }
    #tagline{
        left:10vw;
    } 
    #toolbar{
        display:none;
    }
    #startOffTitle{
        font-size:23px;
        margin-left:-50px;
        margin-bottom: 20px;
    }
    #startOff{
        left:670px;
        top:25px;
    }
    #browserAnbefaling{
        position:absolute;
        top:20px;
        left: 20px;
        font-size:25px;
    }    
    #introContent{
        font-size:32px;
        line-height: 45px;
    }
    #TLDR{
        font-size:32px;
        line-height:45px;
    }
    #TLDRTitle{
        font-size:40px; 
    }

    #chapterBorders{
        top:2647px;
    }

    .TocH0{
        font-size:40px;   
    }
    .TocH1{
        font-size:33.5px;
    }
    .TocH2{
        font-size:28.5px;
    }
    .TocH3{
        font-size:28px;
    }
    .TocH4{
        font-size:27.5px;
    }
    .collapseAll{
        width:40px;
    }
    #collapseAllImgH0{
        height: 30px;
        margin-left:5px;
    }
    #collapseAllImgH1{
        height: 27px;
        margin-left:7px;
    }
    #collapseAllImgH2{
        height: 25px;
        margin-left:7px;
    }
    #collapseAllImgH3{
        margin-left:10.5px;
        height: 23px;
        top:-1px;
    }
    #kontakt{
        font-size:30px;
        width:100%;
        height:200px;
    }
    #TocResumeCover{
        width:100%;
        height:100%;
        display:none;
        transition:opacity, 5000ms;
    }
    #TocResume{
        width:80%;
        max-height:80%;
        margin-left:-10%;
        font-size:28px;
        padding-left:10px;
        transition:opacity, 5000ms;
    }
    #resumeTitle{
        font-weight: bold;
        font-size:40px;
    }
    #resumeText{
        font-size:28px;
        padding-right:10px;
    }
    #resumeContent{
        font-size:28px;
    }
    .resumeImportantResultsBlock{
        padding-left:15px;
    }
    #contentBackground{
        border:0px;
    }
    .searchResultTitle{
        font-size:40px;
    }
    .searchResultChapterAndPage{
        font-size:25px;
    }
    .searchResultDescription{
        font-size:30px;
    }
    body{
        background-color: #e6fffd;
        background: repeating-linear-gradient( 45deg, #dffcf9, #dffcf9 10px, #e6fffd 10px, #e6fffd 65px);    
        background-size: 110px 110px;
    }
    #trailerVid{
        margin-top:calc(240px - 20vw);

    }
    #trailerVidIFrame{
        position:absolute;
        top:0;
        left:6.5%;
        width:90%;
        height:150%;
        border:solid;
    }
    
}
#loadOverlay{display: none;}