@charset "UTF-8";

@media (max-width:768px) {
    h1 {
        visibility: hidden;  
        margin-bottom: -3.5em;  
    }

    h2 {
        font-size: 32;
    }
    #Skyler{
        visibility: visible;
        transform: translate(-50%, -90%);
        width: 3em;
        height: 3em;
        float: none;
        vertical-align: middle;
        margin-left: 50%;
        margin-right:50%;
        
    }

    nav a {
            background-color: royalblue; /* Bright yellow for a fun, playful vibe */
            border: 3px solid yellow; /* Orange border for contrast */
            border-radius: 24px; /* Rounded corners for a softer look */
            padding: 48px;
            margin: 6px;
            text-align: center;
            font-size:18;  
    }


    form{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        flex-basis: 100px;
        flex-shrink: 1.5;
        flex-grow: 1.5;
        text-align: left;
        font-size: larger;

    }

    form input{
        max-width: 66%;
        height: 2em;
        margin: 1em;
    }


    legend{
        text-align: center;
        font-size: medium;
    }
    label{
        font-size: small;
        display: block;
    }

    #Gender {
        display: flex;
    }


    input[type="checkbox"]{
        width: 30px;
    }

    select{
        font-family: 'comic sans ms', sans-serif;
        color: royalblue;
        font-size: medium;
    }

    select:focus{
        background-color: yellow;

    }


    .Gallery img::hover{
        cursor: pointer;
        transform: scale(2,2);
        transition-duration: 1s;
    }

    .StarSection{
        display: flex;
        flex-direction: column;
        z-index: -1; /*Prevents jankiness if a user views an image */

    }


    .StarSection img {
        display: none;  /*Was getting messy, so just hid it */
    }

    .StarSection video {

        /*
        Reflect effect:
        Source - https://stackoverflow.com/a/2447650
        Posted by Barrie Reader
        Retrieved 2026-03-29, License - CC BY-SA 2.5
        */

        -webkit-box-reflect:
        below 5px 
        -webkit-gradient(linear, left top, left bottom, from(transparent), 
        color-stop(0.5, transparent), 
        to(rgba(255, 255, 255, 0.5)));
    }
}