/* google fonts */
    /* inter */
    @import url(https://fonts.googleapis.com/css?family=Inter:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

    /* kaushan script */
    @import url(https://fonts.googleapis.com/css?family=Kaushan+Script:regular);

/* variables */
    :root {

        /* light-mode */
        --black: #000;
        --white: #fff;
        --medium-grey: #777;
        --light-grey: #ccc;

        --accent: #222;
        
        /* light-mode */
        /* --black: #fff;
        --white: #000;
        --medium-grey: #777;
        --light-grey: #ccc; */

    }

/* basic reset */
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    input, select, textarea, button {
    font-family: inherit;
    }

/* default link coloring */
    a {
        color: var(--primary);
    }

/* shortcuts */
    .shortcut {
        display: flex;
        gap: 0.25rem;

        justify-content: center;
        align-items: center;

    }

    .vertical-shortcut {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;

        align-items: center;

        hr {
            width: 100%;
            border: 1px solid var(--light-grey);
        }
    }

/* main */
    body {
        font-family: 'Inter', sans-serif;

        background-color: var(--white);
        color: var(--black);

        display: grid;
        grid-template-areas: 
        "header"
        "main"
        "footer";

        grid-template-rows: 0.2fr 1fr 0.2fr;
    }

/* header */
    header {
        grid-area: header;

        display: flex;
        justify-content: space-between;

        padding: 2rem;
    }

    .calendar-view {
        display: flex;
        flex-direction: column;

        align-items: center;
    }

    .quick-remind {
        display: flex;
        flex-direction: row;
        gap: 1rem;

        align-items: center;

        background-color: var(--black);
        color: var(--white);
        padding: 0rem 1rem;
        border-radius: 780px;
        max-height: 3rem;
        
    }

    .close-view {
        display: flex;
        flex-direction: column;

        /* align-items: center; */
    }

/* main */
    main {
        grid-area: main;
    }

    .reminder-form-wrapper {
        display: none;
    }

    .reminder-form-wrapper.active {
        display: block;
    }

    .reminder-form-wrapper.hidden {
        display: none;
    }

/* buttons */
    button {
        display: flex;
        flex-direction: row;
        gap: 0.75rem;

        padding: 0.5rem 1rem;
        border: 2px solid var(--black);
        border-radius: 10px;

        background-color: var(--black);
        color: var(--white);

        transition: 0.5s transform ease, 0.02s background-color ease, 0.5s box-shadow ease;
        
        /* &:hover {
            background-color: var(--white);
            color: var(--black);

            transform: translateY(-2px);

            box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
        } */
    }
    
    button.light {

        padding: 0.5rem 1rem;
        border: 2px solid var(--black);
        border-radius: 10px;

        background-color: var(--white);
        color: var(--black);
    }


/* {% TEMPLATED %} */

/* default main sizing + centering */
    body {
        min-height: 100dvh;
    }

    main {
        display: grid;
    }

    .reminder-form-wrapper {
        place-content: center;

        max-width: 80dvw;
        margin: auto;

        justify-content: center;
        align-items: center;

    }

    .reminder-form-section {

        display: flex;
        flex-direction: row;

        gap: 1rem;
    }

    .reminder-form-question-number {
        font-size: 0.75rem;

        align-self: flex-start;
        margin-top: 0.45rem;

        display: grid;
        place-content: center;

        min-width: 2.5rem;
        aspect-ratio: 1 / 1;
        border: 3px solid var(--accent);
        border-radius: 5px;

        background-color: var(--white);
        color: var(--black);
    }

    .reminder-form {
        justify-content: center;
        align-items: center;

        display: flex;
        flex-direction: column;

        gap: 3.5rem;
    }

    .reminder-form-question-text {

        display: flex;
        flex-direction: column;

        .reminder-form-question {
            font-size: 1.25rem;
        }
    }

    .reminder-form-sub-text {
        color: var(--medium-grey);
    }

    .reminder-form-multiple-inputs {

        width: 100%;

        display: flex;
        justify-content: space-between;
        gap: 5rem;
    }

    .reminder-form-text-input {
  
        min-width: auto;

        display: flex;
        flex-direction: row;
        gap: 1rem;

        align-items: center;
        align-self: end;

        border: none;
        border-bottom: 1.5px solid var(--medium-grey);
        width: 100%;
        padding: 1rem;

        input {
            border: 0;
            outline: none;

            font-size: 1.25rem;
            width: 100%;
        }

        &:focus-within {
            border-bottom: 2px solid var(--black);
        }
    }

    .enter-button {
        align-self: flex-end;

        padding: 0.5rem 1rem;
        border: 2px solid var(--black);
        border-radius: 10px;

        background-color: var(--black);
        color: var(--white);

        transition: opacity 0.1s ease, transform 0.5s ease;

        &:hover {
            opacity: 0.8;
            transform: translateY(-1px);
        }
    }

    /* done slide - slide 3 */
    .reminder-form-section-done {
        h1 {
            font-size: 3.5rem;
        }
    }

    /* completion slide  - slide 4 */
    .reminder-form-final-message {
        display: flex;
        flex-direction: column;
        gap: 4.5rem;

        justify-content: center;
        align-items: center;

        text-align: center;

        h1 {
            font-size: 2.5rem;
        }
    }

    .reminder-form-options {
        display: flex;
        gap: 1rem;
    }

/* {% TEMPLATED %} */

/* footer */
    footer {
        grid-area: footer;
    }

    .made-with-love-section {
        display: flex;
        flex-direction: row;

        justify-content: center;
        align-items: center;

        gap: 0.3rem;

        .love-from {
            display: flex;
            align-items: center;

            gap: 0.3rem;
        }

        .signature {
            font-family: Kaushan Script;
            font-size: 1.25rem;

            transition: 1s transform ease, text-shadow 1s ease;

            &:hover {
                transform: translateY(-2px);
                text-shadow: 0px 2px 15px pink;
            }
        }
    }