/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;700&family=Diphylleia&display=swap');

/* GENERAL STYLES */
body {
    font-family: 'Alegreya Sans';
    margin: 0px;
}

section {
    margin: auto 0px;
}

.flex-column-center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    font-size: xx-large;
    padding-top: 27px;
    margin-top: 0px;
    background-image: linear-gradient(180deg, #8ccaf3, transparent);
    width: 100vw;
}

h1, h2, button {
    font-family: Diphylleia;
    text-align: center;
}

p {
    text-align: justify;
}

.white-text {
    color: white;
    text-shadow: black 1px 1px;
}
 
/* INFORMATION SECTION STYLES */
.instructions {
    max-width: 400px;
    margin: auto 15px;
}

.bed-size, .vegetable-card {
    background-image: url('../images/vegetable-bed.webp');
    background-size: cover;
    border-radius: 5%;
    width: 90%;
    max-width: 400px;
}

.black-opacity {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    border-radius: 5%;
    margin: 0;
    padding-bottom: 1rem;
}

.black-opacity div {
    display: flex;
    align-items: center;
    gap: 5px;
}

input {
    width: 30px;
    text-align: center;
}

/* The two rules below were taken from a StackOverflow post. Please refer to README. */
input[type='number'] {
    -moz-appearance:textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.vegetable-picker, .vegetable-card {
    margin-bottom: 1rem;
}

.vegetable-picker > div {
    display: flex;
    justify-content: center;
    width: 100vw;
}

.radio-under {
    margin: auto 1rem;
}

.radio-under img {
    display: none;
}

.buttons {
    gap: 20px;
    margin: 1rem auto;
}

button {
    border-radius: 3%;
}

#calculate, #recalculate {
    background-image: linear-gradient(#95c97e, #1c5c00);
    color: #f7ef81;
    text-shadow: #6c4e1e 1px 1px;
    font-size: large;
    padding: 8px 20px 12px;
    margin-bottom: 10px;
}

#clear {
    background-color: #f7ef81;
    color: #6c4e1e;
    margin-bottom: 17px;
}

#results {
    display: none;
}

/* RESULTS SECTION STYLES */
.vegetable-card {
    background-image: url('../images/onions-growing.webp');
}

ul {
    padding-left: 20px;
}

li {
    list-style: disc;
    padding-bottom: 5px;
    max-width: 90%;
}

.parent-list > li {
    list-style-type: none;
}

#vegetable-image {
    margin: 1rem;
    box-shadow: black 1px 1px 10px 3px;
}

#recalculate {
    background-image: linear-gradient(#1c5c00, #95c97e);;
    color: white;
}

/* FOOTER STYLES */
footer {
    font-family: Diphylleia;
    margin: 0px 10px 10px;
    width: 100%;
}

footer p {
    margin: 0px;
}

footer a {
    text-decoration: none;
}

/* Media Query for Tablets of width >= 768px */
@media screen and (min-width: 768px) {
    /* Two rules in the below style were taken from a Stack Overflow post. See README for full details. */
    body {
        background-image: url('../images/seedlings.webp');
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
        height: 100vh;
    }

    main {
        height: 100%;
    }

    h1 {
        background-image: none;
    }

    section {
        height: 890px;
    }
 
    .bed-size, .black-opacity {
        width: 400px;
        height: 200px;
    }

    .black-opacity {
        padding-bottom: 0px;
        height: 100%;
    }

    /* Information Section Styles on tablets and larger screens */
    #information {
        display: flex;
    }

    #information, #results {
        flex-direction: column;
        align-items: center;
        background-color: white;
        width: 600px;
    }

    .instructions {
        width: 400px;
    }

    .input-container {
        flex-direction: row;
        width: 400px;
        height: 60px;
        justify-content: space-evenly;
        margin-top: 1rem;
    }

    /* The code for the below class was found on Stack Overflow. See README for full details. */
    .vegetable-picker input {
        width: 0px;
        height: 0px;
        opacity: 0;
    }

    .radio-under img {
        display: inline;
        width: 75px;
    }

    /* The code for the below class was found on Stack Overflow. See README for full details. */
    .green-border {
        outline: 5px solid #1c5c00;
        outline-offset: -3px;
    }

    /* Results Section Styles on tablets and larger screens */
    .vegetable-card {
        height: 350px;
    }

    #card-contents {
        flex-direction: row;
    }

    #vegetable-image {
        width: 160px;
    }

    /* 404 Section Styles on tablets and larger screens */
    .h2-404 {
        font-size: xx-large;
    }
}