/* ===== IMPORT RETRO FONT ===== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ===== RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== BODY ===== */
body {
    font-family: 'Press Start 2P', cursive;

    /* phone-sized layout */
    width: 100%;
    max-width: 430px;
    min-height: 100vh;

    margin: auto;
    padding: 20px;

    overflow-x: hidden;

    color: white;

    /* BACKGROUND IMAGE */
    background: linear-gradient(to bottom, #FFDAB9, #FFB6C1, #ADD8E6, #FFDAB9);

}
body::before {
    content: "";

    position: fixed;
    inset: 0;

   

    z-index: -1;
}

/* ===== CENTER CONTENT ===== */
center {
    width: 100%;
}

/* ===== HEADINGS ===== */
h2 {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #ffffff;

    text-shadow:
        0 0 5px #ff66c4,
        0 0 10px #ff66c4;
}

/* ===== QUESTIONS ===== */
#rule {
    font-size: 0.9rem;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #ffe066;
    text-shadow:        
        0 0 5px #000000,
        0 0 10px #000000;;
}

/* ===== INPUTS ===== */
#password,
#date {
    width: 100%;
    padding: 16px;

    border-radius: 14px;
    border: 3px solid #00ffe1;

    background: #1a1a1a;
    color: white;

    font-size: 0.8rem;
    font-family: 'Press Start 2P', cursive;

    text-align: center;

    outline: none;

    box-shadow:
        0 0 10px rgba(0,255,225,0.5);
}

/* ===== BUTTONS ===== */
#btn,
#yes,
#dodgeBtn {
    width: 80%; 
    padding: 18px;
    margin: auto;
    border: none;
    border-radius: 16px;

    font-size: 0.8rem;
    font-family: 'Press Start 2P', cursive;

    cursor: pointer;

    background: linear-gradient(
        45deg,
        #ff00cc,
        #33e4ff
    );

    color: white;

    transition: 0.2s ease;

    box-shadow:
        0 0 10px rgba(255,0,200,0.5);
}

/* ===== BUTTON HOVER ===== */
#btn:hover,
#yes:hover,
#dodgeBtn:hover {
    transform: scale(1.03);
}
#yes{
    width: 100%;
}

/* ===== IMAGE ===== */
#questionImage {
    width: 100%;
    max-width: 320px;

    margin-top: 25px;
    
    border-radius: 20px;

    border: 4px solid #ff66c4;

    box-shadow:
        0 0 20px rgba(255,102,196,0.5);
}

/* ===== FEEDBACK ===== */
#feedback {
    margin-top: 20px;

    font-size: 0.75rem;
    line-height: 1.7;

    min-height: 40px;
}

/* ===== HINT ===== */
#hint {
    margin-top: 10px;

    color: #00ffe1;

    font-size: 0.7rem;
    line-height: 1.6;
}

/* ===== MULTIPLE CHOICE ===== */
#multi {
    width: 100%;
    margin-top: 10px;
}

/* ===== OPTION LABELS ===== */
#multi label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-bottom: 18px;

    padding: 12px;

    border: 2px solid #444;
    border-radius: 16px;

    background: #1b1b1b;

    transition: 0.2s ease;
}

/* ===== OPTION HOVER ===== */
#multi label:hover {
    border-color: #00ffe1;
    transform: scale(1.02);
}

/* ===== RADIO BUTTON ===== */
#multi input[type="radio"] {
    transform: scale(1.5);
}

/* ===== OPTION IMAGES ===== */
#multi img {
    width: 120px;
    border-radius: 14px;
}
/* disappearing button */
#dodgeBtn {
    position: absolute;
}

#dodgeBtn:hover {
    transform: scale(1.05);
}

/* ===== MOBILE FIXES ===== */
@media (max-width: 480px) {

    body {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    position: relative;
    }

    h2 {
        font-size: 1.1rem;
    }

    #rule {
        font-size: 0.75rem;
    }

    #password,
    #date,
    #btn,
    #yes {
        font-size: 0.65rem;
    }

    #multi img {
        width: 90px;
    }
}