@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');

:root {
    --background-color: #F9F5F1;

    --primary-light: #E7D8C9;
    --primary-light-rgb: 231, 216, 201;
    --primary-dark: #514538;
    --primary-dark-rgb: 81, 69, 56;

    --accent-dark: #2b7a6d;
    --accent-dark-rgb: 43, 122, 109;
    --accent-light: #cbe1d6;
    --accent-light-rgb: 203, 225, 214;

    --error-dark: #c72c41;
    --error-dark-rgb: 199, 44, 65;
    --error-light: #e9b9bf;
}

html {
    overflow-x: hidden;
}

/* //////////////////////// */
/*      Common styles       */
/* //////////////////////// */

body {
    padding: 0;
    margin: 0;

    font-family: "Inter", sans-serif;
    font-weight: 500;

    height: 100%;
    min-height: 100vh;
    width: 100%;

    background-color: var(--primary-light);
}

header {
    /* border: 1px solid red; */

    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    padding: 15px;

    font-size: 1.5rem;

    color: var(--primary-dark);
}
header button {
    padding: 7px 14px;
    border-radius: 5px;
    border: none;

    background-color: transparent;
    color: var(--accent-dark);
    border: 3px solid var(--accent-dark);

    font-size: 1rem;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.1s ease-out;
}
header button:hover {
    background-color: var(--accent-dark);
    color: var(--primary-light);
}

.container {
    position: relative;

    margin: 25px auto;
    padding: 15px;
    max-width: 800px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.home-content {
    width: 100%;
    max-width: min(800px, 90vw);
    margin: 50px auto;
    padding: 15px;

    font-size: 1rem;

    color: var(--primary-dark);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}

.home-content .landing-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    width: 100%;
}
.home-content .landing-text img {
    width: 220px;
    border-radius: 15px;
}
.home-content .landing-text img:nth-child(even) { transform: rotate(10deg) translateY(10px); }
.home-content .landing-text img:nth-child(odd) { transform: rotate(-10deg) translateY(10px); }


.too-small-container {
    display: none;

    width: 100%;
    max-width: 90vw;

    height: 100%;
    flex-grow: 1;

    margin: 30px auto;
}
.too-small {
    font-weight: 600;
    font-size: 1.5rem;

    text-wrap: wrap;
    text-align: center;

    color: var(--error-dark);
    background-color: var(--error-light);
    border-radius: 15px;
    padding: 20px;
}
@media (max-width: 735px) {
    main {
        display: none !important;
    }
    nav .nav-links {
        display: none !important;
    }
    .too-small-container {
        display: block;
    }
}