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:none;

}

@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: 30px;

	color:#fff

}

h2 {

	font-family: FG;

font-size:30px;

color: #fff;

	z-index:99;

}



h3 {

	font-family: FG;

font-size: 30px;

	color:#fff;

	text-align:center;

	padding-left:5%;

	padding-top:5%;

	padding-bottom:5%;

	padding-right:5%;

	background: linear-gradient(180deg, rgba(248,189,215,1) 0%, rgba(235,98,164,1) 36%, rgba(236,33,85,1) 100%);

	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-image:url(qbg.png);

	background-size:contain;

	background-repeat:no-repeat;
	background-position: right 49% bottom 50%;
	height:800px;
	width:100%;
}

#quiz-container {
	
	position:absolute;

  left: 50%;

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

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

    border-radius: 10px;

    box-shadow: none;

}

#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:#262524;
	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;

}



#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: linear-gradient(90deg, rgba(0,110,178,1) 0%, rgba(226,0,30,1) 100%);
	margin:auto;

	width:76%;

    font-size: 40px;

    cursor: pointer;

	color:#fff;

	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%;
}