@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+Mono:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');

:root {
    --primary:              #3896f7;
    --secondary:            #5da9f7;
    --tetriary:             #8ac2f9;
    --mid-dark:             #2c78c6;
    --secondary-mid-dark:   #215a94;
    --light:                #f5f5f5;
    --dark:                 #0f0f0f;
    --background:           #f5f5f5;
    --gray:                 #a9bacd;
    --red:                  #d40f0f;
    --transition-speed: .3s;
}
body {
    margin: 0;
    background-color: var(--background);
    font-family: "Lexend Deca", sans-serif;
    letter-spacing: 2.5px;
    font-size: 1.2rem;
    color: var(--dark);
    padding-top: 10vh;
}
main {
    min-height: 100vh;
}
section {
    padding: 0 5vw;
    box-sizing: border-box;
}
h1, h2, h3 {
    font-family: "Montserrat", serif;
    color: var(--primary);
}
h1 { 
    font-size: 2.5em;
    text-align: center; 
}
a {
    color: var(--tetriary);
    text-decoration: none;
    transition: var(--transition-speed);
}
a:hover {
    color: var(--secondary);
}

button {
    transition: .3s;
}

button:hover {
    filter: brightness(.8);
}