:root{
    --edge-padding: 1rem;
    --bg-color: #0f0f23;
    --text-color: #cccccc;
    --highlight-color: #ffffff;
    --link_color: #20ec20;
    --link-highlight-colour: #83ff83;
    --button-text-color: var(--bg-color)
}

body{
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);

    font-family: "Roboto Mono", monospace;
    font-style: normal;
}


header{
    grid-area: hd;
    padding: var(--edge-padding);
}

aside{
    grid-area: as;
    padding: var(--edge-padding);

}

main{
    grid-area: mn;
    padding: var(--edge-padding);
    min-height: 100vh;

}

nav{
    grid-area: nv;
    padding: var(--edge-padding);
}


h1, h2, h3, h4, h5, h6 {
    color: var(--highlight-color);
}


a{
    color: var(--link_color);
    font-size: large;
}
a:hover{
    color: var(--link-highlight-colour);
}

button{
    margin: 3px;
    color: var(--bg-color);
    padding: 3px;
    border-style: none;
    border-radius: 5px;
}


strong{
    color: var(--highlight-color);
}


footer{
    padding: var(--edge-padding);
    display: block;
    grid-area: ft;
    background-color: black;
}

.faq{
    display: flex;
    flex-wrap: wrap;   
    justify-content: center; 
}

textarea{
    filter: brightness(150%);
    background-color: var(--bg-color);

    font-size: 1rem;
    width: min(75vw, 20rem);
    
    border-radius: 1rem;
    border-style: solid;
    
    border-color: var(--text-color);
    color: var(--text-color);
    
    resize: none;
}


.input-field{
    filter: brightness(150%);
    background-color: var(--bg-color);
    font-size: 1rem;
    height: 2rem;
    width: min(75vw, 20rem);
    border-radius: 1rem;
    border-style: solid;
    border-color: var(--text-color);
    color: var(--text-color);
}


/*Hide increment arrows on input:number*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}