body {

    font-family: FG, sans-serif;

    text-align: center;

	font-size:20px;

    background-color: #f0f0f0;

	background-image:url(bg.png);

	background-size:cover;

	background-repeat:no-repeat;

}

@font-face {

  font-family: FG;

  src: url(fg.ttf);

}

@font-face{

	font-family:PT Sans;

	src: url(PT_Sans-Web-Regular.ttf);

}

h1 {

	font-family: FG;

	font-size: 40px;

	color:#fff

}

h2 {

	font-family: FG;

font-size:30px;

color: #fff;

	z-index:99;

}



h3 {

	font-family: FG;

font-size: 30px;

	color:#1930ab;

	text-align:center;

	padding-left:5%;

	padding-top:5%;

	padding-bottom:5%;

	padding-right:5%;

	background: #ffff00;

	border-style:solid;

	border-color:#fff;

	border-radius:50px;

	margin:auto;

	margin-top:-2%;

	margin-bottom:5%;

	font-style:italic;



}

h4 {

	font-size: 20px;

	color:#fff;

	font-style:italic;

}

#container1 {
	margin-top:5%;
	background-position: right 49% bottom 50%;
	height:800px;
	width:100%;
}

#quiz-container {
	
	position:absolute;

  left: 50%;

	transform: translate(-50%, 10%);

    margin: 0;
	padding-top:5%;
	padding-left:5%;
	padding-right:5%;

    border-radius: 10px;

    box-shadow: none;
    width: 70%;

}

#fit {
	    display: block;
    margin: 20px auto 50px auto; /* Center the image and add space above it */
    width: 100%; /* Adjust the width as needed */
    max-width: 100%;
    height: auto;
	padding-top:5%;
}


button {

    margin: 10px;

	width:80%;

    padding: 10px 20px;

    font-size: 25px;

    cursor: pointer;

	color:#fff;

	border-radius:10px;

	border-color: #fff;

	border-width: 0px;

	border-style: solid;

	padding-left:2%;

	padding-right:2%;

	font-family:FG;
	background-color:#1930ab;
	text-align:center!important;

}

.start {

background-color: #262524;

}

.choose {

	background-color:#262524;

	color: #fff;

}

#fullscreen-button {

    position: fixed;

    top: 10px;

    right: 10px;

    background: none;

    border: none;

    cursor: pointer;

    padding: 5px;

    border-radius: 50%;

    transition: background-color 0.3s;

}

/* Style the play button */
#play-sound-button {
    display: flex;
    align-items: center; /* Vertically center items */
    justify-content: center; /* Center content horizontally if needed */
    gap: 10px; /* Add space between the image and text */
    background-color: #1930ab; /* Add button background */
    border: 2px solid #1930ab; /* Add border */
    border-radius: 8px; /* Rounded corners */
    padding: 10px 20px; /* Add padding */
    cursor: pointer; /* Pointer cursor */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
    transition: all 0.2s ease-in-out; /* Smooth transition */
    width:30%;
    transform: translate(110%, 50%);
}

/* On hover, change background color */
#play-sound-button:hover {
    background-color: #3c57f5;
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
}

/* Style the image */
#play-sound-button img {
    width: 30px; /* Adjust image size */
    height: 30px; /* Maintain aspect ratio */
}

/* Style the text */
#play-sound-button span {
    font-size: 30px; /* Adjust text size */
    font-weight: bold; /* Make text bold */
    color: #fff; /* Text color */
}

@media (max-width: 600px) {
    #play-sound-button {
        flex-direction: column; /* Stack image and text vertically */
        padding: 10px;
    }

    #play-sound-button img {
        width: 40px; /* Smaller icon */
        height: 40px;
    }

    #play-sound-button span {
        font-size: 16px; /* Smaller text */
    }
}



#fullscreen-button svg {

    fill: #007BFF;

}



#fullscreen-button:hover {

    background-color: rgba(0, 123, 255, 0.1);

}



#fullscreen-button:focus {

    outline: none;

}



#fullscreen-dialog {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.8);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 10px;

    z-index: 1000;

    color: white;

}



#fullscreen-dialog-content {

    display: flex;

    align-items: center;

}



#fullscreen-dialog-content p {

    margin: 0 10px 0 0;

}



#fullscreen-dialog-content button {

    margin: 0 5px;

    padding: 10px 20px;

    background-color: #007BFF;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    transition: background-color 0.3s;

}



#fullscreen-dialog-content button:hover {

    background-color: #0056b3;

}



#fullscreen-dialog-content button:focus {

    outline: none;

}

#additional-text {
	display:none;
}
#question {
	display: block;
	text-align:left;
	padding-top: 5%;
    padding-left:40px;
	padding-right:40px;
	margin-left:10px;
	margin-right:10px;
}
#additional-win-description {
	
	background:#ffff00!important;
	margin:auto;

	width:76%;

    font-size: 40px;

    cursor: pointer;

	color:#1930ab;

	border-radius:10px;

	border-color: #fff;

	border-width: 0px;

	border-style: solid;

	padding-left:2%;

	padding-right:2%;
	padding-bottom: 20px;
	padding-top:20px;
	font-family:FG;
	text-align:center!important;
	margin-bottom:5%!important;
}

#container2{
	
}
#result-message {
	padding-left:15%;
	padding-right:15%;
	padding-top:5%;
}