:root {
    --yellow: #FEF071;
    --light_green: #EBFF9D;
    --light_orange: rgba(254, 226, 101, 0.62);
    --light_backround_yellow: #FEF07155;
}

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

html {
}

@font-face {
    font-family: Rubik;
    src: url("fonts/Rubik-VariableFont_wght.ttf") format('truetype');
    font-weight: 300 900;
    font-style: normal;
}

@font-face {
    font-family: Rubik;
    src: url("fonts/Rubik-Italic-VariableFont_wght.ttf") format('truetype');
    font-weight: 300 900;
    font-style: italic;
}



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

a:visited {
    text-decoration: none;
    color: black;
}

a:hover {
    text-decoration: none;
    color: black;
}

a:focus {
    text-decoration: none;
    color: black;
}

a:hover, a:active {
    text-decoration: none;
    color: black
}

.flashes {
    width: 100%;
    padding: 0.5rem 1rem;
    list-style-type: none;
}

.flashes li {
    border-radius: 10px;
    padding: 10px;
}

.flashes .error {
    background-color: var(--light_orange);
}

.flashes .success {
    background-color: var(--light_green);
}

.container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pseudo-flex-container {
    width: 100%;
}



/* General styling */
.centered {
    text-align: center;
}

.boxshadow-small {
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.boxshadow-mid {
    box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
}

.boxshadow-big {
    box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.25);
}