@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap");

$bgColor: #2C3149;
$textColor: #fff;
$accentColor: #FFD600;

::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;

    &-track {
        background: #222;
        border-radius: 0.5rem;
    }

    &-thumb {
        border-radius: 1rem;
        background: #777;
    }
}

body,
html {
    margin: 0;
    padding: 0;

    min-height: 100vh;
    font-family: "Lato", sans-serif;

    background-color: $bgColor;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: white;
    text-decoration: none;

    &:visited {
        color: white;
    }

    &:hover, &:focus {
        color: $accentColor;
    }
}

p {
    font-size: 1.2em;
    font-weight: bold;
    color: $accentColor;
}

select,
option,
input,
button {
    font-family: "Lato", sans-serif;
    font-size: 1em;

}

button {
    border: none;
    outline: none;
    background: none;

    padding: 0;
    margin: 0;

    cursor: pointer;

    font-size: 1em;
    color: white;

    &:hover {
        color: $accentColor;
    }
}

button.btn {
    padding: 0.25em 1em;

    border-radius: 0.25em;
    border: 2px solid white;
    outline: none;
    background: none;

    transition: all 250ms;

    &:hover {
        color: $accentColor;
        border-color: $accentColor;
    }

    &:focus {
        color: $accentColor;
    }

    &--text {
        font-weight: bold;
        transition: all 250ms;
        border: none;
    }
}



button.btn-rect {
    width: 1.5em;
    height: 1.5em;
    font-size: 1.65em;

    line-height: 1em;

    border-radius: 0.25em;
    border: 2px solid black;
    outline: none;
    background: white;
    color: black;


    transition: all 250ms;

    &:hover {
        color: white;
        background-color: black;
    }
}

select {
    background: none;
    border: 2px solid white;
    outline: none;

    padding: 0.25em 0.35em;

    color: white;
    font-size: 1em;

    width: 18em;
}

option {
    color: black;
    border: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.text {
    &--accent {
        color: $accentColor;
    }

    &--grayed {
        color: gray;
    }
}