body {
    background-image: url("../assets/summerbeach.jpg");
}

* {
    font-family: 'Anek Devanagari', sans-serif;
    font-family: 'Josefin Sans', sans-serif;
    font-family: 'Passion One', cursive;
}


#title {
    text-align: center;
    margin-top: 5%;
    font-size: 400%;
    color: white;
    -webkit-text-stroke: 1px black;
}

main p {
    font-size: 300%;
    text-align: center;
    color: white;
    -webkit-text-stroke: 1px black;
}

#questions {
    font-size: 70%;
    justify-content: center;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}


#trademark {
    margin-top: 1%;
}

#socialmedia {
    margin-top: 0.5%;
}

.question {
    cursor: pointer;
    margin: auto;
    margin-top: 5%;
    background: #00000074;
    border: 2px solid gold;
}

.question:hover {
    transform: scale(1.05);
}

.answer {
    display: none;
    animation: answerAnimation 2s;
    width: fit-content;
    margin: auto;
    margin-bottom: 5%;
}

@keyframes answerAnimation {
   0% {opacity: 0};
   25% {opacity: .25}
   50% {opacity: .5}
   75% {opacity: .75}
   100% {opacity: 1;}
   from {margin-top: -5%}
   to {margin-top: 5%;}
   from {background-color: white;}
   to {background-color: transparent;}
}

.imagecontainer {
    display: flex;
    justify-content: space-between;
    margin: auto;
    margin-bottom: 5%;
    margin-top: 5%;
}

.image {
    margin: auto;
    width: 50%;
}

.answer img {
    box-shadow: 0 10px 20px rgba(230, 221, 221, 0.9), 0 6px 6px rgba(0, 0, 0, 0.3); /* Dual shadow effect */
    margin-bottom: 3%;
    margin-left: 5%;
}

.answer img:hover {
    box-shadow: 0 10px 20px rgba(230, 221, 221, 0.9), 0 6px 6px rgba(0, 0, 0, 0.3); /* Dual shadow effect */
    scale: 1.1;
}


@media (max-width: 800px) {
#questions {
    font-size: 50%;
    justify-content: center;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}
#description {
    font-size: 200%;
}
main p {
    font-size: 300%;
    text-align: center;
    color: white;
    -webkit-text-stroke: 0px black;
}

}