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

@font-face {
    font-family: 'Roboto';
    font-weight: 200;
    src: url(../fonts/Roboto/Roboto-Light.ttf);
}

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

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: url(../fonts/Roboto/Roboto-Medium.ttf);
}

@font-face {
    font-family: 'Roboto';
    font-weight: 500;
    src: url(../fonts/Roboto/Roboto-Bold.ttf);
}

@font-face {
    font-family: 'Roboto';
    font-weight: 600;
    src: url(../fonts/Roboto/Roboto-Black.ttf);
}

.theme-light {
    --color-primary: #000000;
    --color-secondary: #FFAE00;
    --color-tertiary: #ffffff;
    --color-heading: #000000;
    --color-links: #d8bb00;
    --color-accent01: rgb(245, 245, 245);
    --color-accent02: rgb(235, 235, 235);

    --color-primary-01: #ffd900;
    --color-primary-02: #e6c300;
    --color-primary-03: #ccae00;
    --color-primary-04: #b39800;
    --color-primary-05: #998200;

    --color-secondary-01: rgb(255,255,255);
    --color-secondary-02: rgb(250,250,250);
    --color-secondary-03: rgb(245,245,245);
    --color-secondary-04: rgb(240,240,240);
    --color-secondary-05: rgb(235,235,235);

    --color-tertiary-01: rgb(0,0,0);
    --color-tertiary-02: rgb(15,15,15);
    --color-tertiary-03: rgb(30,30,30);
    --color-tertiary-04: rgb(45,45,45);
    --color-tertiary-05: rgb(60,60,60);
}

.theme-dark {
    --color-primary: #FFAE00;
    --color-secondary: #000000;
    --color-tertiary: #000000;
    --color-heading: #FFFFFF;
    --color-links: #FFAE00;
    --color-accent01: rgb(20, 20, 20);
    --color-accent02: rgb(40, 40, 40);
    
    --color-primary-01: #ffd900;
    --color-primary-02: #ffdd1a;
    --color-primary-03: #ffe133;
    --color-primary-04: #ffe44d;
    --color-primary-05: #ffe866;

    --color-secondary-01: rgb(0,0,0);
    --color-secondary-02: rgb(15,15,15);
    --color-secondary-03: rgb(30,30,30);
    --color-secondary-04: rgb(45,45,45);
    --color-secondary-05: rgb(60,60,60);

    --color-tertiary-01: rgb(255,255,255);
    --color-tertiary-02: rgb(250,250,250);
    --color-tertiary-03: rgb(245,245,245);
    --color-tertiary-04: rgb(240,240,240);
    --color-tertiary-05: rgb(235,235,235);
}

p, li, h1, h2, h3, a, i, th, td, span, caption, label, div, input, textarea, small {
    font-family: 'Roboto', sans-serif;
}

body{
    margin: 0px 0px;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--color-tertiary);
    display: block;
    text-align: center;
}

select {
    border: none;
    border-bottom: solid 1px var(--color-primary);
}