* {
	margin: 0;
	padding: 0;
}
@font-face {
	font-family: sanfransisco;
	src: url(SF-Pro-Rounded-Medium.otf);
}
@font-face {
	font-family: sf-bold;
	src: url(SF-Pro-Rounded-Bold.otf);
}
button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
a {
	animation : none;
	animation-delay : 0;
	animation-direction : normal;
	animation-duration : 0;
	animation-fill-mode : none;
	animation-iteration-count : 1;
	animation-name : none;
	animation-play-state : running;
	animation-timing-function : ease;
	backface-visibility : visible;
	background : 0;
	background-attachment : scroll;
	background-clip : border-box;
	background-color : transparent;
	background-image : none;
	background-origin : padding-box;
	background-position : 0 0;
	background-position-x : 0;
	background-position-y : 0;
	background-repeat : repeat;
	background-size : auto auto;
	border : 0;
	border-style : none;
	border-width : medium;
	border-color : inherit;
	border-bottom : 0;
	border-bottom-color : inherit;
	border-bottom-left-radius : 0;
	border-bottom-right-radius : 0;
	border-bottom-style : none;
	border-bottom-width : medium;
	border-collapse : separate;
	border-image : none;
	border-left : 0;
	border-left-color : inherit;
	border-left-style : none;
	border-left-width : medium;
	border-radius : 0;
	border-right : 0;
	border-right-color : inherit;
	border-right-style : none;
	border-right-width : medium;
	border-spacing : 0;
	border-top : 0;
	border-top-color : inherit;
	border-top-left-radius : 0;
	border-top-right-radius : 0;
	border-top-style : none;
	border-top-width : medium;
	bottom : auto;
	box-shadow : none;
	box-sizing : content-box;
	caption-side : top;
	clear : none;
	clip : auto;
	color : inherit;
	columns : auto;
	column-count : auto;
	column-fill : balance;
	column-gap : normal;
	column-rule : medium none currentColor;
	column-rule-color : currentColor;
	column-rule-style : none;
	column-rule-width : none;
	column-span : 1;
	column-width : auto;
	content : normal;
	counter-increment : none;
	counter-reset : none;
	cursor : auto;
	direction : ltr;
	display : inline;
	empty-cells : show;
	float : none;
	font : normal;
	font-family : inherit;
	font-size : medium;
	font-style : normal;
	font-variant : normal;
	font-weight : normal;
	height : auto;
	hyphens : none;
	left : auto;
	letter-spacing : normal;
	line-height : normal;
	list-style : none;
	list-style-image : none;
	list-style-position : outside;
	list-style-type : disc;
	margin : 0;
	margin-bottom : 0;
	margin-left : 0;
	margin-right : 0;
	margin-top : 0;
	max-height : none;
	max-width : none;
	min-height : 0;
	min-width : 0;
	opacity : 1;
	orphans : 0;
	outline : 0;
	outline-color : invert;
	outline-style : none;
	outline-width : medium;
	overflow : visible;
	overflow-x : visible;
	overflow-y : visible;
	padding : 0;
	padding-bottom : 0;
	padding-left : 0;
	padding-right : 0;
	padding-top : 0;
	page-break-after : auto;
	page-break-before : auto;
	page-break-inside : auto;
	perspective : none;
	perspective-origin : 50% 50%;
	position : static;
	/* May need to alter quotes for different locales (e.g fr) */
	quotes : '\201C' '\201D' '\2018' '\2019';
	right : auto;
	tab-size : 8;
	table-layout : auto;
	text-align : inherit;
	text-align-last : auto;
	text-decoration : none;
	text-decoration-color : inherit;
	text-decoration-line : none;
	text-decoration-style : solid;
	text-indent : 0;
	text-shadow : none;
	text-transform : none;
	top : auto;
	transform : none;
	transform-style : flat;
	transition : none;
	transition-delay : 0s;
	transition-duration : 0s;
	transition-property : none;
	transition-timing-function : ease;
	unicode-bidi : normal;
	vertical-align : baseline;
	visibility : visible;
	white-space : normal;
	widows : 0;
	width : auto;
	word-spacing : normal;
	z-index : auto;
	/* basic modern patch */
	all: initial;
	all: unset;
}
input,
textarea,
button,
select,
a,.button {
    -webkit-tap-highlight-color: transparent;
}
html, body {
	height: 100%;
	background-color: #080808;
	color: #f0f0f0;
	font-family: sanfransisco;
	letter-spacing: 0.6px;
}
.firstpage {
	height: 100%;
	width: auto;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	align-items: center;

	font-family: sf-bold;
	letter-spacing: 0.5px;
}
.header {
	display: flex;
	flex-direction: row;
	align-content: center;
	align-items: center;
	font-family: sf-bold;
}
.headerimg img {
	border-radius: 50%;
	margin: 10px;
	height: 40px;
}
.middle {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	align-items: center;
}
.sponsor {
	position: absolute;
	right: 10px;
	background-color: #77DD77;
	color: #080808;
	font-size: 14px;
	width: auto;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 15px;
}
.name, .description {
	width: 90%;
	margin-bottom: 20px;
}
.name {
	font-size: 25px;
}
.name span {
	color: #53baff;
}
#start {
	padding: 10px;
	background-color: #2ea4f3;
	border-radius: 15px;
	cursor: pointer;
}

