@font-face { /* To use a custom font (for some reason...). Has to be downloaded and placed in the folder */
    font-family: "Roboto";
    src: url(../fonts/Roboto/Roboto-VariableFont_wdth\,wght.ttf);
}

:root {    
    --header-footer-color: #bbdbff;
    --body-color: rgb(164, 232, 255);
    --line-height: 1.5;
    --header-height: 6rem;
    --footer-height: 2.2rem;
    --button-color: #0060c0;
    --text-color: #1b374d;
    --header-footer-height: calc(var(--header-height) + var(--footer-height));
    --main-height: calc(100vh - var(--header-footer-height));
    --question-line-length: 62rem;
}

/*
* {
    outline: 1px solid orangered;
}
 */


HTML {
    font-family: Roboto;
    font-size: 62.5%;
}

a, li {
    text-decoration: none;
}

h2 {
    font-size: 2rem;
    line-height: 2rem;
}

h3 {
    font-size: 2.2rem;
    line-height: 2.2rem;
}

h4 {
    font-size: 3.2rem;
    line-height: 3.2rem;
}

h5 {
    font-size: 3.2rem;
    line-height: 3.2.rem;
}

body {
    background-color: var(--body-color);
    height: 100vh;
    width: 100%;
    display: grid;
    place-content: center;
}

main {
    height: var(--main-height);
    display: grid;
    place-content: center;
}

.page {    
    width: 100%;
    display: grid;
}

.page--col-1 { 
    grid-template-columns: repeat(1, 1fr); 
}

.page--col-3 { 
    grid-template-columns: repeat(3, 1fr); 
    column-gap: 10rem;
}

@media (min-width: 980px) {
    .profile { column-count: 1; }
}

.title {
    display: grid;
    place-content: center;
    color: var(--text-color);
}

.title--big {    
    font-size: 3rem;
}

.title--med {    
    height: 3rem;
    line-height: 2.4rem;
    font-size: 2rem;
}

input {
    width: 32rem;
    height: 3.4rem;
    border-radius: 0.6rem;
    border: 0.1rem solid black;
    background-color: #EEEEEE;
    font-size: 1.6rem;
    padding-left: 1rem;
    margin-bottom: 0.8rem;
}

input[type=date], input[type=select] {
    display: block;
    width: 13rem;
    text-align: center;
    text-align-last: center;
}

.quantity {
    display: flex;
}

.dropdown--long {
    display: flex;
    flex-direction: column;
    width: 32rem;
}

.select--short {
    width: 16rem;
}

.select--long {
    width: 32rem;
}

.quantity input[type=number] {
    width: 6rem;
}

select {    
    height: 3.4rem;
    border-radius: 0.6rem;
    border: 0.1rem solid black;
    background-color: #EEEEEE;
    font-size: 1.6rem;
    padding-left: 1rem;
    margin-bottom: 0.8rem;
}

form input {
    display: flex;
    flex-direction: column;
}

button, .button {
    border-radius: 0.6rem;
    border: none;
    background-color: #3F97EF;
    font-size: 1.6rem;
    color: #fff;
    padding: 1rem 1.6rem;
    cursor: pointer;
}

button:hover {
    background-color: #2073C7;
}