@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root {
    --person-green: #7DDF64;
    --person-yellow: #FFC145;
    --person-red: #FF6B6C;
    --person-blue: #384E5D;
    --person-blue-bg: #425B6D;
    --primary-text: #F7F7F7;

    --font-text: Quicksand;
    --font-title: Sour Gummy;
    --font-lato: Lato;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

html {
    font-family: var(--font-text);
    font-size: 62.5%;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.button {
    display: inline-block;
    border: 0.2rem solid var(--person-blue);
    color: var(--person-blue);
    border-radius: 5rem;
    padding: 0.8rem 1.5rem;
    transition: all ease 0.2s;
}

.button:hover {
    border: 0.2rem solid var(--person-red);
    background-color: var(--person-red);
    color: var(--primary-text);
}