@font-face { font-family: Roboto; src: url('../assets/fonts/Roboto-Regular.ttf'); } 
@font-face { font-family: Roboto-Thin; src: url('../assets/fonts/Roboto-Thin.ttf'); } 

html{
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    scroll-behavior: smooth;

    /* FIREFOX SCROLL BAR */
    scrollbar-color: #DE541E #121212;
    scrollbar-width: thin;
}

.card-body{
    /* FIREFOX SCROLL BAR */
    scrollbar-color: #DE541E white;
    scrollbar-width: thin;
}

/* CHROME SCROLL BAR */
html::-webkit-scrollbar {
    background-color: #121212;
    width: 0.5em;
}

html::-webkit-scrollbar-thumb {
    background-color: #DE541E;
}

.card-body::-webkit-scrollbar {
    background-color: white;
    width: 0.5em;
}

.card-body::-webkit-scrollbar-thumb {
    background-color: #DE541E;
}

body{
    width: 100%;
    padding: 0;
    margin: 0;

    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(../assets/img/andrewneel.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.header{
    color:white;
    text-shadow: 2px 2px #121212;
    font-family: Roboto-Thin;
}



#top img{
    width: 5vmax;
}

/* MIDDLE */
#top .right{
    background-color: rgba(0, 0, 0, 0);
    overflow-x: hidden;
    text-align: center;
}
#top .right a{
    text-decoration: none;
}

/* FOOTER */
#footer{
    /* position: fixed; */
    /* width: 100%; */
    background-color: #121212d0;
    font-size: max(1.25vw, 12px);
    color: #DE541E;
}
#footer a{
    color: #3F3F37;
    text-decoration: none;
}
#footer a:hover{
    color: black;
    border-top: 1px solid #DE541E;
    border-bottom: 1px solid #DE541E;
    text-decoration: none;
}

/* OTHER STUFF */
#tableContainer{
    width: 95%;
}

.card-body{
    overflow-y:auto;
}

/* BUTTONS */
.btn-header{
    text-align: center;
    color: #D6D6B1;
    background-color: #DE541E;
    border-color: #DE541E;
    font-family: Roboto;
    font-weight: bold;
    border-radius: 0.25em;
    padding: 0.5em;
    text-decoration: none;
}
.btn-header:hover{
    cursor: pointer;
    color: #121212;
    background-color: #D6D6B1;
    border-color: #D6D6B1;
    font-family: Roboto;
    border-radius: 0.15em;
}

.btn-type{
    border: 0.025em solid #121212;
    border-radius: 0.25em;
    background-color: #121212d0;
    box-shadow: 0.25em 0.25em 0.8em #D6D6B1;
    color:#D6D6B1;

    cursor: pointer;
    animation: shit1 3s infinite;
}
.btn-type:hover{
    border: 0.025em solid #121212;
    border-radius: 0.15em;
    background-color: #d6d6b1c0;
    box-shadow: 0.25em 0.25em 0.3em #DE541E;
    color: #121212;

    transform: translateY(-0.25em);
    padding-bottom: 0.25em;
}


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

    #top img{
        width: 10vmax;
    }

    #tableCardTitle span{
        font-size: 12px;
    }

}