@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');


:root {
    --grey: #333;
    --white: #fff;
    --purple: #A020F0;
    --blue: #4169e1;
}

* {
    margin: 0;
    padding: 0;
} 

.top-button {
    display: flex;
    justify-content: center;
    align-items: center;    
    margin: 2rem auto; 

}

.top-button button {
    background: none;
    border: none;
}

.top-button img {
    max-width: 4rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.top-button img:hover {
    scale: 1.1;
}

.footer {
    background-color: #F0F0F0;
    box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.1);
}

.footer-row {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    padding: 2rem;
    min-width: 15rem;
}

.footer-row h1, .footer-row p, .footer-row a{
    color: var(--grey);
    text-align: center;
}

.footer-row h1 {
    font-family: "Rubik", sans-serif;
    font-size: 2rem;

    margin-bottom: 2rem;
    letter-spacing: 1.6px;
}

.col1, .col2, .col3 {
    max-width: 33%;
    display: flex;
    flex-direction: column;
    flex: 1;
} 

.col1 a{
    font-family: "Outfit", sans-serif;
    font-size: 1.25rem;
    color: var(--grey);
    text-align: center;
    text-decoration: none;
    margin-bottom: 4px;
}

.col1 i {
    margin-right: 2px;
}

.col1 a:hover{
    text-decoration: underline;
}

.col2 form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center ;
}

.col2 form input, .col2 form button {
    display: block;
    text-align: center;
    font-family: "Outfit", sans-serif;  
    font-size: 1rem;  
    color: var(--grey);
    text-align: center;
    margin-top: 5px;
}

.col2 form input {
    width: 70%;
    max-width: 25rem;
    height: 2.8rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    outline: none;
    border: none;
    box-shadow: 0 0 20px 8px rgba(59, 59, 59, 0.2);
}

.col2 form button{
    background: transparent;
    border: 2px solid var(--grey);
    border-radius: 2rem;
    padding: 10px 2rem;
    cursor: pointer;
    transition: .5s;
}

.col2 form button:hover {
    background: var(--grey);
    border: 2px solid var(--grey);
    color: var(--white);
    transform: scale(1.05); 
    transition: transform 0.3s ease;
    box-shadow: 0 0 20px 8px rgba(59, 59, 59, 0.5);
}   

.col2 form button:hover p {
    color: var(--white) 
}

.social-icons {    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.social-icons i {
    margin: 10px;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.social-icons i:hover {
    transform: scale(1.25); 
    transition: transform 0.3s ease;
}

.brand h1{
    font-family: "Rubik", sans-serif;
    font-size: 1.25rem;
    color: var(--grey);
    text-align: center;
    margin-top: 5px;
}

.legaltext {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 10px;
}

.legaltext h1, .legalext a, .legaltext p {
    font-family: "Outfit", sans-serif;
    text-decoration: none;
    font-weight: 500;
    color: var(--grey);
    font-size: 1rem;

} 

@media(max-width: 810px) {
    .col1 a{
        font-size: 1rem;
    } 

    .col2 form button{
        padding: 5px 1rem;
    }
    
}

@media (max-width: 650px) {
    .footer-row {
        flex-direction: column; 
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;

    }
    
    .footer-row h1{
        margin-bottom: 5px;
    }

    .col1, .col2, .col3{
        width: 90%;
        max-width: 100%;
        flex: 0;    
        margin-bottom: 20px;
    }

    .col2 form input {
        margin-bottom: 5px;
    }
}