/* ## FONTS DECLARED ## */
@font-face {
    font-family: Playful;
    src: url("../FONTS/amatic-sc.bold.ttf");
}
@font-face {
    font-family: BodyText;
    src: url("../FONTS/i-hate-comic-sans.regular.ttf");
}
@font-face {
    font-family: Marker;
    src: url("../FONTS/permanent-marker.regular.ttf");
}

/* ## UNIVERSAL ## */
*{
    letter-spacing:2px;
    line-height:2em;
    margin:0;
}

/* ## WHOLEDIV ## */
.wholeDiv {
    min-width:100vw;
    min-height:100vh;
    background-color: #fffbdb;
    
    display:flex;
    flex-direction:row;

    position:fixed;
    overflow-y:scroll;
}

/* ## PAGEDIV ## */
.pageDiv {
    height:inherit;
    width:calc(100vw - 200px);
    
    display:flex;
    flex-direction:column;

    align-self:center;
}

/* ## CONTENTDIV ## */
.contentDiv {
    position:absolute;
    left:230px;
    top:120px;
    max-height:90vh;
    min-height:90vh;
    width:min(max(100vw - 230px, 400px), 700px);
    word-wrap:break-word;
    display:flex;
    flex-direction:column;
    justify-content:start;
}

/* ## BUTTONS ## */
.pageButtons {
    width:calc(10em + 8px);
    height:5em;
    font-family: Marker;
    font-size:min(max(1.5vh, 8px), 12px);
    clip-path: polygon(100% 0, 100% 100%, 0% 100%, 13% 50%, 0% 0%);
    text-align:right;
    border-style:inset;
    border-width:0;
    border-right-width:1em;
    border-color:goldenrod;
}

.pageButtons:active {
    position:relative;
    transition:0s;
    top:1px;
}

.sideButtons {
    height:inherit;
    width:fit-content;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    align-items:end;
    width:inherit;
    height:77vh;
}
.pageButtons > h2 {
    bottom:15px;
    line-height: 5px;
}

/* ## BINDER ## */
.binder {
    position:sticky;
    left:0;
    top:0;
    height:100vh;
    min-width:200px;
    max-width:200px;
    background-image: url("../IMG/Binder.png");
    background-size:cover;
    
    display:flex;
    flex-direction:column;
}

/* ## HEADER ## */
.headDiv {
    position:absolute;
    top:15px;
    min-height:6em;
    max-height:6em;
}
#cube {
    position:absolute;
    top:50%;
    transform:translate(0%, -50%);
    align-self:center;
    background-color:burlywood;
    width:calc(100vw - 200px);
    height:69px;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
#cube > h1 {
    font-size: min(max(30px, 5vmin), 66px);
    font-family: Playful;
}

/* ## BUTTON COLORS ## */
#btn1 {
    background-color:#7bbd45;
    color:#2b4919;
}
#btn2 {
    background-color:#60c2d3;
    color:#235a68;
}
#btn3 {
    background-color:#e77171;
    color:#7e2e2e;
}
#btn4 {
    background-color:#fffc45;
    color:#b46703;
}

#btn1:hover {
    background-color:#4e9217;
    color:#213813;
    text-align:center;
}
#btn2:hover {
    background-color:#349aac;
    color:#1a444e;
    text-align:center;
}
#btn3:hover {
    background-color:#a54343;
    color:#571b1b;
    text-align:center;
}
#btn4:hover {
    background-color:#b3b02a;
    color:#5f3701;
    text-align:center;
}

@media only screen and (max-width:700px) {
    #cube {
        text-align:center;
        width:100vw;
    }
    .wholeDiv {
        flex-direction:column-reverse;
    }
    .pageRow {
        flex-direction:column-reverse;
    }
    .binder {
        min-height:min(calc(12vh + 60px), 150px);
        max-height:min(calc(12vh + 60px), 150px);
        min-width:100vw;
        background-image:url("../IMG/Binder_below.png");
        background-size:cover;
        z-index:1;
    }
    .pageDiv {
        width:100vw;
        min-height:calc(100vh - 230px);
        max-height:calc(100vh - 230px);
    }
    .contentDiv {
        min-height:calc(100vh - 275px);
        max-height:calc(100vh - 275px);
        text-align:center;
        width:100vw;
        overflow-y:scroll;
        overflow-x:hidden;
    }
    
    .sideButtons {
        min-height:12vh;
        max-height:12vh;
        width:70vw;
        flex-direction:row;
        align-items:start;
        overflow-y:visible;
    }
    .pageButtons:active {
        position:relative;
        transition:0s;
        left:1px;
        top:0;
    }
    
    .btnText {
        writing-mode:vertical-rl;
        text-orientation:sideways-right;
    }
}

@media only screen and (min-width:701px) and (max-width: 1260px) {
    
}

@media only screen and (min-width:1261px) {
    .headDiv {
        text-align:center;
    }
}