@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --background-fade: linear-gradient(to bottom, rgb(10, 60, 130), rgb(10, 40, 80));
    --dark-blue-fade: linear-gradient(to bottom, rgb(5, 15, 25), rgb(0, 10, 20));
    --background-form: rgba(0, 0, 0, 0.2);
    --background-card: #FEF;
    --backgorund-button: #40E54C;
    --text-button: #050505;
    --error-text: #F00;
    --success-text: #0F0;
    --border-color: #0FF;
    --icon-color: #EEE;
    --card-color-01: #FA6400;
    --card-color-02: #BB00FF;
    --card-color-03: #00CFDC;
    --card-color-04: #E6E63C;
    --card-color-05: #E646C8;
    --card-color-06: #CC9952;
    --ranking-background: #FFD700;

    --site-util-width: min(85%);
}

html {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #FFF;
    font-weight: 500;
}

input,
textarea,
button {
    outline: none;
    border: none;
    font-size: 1rem;
    resize: none;
    padding: .8rem 1rem;
    border-radius: 5px;
}

body {
    background-image: var(--background-fade);
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: #FFF;
}

h2 {
    font-size: 1.3rem;
}

.hidden {
    visibility: hidden;
}

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

    html {
        font-size: 12px;
    }

    .main-nav-bar img {
        width: 100px;
    }

    :root {
        --site-util-width: min(100vw - 50px, 1500px);
    }

}

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

    html {
        font-size: 10px;
    }

    .main-nav-bar img {
        width: 90px;    
    }
    
    :root {
        --site-util-width: min(100vw - 30px, 1500px);
    }

}