:root {
    --cuphead: #ffcf10;
    --cupheadDLC: #a0e1c0;
    --dlc-font: #433650;
    --font: 'cuphead-memphis';
    --font2: 'cuphead-vogue';
    --banner: var(--cuphead);
    --bannerText: black;
    --background1: #343434;
    --background2: #3C3C3C;
    --monkey: #63b5a9
}

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

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

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

@font-face {
    font-family: "FOT";
    src: url("fonts/FOT-RodinHimawariProUB.otf") format("opentype");
}

body {
    font-family: var(--font);
    color: white;
    background: repeating-linear-gradient(45deg,
            var(--background1),
            var(--background1) 10px,
            var(--background2) 10px,
            var(--background2) 20px);
}

#bodyContent {
    min-height: 100vh;
    flex-direction: column;
    display: flex
}

main {
    flex: 1;
}

select {
    font-family: var(--font);
    border-radius: 15px;
    padding: 0 3px;
    margin: 0 3px;
    color: black
}

a {
    text-decoration: none;
    color: inherit
}

.myekul {
    width: 48px;
    height: auto;
    filter: drop-shadow(0.5px 0 0 black)
        /* Right shadow */
        drop-shadow(-0.5px 0 0 black)
        /* Left shadow */
        drop-shadow(0 0.5px 0 black)
        /* Bottom shadow */
        drop-shadow(0 -0.5px 0 black);
    padding: 0
}

.myekulColor {
    color: #F0C03E;
    white-space: nowrap;
}

.background1 {
    background-color: var(--background1) !important;
}

.background2 {
    background-color: var(--background2);
}

.banner {
    background-color: var(--banner) !important;
    color: var(--bannerText) !important
}

.gray {
    background-color: var(--gray);
}

input {
    font-family: var(--font);
    accent-color: var(--banner)
}

.cuphead {
    background-color: var(--cuphead) !important;
    color: black
}

.monkey {
    background-color: var(--monkey);
}

.first {
    background-color: var(--cuphead) !important;
    color: black
}

.second {
    background-color: silver !important;
    color: black
}

.third {
    background-color: darkorange !important;
    color: black
}

/* Scrollbar */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--banner);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray);
}

::-webkit-scrollbar-track {
    background-color: var(--background1);
}

/* Banner */

header {
    background-color: var(--banner);
    color: var(--bannerText);
    height: 100px;
}

footer {
    height: 40px;
    margin-top: 20px;
    padding-bottom: 30px;
    background-color: var(--banner);
    color: var(--bannerText);
}

.footerText {
    font-size: 130%;
    padding: 0 10px;
    font-weight: bold;
}

footer img {
    height: 32px;
    width: auto;
    object-fit: contain;
    padding: 5px
}