/* test */
#test {
	padding-top: 20px;
	/* display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; */
}
#test h2 {
	padding: 10px;
	padding-top: 0;
	padding-bottom: 15px;
	font-size: 25px;
}
.part {
	display: flex;
	flex-direction: row;
	padding: 10px;
	padding-top: 0px;
}
.left {
	display: flex;
	flex-direction: column;
	margin-right: 10px;
	align-items: center;
}
.pp {
	width: 50px;
	border-radius: 50%;
}
.stick {
	width: 3px;
	height: 100%;
	background-color: #333639;
	border-radius: 4px;
	margin: 10px 0 0 0;
}
.right {
	display: flex;
	flex-direction: column;
	margin-right: 20px;
	padding-bottom: 20px;
}
.text {
	/* margin: 12px 0 25px 0px; */
	margin-top: 1px;
}
.image {
	width: 100%;
	border-radius: 15px;
	margin-top: 12px;
}
.answer {
	padding: 4px;
	font-size: 16px;
	letter-spacing: 0.6px;
	cursor: pointer;
	margin-top: 7px;
	width: 100%;
	/* background-color: #2ea4f3; */
	border: 1px solid #53baff;
	border-radius: 15px;
	transition: all 0.3s ease; 
}
.answer.checked {
	background-color: #2ea4f3;
	transition: all 0.3s ease; 
}
.answer.disabled {
	color: #6d6d6d;
	border: 1px solid #333639;
	transition: all 0.3s ease; 
}

/* sonuc */
.result {
	height: 110%;
	margin-left: 15px;
	display: flex;
	align-items: center;
}
.button {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #2ea4f3;
	border-radius: 50px;
	font-size: 18px;
	cursor: pointer;
	width: 85%;
	padding: 10px;
	font-family: sf-bold;
	margin-left: 20px;
}
.result h3 {
	margin-top: 30px;
	font-size: 20px;
	font-family: sf-bold;
}
.resultscreen {
	margin-top: 0px;
	margin-bottom: 25px;
	padding-top: 10px;
	opacity: 0;
	visibility: hidden; /* Görünürlüğü kontrol eder */
	transition: opacity 0.8s ease-in-out, visibility 0s 0.8s; /* Opacity geçişi ve gecikmeli görünürlük */
}
.resultscreen.visible {
	opacity: 1; /* Görünür hale getir */
	visibility: visible; /* Görünürlüğü aç */
	transition: opacity 0.8s ease-in-out, visibility 0s 0s; /* Gecikmesiz görünürlük */
}
#sonuc {
	margin-top: 15px;
	font-size: 90px;
	color: #40b3ff;
}
#aciklama {
	font-size: 20px;
}

.loading {
	font-size: 20px;
	color: #53baff;
	text-align: center;
	margin: 20px 0;
	animation: pulse 1s infinite ease-in-out;
}

@keyframes pulse {
	0%, 100% {
			opacity: 0.5;
	}
	50% {
			opacity: 1;
	}
}