@font-face {
    font-family: 'theFuture-Black';
    src: url('fonts/TheFuture-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TheFuture-Medium';
    src: url('fonts/TheFuture-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    margin:0;
    width:100vw;
    height:auto;
    background-color:#dc7515;
    background-image:url("images/textures/mirrored-squares.png");
    cursor:url("images/cursors/microphone.png"), auto;
    font-family: 'theFuture-Black';
    overflow-y:scroll;
    overflow-x:hidden;
}

#header_div {
    position:relative;

}

#logo_img {
    position:relative;
    width:90vw;
    left:5vw;
    right:5vw;
    top:5vh;
    opacity:.85;
}

#header_div h1 {
    width:100vw;
    position: relative;
    text-align: center;
    top:5vh;
    font-size:10vh;
    color: black;
}

h1 {
    text-align:center;
}


#content_div {
    position:relative;
    background-color: rgb(255, 255, 255, .85);
    top:10vh;
    bottom:10vh;
    width:70vw;
    left:15vw;
    right:15vw;
    
    border-radius:3vw;
    border: solid;
    border-color:black;
    border-width:2px;

    padding-left:2vw;
    padding-right:2vw;
    padding-top: .25vh;
    padding-bottom: .25vh;
}

h3 {
    width:65%;

    font-size:larger;
    font-family: 'TheFuture-Medium';
    text-align:center;
    font-weight:200;
    color:white;
    
    background-color:#dc7515;
    border-radius:.8vw;
    border: solid;
    border-color:black;
    border-width:2px;

    padding-left;:1vw;
    padding-right:1vw;
    padding-top:1.5vh;
    padding-bottom:1.5vh;
    margin-left:20%;
    margin-right:20%;
}

a {
    color: #930C2E;
    text-shadow: rgba(162, 135, 100, 0.471) 2px 2px;
    text-decoration:none;
    transition: color 2s ease;
}
a:hover {
    color: black;
    transition: color 2s ease;
}

ul {
    text-align:left;
    margin-left:0;
    list-style-type: square;
}

#recordlist a {
    font-style:italic;
}

#recordlist {
    margin-top:2vh;
    margin-right:5vw;
    margin-left:5vw;
}

#recordlist iframe {
    border: solid 2px black;
    width: 100%;
    height: 120px;
}

#footer_div {
    position:relative;  
    top:10vh;
    bottom:10vh;
    width:70vw;
    left: 15vw;
    right:15vw;
}

@media screen and (max-width: 800px) {

    body {
        margin:0;
        overflow-y:scroll;
        overflow-x:hidden;
        font-size:2em !important;
    }

    #logo_img {

        left:2vw !important;
        right:2vw !important;
        width:96vw !important;
    }

    #content_div {
        width:94.5vw !important;
        left:.25vw !important;
        right:.25vw !important;
    }

    h1 {
        font-size:5vw !important;
        text-align:center !important;
    }
    h3 {
        font-size:3.5vw !important;
        width:95% !important;
        margin-left:2.5% !important;
        margin-right:2.5% !important;
        border-radius:2vw;

    }
    
      h2 {
        font-size:6.4vw !important;
        text-align:center;
    }

}