body {
    background-color: #362f29;
}
#hex-a {
    background-color: #B56B40;
}

#hex-b {
    background-color: #D59F61;
    color: black;
}

#hex-c {
    background-color: #461F00;
}

#hex-d {
    background-color: #712120;
}

#hex-e {
    background-color: #FF7978;
    color: black;
}

#hex-f {
    background-color: #FFF8E6;
    color: black;
}

#hex-g {
    background-color: #64A84E;
}

#title-background {
    background-color: #712120;
}

#links a {
    background-color: #461F00;
    color: white;
}
#links a:hover {
    background-color: #D59F61;
    color: black;
}

#title-seperator {
    background: linear-gradient(178deg, #B56B40 35%, transparent 36%);
    height: 20vh;
    width: 100%;
}
#title-seperator-1 {
    background: linear-gradient(182deg, #461F00 35%, transparent 36%);
    height: 100%;
    width: 100%;
}
#title-seperator-2 {
    background: linear-gradient(182deg, #712120 25%, transparent 26%);
    height: 100%;
    width: 100%;
    position: relative;
    top: -100%;
}

#ref-front, #ref-back {
    max-width: 50vw;
    max-height: 100vh;
    margin: -3% -3%;
}
#ref-holder {
    display: flex;
    flex-wrap: nowrap;
}
#ref-credit {
    background: linear-gradient(2deg, #242124 50%, transparent 51%);
    width: 100%;
    text-align: right;

}
#ref-credit h3 {
    margin: 1%;
    margin-bottom: 5%;
    font-size: 3vw;
    color: #B56B40;
}

@media only screen and (max-width: 768px) {
    #title-seperator {
        margin-bottom: -10vh;
    }
}