:root {
    --primary-color: rgb(207, 202, 190);
    --primary-color-blur: rgba(207, 202, 190, 0.649);
    --primary-color-hover: rgb(177, 174, 166);
    --primary-color-hover-blur: rgba(236, 230, 214, 0.283);
    --secondry-color: rgb(192, 72, 35);
    --secondry-color-hover: rgb(159, 48, 14);
    --link-color: orange;
    --link-color-hover: rgb(255, 192, 2);
    --link-color-hover-blur: rgba(255, 192, 2, 0.602);
    --dark-background-color: black;
    --text-color1: black;
    --text-color-hover1: rgb(162, 89, 89);
    --dark-background-color-hover: rgb(46, 38, 38);
    --bright-background-color: white;

    --width: 660px;
    --big-width: 1000px;
    
    background-color: var(--dark-background-color);

    /*Font*/
    --roboto-regular: normal 400 20px "Roboto";
    --roboto-medium: normal 500 20px "Roboto";
    --roboto-bold: normal 700 20px "Roboto";
    --roboto-regular-italic: italic 400 20px "Roboto";
}

* {
    padding: 0;
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.max-width {
    max-width: var(--width);
}

@media only screen and (max-width: 680px) {
    :root {
        --width: 500px;
    }
}