html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
    font-family: 'Roboto', 'Open Sans', 'Lato', sans-serif;
	 color: #b8860b; /* Dark gold color for regular text */
}

h1 {
    text-align: center;
}

/* Style for unopened links */
a:link {
    color: #b8860b; /* Dark gold for unopened links */
    text-decoration: none; /* Optional: no underline */
}

/* Style for visited (opened) links */
a:visited {
    color: #d2b48c; /* Lighter gold shade for visited links */
    text-decoration: none; /* Optional: no underline */
}

/* Optional: Style for hover state */
a:hover {
    color: #daa520; /* Medium gold for hover */
    text-decoration: underline; /* Add underline on hover */
}

/* Optional: Style for active links (being clicked) */
a:active {
    color: #a0522d; /* Rich brownish gold for active links */
    text-decoration: none;
}

#closed-cracker, #open-cracker, .confetti-burster {
    position: absolute;
    left: 50%;
    top: 22%;
    transform: translate(-50%, 0);
}

#closed-cracker {
    background-image: url('images/closed-cracker.png');
    width: 756px;
    height: 141px;
}

#open-cracker {
    background-image: url('images/open-cracker.png');
    width: 868px;
    height: 137px;
}

.confetti-burster {
    width: 756px;
    height: 141px;
    z-index: 2;
}

#instructions {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-weight: bold;
    text-align: center;
}

h2 {
    font-size: 3em;
    margin: 0;
}

#flash {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #ffff60;
    z-index: 1;
    display: none;
}

.quote, .crown, .discussion, .drink, .tool, .problem {
    position: absolute;
    max-width: 350px;
    text-align: center;
}

.quote {
    right: 3%;
    top: 5%;
    transform: rotate(5deg);
}

.crown {
    left: 7%;
    bottom: 20%;
    transform: rotate(15deg);
}

.discussion {
    left: 50%;
    top: 5%;
    transform: translate(-50%, 0) rotate(-3deg);
}

.drink {
    right: 12%;
    bottom: 12%;
    transform: rotate(-11.5deg);
}

.drink img {
    max-height: 280px;
}

.tool {
    left: 10%;
    top: 8%;
    transform: rotate(-10deg);
}

.tool img {
    max-width: 400px;
}

.problem {
    left: 50%;
    top: 45%;
    max-width: 620px;
    transform: translate(-50%, 0);
}

.problem img {
    max-width: 600px;
    max-height: 280px;
}

div img {
    max-width: 200px;
    max-height: 200px;
}

p {
    text-align: center;
}

button {
    display: block;
    margin: 0 auto;
}

.paper {
    background: #FFFFFF;
    padding: 8px 10px;
    margin: 0;
    box-shadow: inset black 0 1px 17px -12px;
    text-align: center;
}

.paper::before, .paper::after {
    content: "";
    z-index: -1;
    position: absolute;
    bottom: 5px;
    height: 20px;
    width: 50%;
}

.paper::before {
    left: 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 16px 2px -2px;
    transform-origin: bottom right;
    transform: translate(0, -10px) rotate(-1.5deg);
}

.paper::after {
    right: 3px;
    box-shadow: rgba(0, 0, 0, 0.3) 0 16px 2px -2px;
    transform-origin: bottom left;
    transform: translate(0, -10px) rotate(2.5deg);
}

.confetti-burster::after {
    display: none;
    bottom: -75%;
    background-image:
        radial-gradient(circle, #00ff00 20%, transparent 20%),
        radial-gradient(circle, #0000ff 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #ff0081 15%, transparent 20%),
        radial-gradient(circle, #ffff00 20%, transparent 20%),
        radial-gradient(circle, #00ffff 20%, transparent 20%),
        radial-gradient(circle, #ff00ff 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
}

.confetti-burster::before, .confetti-burster::after {
    position: absolute;
    content: '';
    display: none;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: 1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
}

.confetti-burster::before {
    display: none;
    top: -75%;
    background-image:
        radial-gradient(circle, #00ff00 20%, transparent 20%),
        radial-gradient(circle, transparent 20%, #0000ff 20%, transparent 30%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ffff00 20%, transparent 20%),
        radial-gradient(circle, transparent 10%, #00ffff 15%, transparent 20%),
        radial-gradient(circle, #ff00ff 20%, transparent 20%),
        radial-gradient(circle, #00ffff 20%, transparent 20%),
        radial-gradient(circle, #ff0081 20%, transparent 20%),
        radial-gradient(circle, #ff0000 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
}

.confetti-burster.animate:before {
    display: block;
    animation: topBubbles ease-in-out 0.75s forwards;
}

.confetti-burster.animate:after {
    display: block;
    animation: bottomBubbles ease-in-out 0.75s forwards;
}

@keyframes 
topBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }
    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }
    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

@keyframes 
bottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }
    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }
    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}