body {
    position:   relative;
    width:      100vw;
    width:      calc(var(--vw, 1vw) * 100);
    height:     100vh;
    height:     calc(var(--vh, 1vh) * 100);
    margin:     0;

    display:            flex;
    justify-content:    center;
    align-items:        center;

    overflow:   hidden;

    font-family: 'Roboto', 'sans-serif';
}

a {
    color:                  black;
    text-decoration:        none;
    /* text-decoration-style:  dotted; */
}

code {
    word-break: break-all;
}

.underline, a:hover {
    text-decoration:        underline;
    text-decoration-style:  dotted;
    text-decoration-color:  rgb(255, 51, 51);
}

a:active {
    text-decoration-style:  solid;
}

button{
    display:    inline-block;

    padding:    0.3em 1.2em;
    margin:     0 0.1em 0.1em 0;

    border:             0.16em solid rgb(255, 51, 51);
    color:              #000000;
    background-color:   #FFFFFF;

    border-radius:      2em;
    box-sizing:         border-box;

    font-size:          0.8em;
    text-align:         center;
    transition:         all 0.2s;
    cursor:             pointer;
}

button:hover {
    background-color:   rgb(255, 51, 51);
    color:              #FFFFFF;
}

input:focus {
    outline:        none !important;
    border:         1px solid rgb(255, 51, 51);
}

ul {
    list-style-type:    none;
}

#root {
    width:  100%;
    height: 100%;

    display:                grid;
    grid-template-rows:     100%;
    grid-template-columns:  100%;

    align-items:            center;

    overflow:   hidden;
}

#guidetable {
    display: none;
}

#contentfadecontainer {
    width:  90%;
    height: 100%;

    padding:    0 5%;
}

#contentcontainer {
    width:  100%;
    height: 100%;

    overflow:           auto;
    scrollbar-width:    none;
    -ms-overflow-style: none;
    scroll-behavior:    smooth;
}

#contentcontainer::-webkit-scrollbar {
    display:    none;
}

#content {
    padding-bottom: calc(var(--vh, 1vh) * 10);   
}

#namecontainer {
    height: calc(var(--vh, 1vh) * 20);

    margin-top:     20px;

    display:            flex;
    justify-content:    left;
    align-items:        center;
    
}

#name {
    font-size:      4em;

    opacity:        1;
}

.titlecard{
    font-size:      3em;
    font-style:     italic;
    font-weight:    bold;
}

.fadegradient {
    content:    none;

    width:  100%;
    height: 40px;

    position:   relative;
}

#fgtop {
    margin-top: calc(var(--vh, 1vh) * -100);

    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

#fgbottom {
    margin-top: calc(var(--vh, 1vh) * 100 - 80px);

    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

@keyframes fade {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.primaryfade, .secondaryfade {
    -webkit-animation:  fade ease 2s;
    -moz-animation:     fade ease 2s;
    -o-animation:       fade ease 2s;
    animation:          fade ease 2s;
}

@media only screen and (min-width: 600px) {
    #root {
        grid-template-columns: 25% 75%;
    }

    #guidetable {
        width:  90%;
    
        display:    block;
        text-align: right;

        margin:     0;
        padding:    5%;

        border-right:   1px solid rgb(255, 51, 51);
    }
    
    .guideanchor {
        font-size:  1.25em;
        padding:    5px 0;
    }

    #contentfadecontainer {
        width:  85%;
        padding-right:  10%;
    }

    #content {
        padding-top:    calc(var(--vh, 1vh) * 40);
    }

    #content > div {
        margin-top:     -40px;
        padding-top:    40px;
    }

    .secondaryfade {
        animation-delay:        1s;
        animation-fill-mode:    backwards;
    }

    #name {
        font-size: 6em;
    }
}

.supplimentaryimage {
    margin: 5% auto;
    max-width: 80%;
}

@media only screen and (min-width: 600px) and (max-width: 800px) {
    #name {
        font-size:  5em;
    }

    .guideanchor {
        font-size:  1em;
    }
}