/*  Author: Tristan Scott
    Date: 2023/12/04        */

.myButtons {
    padding-top: 20vh;
    padding-left: 5vw;
    width: 2vw;
    height: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
}

.btn {
    background-color: green;
    color: white;
    min-width: 100px;
    min-height: 50px;
    width: 8vw;
    height: 2vw;
    margin: 1vw;
    padding: 25px;
    border-radius: 10px;

    font-family: Oswald;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);

    /* aligns text (and anything else) in the middle of the box */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    cursor: pointer;
}

.animation {
    min-width: 1080px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.seed {
    width: 25vh;
    height: 25vh;
    position: relative;
    animation: seed 2s ease-in-out infinite;
}

.sap {
    width: 25vh;
    height: 25vh;
    position: relative;
    animation: seed 2s ease-in-out infinite;
}

.adult {
    width: 25vh;
    height: 25vh;
    position: relative;
    animation: seed 2s ease-in-out infinite;
}

.minimal {

    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

}

.minimal a {
    text-decoration: none;
    /* color: rgb(211, 184, 238); */
    color: white;
    font-size: 20px;
    font-family: Oswald;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}

.minimal p {
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-family: Oswald;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;

    cursor: pointer;
}

@media screen and (max-width: 950px) {

    .minimal {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
    }

    .minimal a {
        font-size: 15px;
    }

    .minimal p {
        font-size: 15px;
    }

    #imageRender {
        width: 100vh;
        height: 100vh;
        position: fixed;
    }

    .myButtons {
        padding-top: 14vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }


}

@media screen and (max-width: 540px) {
    .animation {
        left: -100px;

        width: 100vh;

        height: 130vh;
    }


    .seed {
        width: 15vh;
        height: 15vh;
        position: relative;
        animation: seed 2s ease-in-out infinite;
    }

    .sap {
        width: 15vh;
        height: 15vh;
        position: relative;
        animation: seed 2s ease-in-out infinite;
    }

    .adult {
        width: 15vh;
        height: 15vh;
        position: relative;
        animation: seed 2s ease-in-out infinite;
    }

    .myButtons {
        padding-top: 1vh;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        left: 21vh;
    }

    .minimal {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        left: 20vh
    }

    .minimal a {
        color: rgb(211, 184, 238);
        font-size: 15px;
    }

    .minimal p {
        color: rgb(211, 184, 238);
        font-size: 15px;
    }

    #imageRender {
        width: 100vh;
        height: 130vh;
        position: absolute;
    }
}