@font-face {
    font-family: Arial;
    src: url();
}

* {box-sizing: border-box;}

body {
    font-family: Arial;
    background-size: cover;
    background-image: url(/resources/background.jpeg);
}

#GridContainer {
    width: 775px;
    height: 1000px;
    border: 3px solid rgb(100, 100, 100);
    margin: auto;
    grid-template-columns: repeat(31, 25px);
    grid-template-rows: repeat(40, 25px);
    display: grid;
    background-color: rgb(168, 168, 168);
}

#Header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    grid-column: 2 / 31;
    grid-row: 2 / 6;
    height: 100%;
    width: 100%;
    border: 6px solid transparent;
    border-image: url(/resources/border2.png) 6 round;
    background-image: url(/resources/headerBackground.png);
    background-size: cover;

    font-family: 'Times New Roman', Times, serif;

    h1 {
        text-align: center;
        border: 6px solid transparent;
        border-image: url(/resources/border1.png) 6 fill round;
        padding: 8px;
    }
}

#LegendHolder {
    grid-column: 6 / 27;
    grid-row: 7 / 11;
    height: 100%;
    width: 100%;
    border: 6px solid transparent;
    border-image: url(/resources/border1.png) 6 fill round;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;

    a {
        padding: 5px;
        text-decoration: none;
        text-align: center;
        color: rgb(33, 33, 33);
        border: 2px solid black;
        width: 165px;
        white-space: nowrap;
    }
    a:hover {
        background-color: rgb(170, 170, 170);
    }

    #Base {background-color: rgb(170, 170, 170);}

    #LegendFlexHolder {
        display: flex;
        flex-direction: column;
        gap: 5px;
        align-items: center;
        justify-content: center;
        margin-top: 4px;
        
    }

    #LegendItems {
        display: flex;
        flex-direction: row;
        gap: 5px;
        width: fit-content;
    }

}

#MainText {
    grid-column: 4 / 29;
    grid-row: 12 / 38;
    height: 100%;
    width: 100%;
    border: 6px solid transparent;
    border-image: url(/resources/border1.png) 6 fill round;
    padding: 8px;

    p {
        margin-top: 0px;
    }
}