*{
    margin:0;
    padding:0;
    color: #FFF0C4;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

body{
    background-color:#3E0703;
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.container{
    padding: min(100px, 5vh);
    background-color: #660B05;
    /*background-image: url(https://i.ibb.co/svF6w9zK/01-lace-border-frame-on-a-red-background-removebg-preview.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1040px 450px;*/
    text-align: center;
    margin: 5vh auto;
    width: min(80%, 800px);
    border-radius: 15px;
    box-sizing: border-box;
}

.minisquare{
    margin: 0;
    background-color: #8C1007;
    padding: min(90px, 5vh);
    border-radius: 15px;
    box-sizing: border-box;
}

.square{
    border-radius: 15px;
}

input{
    padding: min(30px, 3vh) min(30px, 5vw);
    font-size: min(40px, 6vw);
    background-color: #FFF0C4;
    color: #3E0703;
    border: none;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    width: min(100%, 400px);
    box-sizing: border-box;
}

#submit{
    background-color: #FFF0C4;
    color: #660B05;
    padding: min(10px, 2vh) min(20px, 3vw);
    border: none;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    width: min(100%, 400px);
    box-sizing: border-box;
}
#submit:hover{
    background-color: #660B05;
    color: #FFF0C4;
    cursor: pointer;
}

#next, #back{
    padding: min(10px, 2vh) min(20px, 3vw);
    font-size: min(40px, 6vw);
    background-color: #660B05;
    color: #FFF0C4;
    border: none;
    border-radius: 15px;
    margin-top: min(30px, 4vh);
    width: min(100%, 400px);
    box-sizing: border-box;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent; /* for iOS tap effect */

    &:hover{
        background-color: #FFF0C4;
        color: #660B05;
    }

    /* Add active state for touch devices */
    &:active{
        background-color: #FFF0C4;
        color: #660B05;
        transform: scale(0.98);
    }
}

#square{
    border: #660B05 solid 2px;
    background-color: #660B05;
    width: min(500px, 90vw);
    height: min(500px, 90vw);
    padding: min(20px, 3vw);
    margin: 20px auto;
    align-content: center;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    transition: 0.3s ease-out;
    font-size: min(25px, 4vw);
    box-sizing: border-box;

    &:hover{
        transform: translateY(-5px);
    }
}

#notes{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: min(20px, 3vw);
}

#messages{
    margin-top: min(20px, 3vh);
    padding: min(15px, 2vw);
    box-sizing: border-box;
    
    h1{
        font-size: min(60px, 8vw);
        text-align: center;
        line-height: 1.2;
        margin-bottom: min(20px, 3vh);
    }
}

.confetti-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

@keyframes confetti-fall{
    0%{
        transform: translateY(-100%)rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.8;
    }
}

.confetti-piece{
    position: absolute;
    width: min(10px, 2vw);
    height: min(20px, 4vw);
    background: var(--confetti-color, red);
    opacity: 0.9;
    animation: confetti-fall var(--fall-duration, 4s) linear infinite;
    will-change: transform; /* Optimize animation performance */
    transform: translateZ(0); /* Standard transform */
    -webkit-transform: translateZ(0); /* iOS animation performance */
}

.confetti-piece:nth-child(1) {
  left: 10%;
  --confetti-color: #ff6347;
  --fall-duration: 3s;
}
.confetti-piece:nth-child(2) {
  left: 25%;
  --confetti-color: #ffa500;
  --fall-duration: 5s;
}
.confetti-piece:nth-child(3) {
  left: 40%;
  --confetti-color: #32cd32;
  --fall-duration: 4.5s;
}
.confetti-piece:nth-child(4) {
  left: 60%;
  --confetti-color: #1e90ff;
  --fall-duration: 3.5s;
}
.confetti-piece:nth-child(5) {
  left: 80%;
  --confetti-color: #ff69b4;
  --fall-duration: 6s;
}

#photonvid{
    padding: 20px 40px;
    border-radius: 15px;
    font-size: 100px;
    color: #FFF0C4;
    background-color: #660B05;
    border: none;
    
    &:hover{
        background-color: #FFF0C4;
        color: #660B05;
        cursor: pointer;
    }
}

#smallwar{
    margin-top: 20px;
}