/* Main styling */

/* Colors */
@import url("colors.css");

/* Reset defaults */
@import url("reset.css");

/* General */
html {
    height: 100%;
}

body {
    font-family: "Montserrat", sans-serif;
}

main {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-container {
    max-width: 80%;
    margin: 0 auto;
    text-align: center; 
}

.about-container h1 {
    font-size: clamp(1.5rem, 3rem, 6rem);
    margin: clamp(0.5rem, 1rem, 2rem) 0;
}

.about-container p {
    font-size: clamp(0.5rem, 1rem, 2rem);
    margin: clamp(0.5rem, 1rem, 2rem) 0;
}

.button-container {
    margin: clamp(1rem, 1.5rem, 2rem) 0;
    display: flex;
    justify-content: space-evenly;
}

.button-wrapper {
    padding: 0.4rem 1.4rem;
    border: 1px solid var(--grey);
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-wrapper:hover {
    text-decoration: underline;
    text-decoration-color: var(--black);
}

.button-wrapper img {
    width: clamp(1rem, 2rem, 2.5rem);
    height: clamp(1rem, 2rem, 2.5rem);
}

.button-wrapper span {
    color: var(--black);
    font-size: clamp(0.5rem, 1rem, 1.75rem);
    padding: 0 clamp(0.5rem, 1rem, 1.75rem);
}

@media (max-width: 600px) {
    .button-container {
        flex-direction: column;
    }

    .button-wrapper {
        margin: 0.5rem 0;
    }
}