body{
    background-image: url("Resources/flag1.jpg");
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
}
h1{
    color:white;
    font-family: "Ewert", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 90px;
}
ul{
    list-style-image: url('Resources/bullet.png');

}
.block1{
    display:flex;
    justify-content: center;

}

.block2{
    display:flex;
    justify-content: center;

}

.ewert-regular {
    font-family: "Ewert", serif;
    font-weight: 400;
    font-style: normal;
}
.paper{
    display:flex;
    justify-content: center;
    align-items: center;
    background-image: url("Resources/paper.jpg");
    background-size: cover;
    width: 40%;


}
.paper2{
    align-items: center;
    background-image: url("Resources/paper.jpg");
    background-size: cover;
    width: 90%;
    padding:10px;
}

.eagleImg{
    position: absolute;
    width: 1000px;
    top: 50%;
    left: -100%;
}

@keyframes slide {
    0% { left: -100%; top: -100%}
    100% { left: 150%; top: 150%}
}

.eagleAnimation{
    animation: slide 4s forwards;
}

#eagleButton{
    top: 20px;
    left: 20px;
}

#muteToggle {
    font-size: 1.2em; 
    padding: .1% .1%; 
    position: absolute; 
    right: 20px;
    top: 20px; 
}

#audioPrompt {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 100px 100px rgba(0, 0, 0, 0.7);
    text-align: center;
    border-radius: 8px;
}

#audioPrompt button {
    margin: 10px;
    padding: 10px 20px;
    font-size: 1em;
}

.backButton{
    font-size: 1.1em;
    font-family: "Ewert", serif;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 10px;
}