:root {
    --r6yellow: #fad505;
    --r6gold: #faac05;
    --r6black: #0D0D0D;
    --r6grey: #262626;
    --lightGrey: #696969;
    --r6white: #F2F2F2;
    --darkRed: #810000;
    --smallText: 1.25vw;
    --mediumText: 1.5vw;
    --largeText: 1.75vw;
    --xLargeText: 2vw;
}

/* @font-face {
    font-family: "Rainbow";
    src: url('../fonts/Rainbow.ttf') format('truetype');
} */


* {
    padding: 0px;
    margin: 0px;
    /* font-family: 'Rainbow';
    font-weight: lighter; */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 400;
    letter-spacing: .5px;
}

/* Scrollbar Styles */

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--r6black);
    width: 5px;
    height: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--r6gold);
    width: 5px;
    height: 5px;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--r6yellow);
    width: 5px;
    height: 5px;
}

/* Animations */
@keyframes spin {
    0% {
        transform: inherit;
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes flash {
    0% {
        opacity: 100%;
    }

    50% {
        opacity: 50%;
    }

    100% {
        opacity: 100%;
    }
}

a {
    text-decoration: none;
    cursor: pointer;
}

body {
    position: absolute;
    height: 100%;
    width: 100%;
    /* border: 2px solid red; */
}

h1,
h2,
h3,
h4,
p {
    cursor: default;
}

.center-horz {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    width: 100%;
    border: 2px solid red;
}

.button {
    position: relative;
    border-radius: .75vh;
    border: 2px solid #0D0D0D00;
    outline: none;
    background: #0D0D0D;
    color: var(--r6gold);
    text-align: center;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

.button:hover {
    background-color: var(--r6yellow);
    color: var(--r6grey);
    box-shadow: 0px 0px 10px 0px var(--r6yellow);
}

.select {
    position: relative;
    border-radius: .75vh;
    outline: none;
    border: 2px solid #0D0D0D00;
    background: #0D0D0D;
    color: var(--r6gold);
    text-align: center;
    cursor: pointer;
}

.info {
    position: relative;
    height: 25vh;
    width: 100%;
    top: 100%;
    background-color: var(--r6black);
    overflow: hidden;
    display: flex;
    flex-direction: row;
    /* border: 2px solid red; */
}

.info-container {
    position: relative;
    width: 33.33%;

    display: flex;
    flex-direction: column;
    gap: 2%;
    /* border: 2px solid red; */
}

.info-container-header {
    position: relative;
    height: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 100%;
    top: 1%;
    text-align: center;
    color: var(--r6gold);
    font-size: var(--largeText);
    /* border: 2px solid blue; */
    cursor: default;
}

.info-list {
    position: relative;
    list-style: none;
    height: 95%;
    width: 50%;
    display: flex;
    flex-direction: column;
    /* border: 2px solid green; */
}

.info-list-container-vert {
    position: relative;
    height: 79%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    /* border: 2px solid blue; */
}

.info-list-container-horz {
    position: relative;
    display: flex;
    height: 100%;
    flex-direction: row;
    justify-content: center;
    align-content: center;
}


.info-list-item {
    position: relative;
    height: 20%;
    width: 100%;
    text-align: center;
    /* border: 2px solid yellow; */
}

.info-list-item-link {
    position: relative;
    text-align: center;
    color: var(--r6white);
    font-size: var(--mediumText);
    transition: all .2s ease-in-out;
}

.info-list-item-link:hover {
    color: var(--r6yellow);
}

.wrapper {
    position: absolute;
    background-color: var(--r6black);
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    /* border: 2px solid red; */
}

.wrapper2 {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    background-color: rgb(13, 13, 13, .50);
    /* border: 2px solid red; */
}

.video-background {
    position: fixed;
    min-height: 100%;
    min-width: 100%;

    /* border: 2px solid red; */
}

.navbar {
    position: relative;
    height: 10%;
    width: 100%;
    background: rgb(13, 13, 13, .75);
    /* border: 2px solid red; */
}


.logo {
    position: relative;
    height: 90%;
    left: 1%;
    top: 5%;
    /* border: 2px solid blue; */
}

.navbar ul {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 5%;
    height: 100%;
    width: 30%;
    float: right;
    justify-content: end;
    left: -1%;
    /* border: 2px solid blue; */
    list-style: none;
}

.navbar ul li {
    position: relative;
    height: 100%;
    width: min-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    /* border: 2px solid green; */
}

.navbar ul li a {
    position: relative;
    text-decoration: none;
    color: var(--r6white);
    letter-spacing: 2px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    font-size: var(--largeText);
    padding-top: 1%;
    padding-bottom: 1%;
    transition: all .2s ease-in-out;
    height: min-content;
    width: 100%;
    border-radius: .75vh;
    /* border: 2px solid yellow; */
}

.navbar ul li .active {
    color: var(--r6gold);
}

.navbar ul li a:hover {
    color: var(--r6gold);
}

.center-vert {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

.error-container {
    position: absolute;
    top: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    justify-content: end;
    align-content: end;
    background-color: rgb(38, 38, 38, .5);
}

.error-container-bottom {
    position: absolute;
    z-index: 2;
    height: min-content;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 2%;
    background-color: var(--r6grey);
    box-shadow: 0px 0px 10px 0px red;
}

.error-container-message {
    position: relative;
    height: min-content;
    width: 95%;
    padding-top: 1.5%;
    color: var(--r6white);
    font-size: var(--mediumText);
    /* border: 2px solid red; */
}

.error-container-image {
    position: relative;
    width: 3vw;
    left: 1%;
    top: 48.5%;
    margin-top: 1%;
    margin-bottom: 1%;
    filter: invert(16%) sepia(97%) saturate(7488%) hue-rotate(1deg) brightness(102%) contrast(112%);
}


.input {
    font-family: Arial, Helvetica, sans-serif;
}

.loading-screen {
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0%;
    left: 0%;
    z-index: 3;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    background-color: rgb(13, 13, 13, .9);
}

.loading-screen-text {
    position: absolute;
    height: min-content;
    width: 100%;
    text-align: center;
    color: var(--r6white);
    font-size: var(--largeText);
    animation: flash 1s linear infinite;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}