@font-face
{
    font-family: RUT;
    src: url(../fonts/woff2/RUT.woff2) format("woff2");
}

@font-face
{
    font-family: IBM;
    src: url(../fonts/woff2/web_ibm_bios.woff2) format("woff2");
}
@font-face
{
    font-family: IBM-2x;
    src: url(../fonts/woff2/web_ibm_bios-2x.woff2) format("woff2");
}
@font-face
{
    font-family: IBM-2y;
    src: url(../fonts/woff2/web_ibm_bios-2y.woff2) format("woff2");
}

html
{
    scrollbar-color: black white;
}

div
{
    box-sizing: border-box; /* ALWAYS declare this from now on holy shit this is so much more intuitive */
}

body
{
    background-image: url(../images/background/sky.gif), url(../images/background/riding.gif), url(../images/background/ridingcont.gif), url(../images/background/ridingback.gif);
    background-position: top, left, right, center;
    background-repeat: repeat-x, no-repeat, no-repeat, repeat-x;
    background-attachment: fixed, fixed, fixed, fixed;
    background-color: white;
    font-family: IBM;
    font-size: 16px;
    -webkit-font-smoothing: none;
}

small
{
    font-size: 8px;
    font-weight: normal;
}

.pixelart
{
    image-rendering: pixelated;
}

#container
{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 1000px;
    height: 850px;
    margin: auto;
}

#main
{
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid black;
    box-shadow: -4px 8px;
    padding: 8px;
    margin-top: 30px;
}

#content
{

}

#linkrow
{
    display: flex;
    background-color: #CCCCCC;
    justify-content: space-around;
    padding: 16px 0;
}

.linkboxes
{
    background-color: white;
    min-width: 350px;
    min-height: 170px;
    padding: 20px;
    border: 2px solid black;
    box-shadow: -4px 8px;
}

#rootquestcontainer
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#rootquestcontainer a {cursor: grab;}
#rootquestcontainer a:active {cursor: grabbing;}

#filetocontainer
{
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
}

#filetosite
{
    width: 100%;
    height: 122px;
    border: 2px solid black;
    display: flex;
}

#filetolinks
{
    width: 100%;
    height: 42px;
    border: 2px solid black;
    display: flex;
    flex-direction: row;
    margin-top: 2px;
}

.filetolink
{
    width: 25%;
    background-color: white;
    border-right: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.filetolink.last
{
    border-right: none;
}

.buttonlink
{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.longtext
{
    font-family: IBM-2x;
}

#footer
{
    font-family: RUT;
    font-size: 16px;
    margin-top: 34px;
    display: flex;
    user-select: none;
}

#morse
{
    position: absolute;
    left: 0;
    bottom: -4px;
    user-select: none;
}