@font-face {
    font-family: 'Speedee-Bold';
    src: url('../fonts/Speedee-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'SpeedeeCondensed-Black';
    src: url('../fonts/SpeedeeCondensed-Black.ttf') format('truetype');
}
@font-face {
    font-family: 'Speedee-Regular';
    src: url('../fonts/Speedee-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'UberMove-Regular';
    src: url('../fonts/UberMove-Regular.otf') format('opentype');
}

body, html {
	margin: 0;
    font-family: 'Speedee-Regular', sans-serif;
	 background-size: cover;
    text-align: center; 
    background-color: #fff;
    color: #333;
    margin: 0;
    padding: 0;
    overflow: hidden;
	display: flex;
    flex-direction: column;
    align-content: space-around;
    justify-content: flex-start;
    align-items: center;
}
/*To prevent highlight of the selection - Start */
* {
	margin: 0;
    padding: 0;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
	-webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
	outline: none !important;
	-webkit-touch-callout: none; /* Disable long-press context menu on iOS */
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */

}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    padding: 0;
}

.screen {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
   /* background-color: lightgrey; /* Debug background */
   /* border: 2px solid black; /* Debug border */
}

.screen.active {
    display: flex;
}

.hidden {
    display: none;
}

#intro-screen {
    background: url('../images/bg.png') no-repeat center center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
   /* border: 2px solid red; /* Debug border */
}

#intro-screen .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
    justify-content: center;
    width: 100%;
}

#intro-logo {
    margin-top: 20px;
    width: 150px;
}

h1 {
     font-size: 1.5em;
   margin: 5% 0 0 0;
	font-family: 'SpeedeeCondensed-Black';
}

h1.animate-top {
    animation: slideInTop 1s forwards;
}

.yellow-line {
    width: 50px;
    height: 4px;
    background-color: #FFB700;
}

#intro-globe {
    margin: 20px 0;
    width: 150px;
	margin-bottom: 50%;
}

#intro-screen button {
    background-color: #fff;
    color: #DB1121;
    border: none;
    padding: 3px 0 0 0; /* Remove padding */
    margin-bottom: 10%;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 12px;
    width: 60%;
    max-width: 300px;
    text-align: center;
    font-family: 'Speedee-Bold';
    line-height: 50px; /* Adjust this to match the desired button height */
    height: 50px; /* Set the button height */
    display: inline-block; /* Ensure inline-block display */
}

#intro-screen p{
	font-family: 'Speedee-Regular';
}

/*button {
    background-color: #DB1121;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 14px;
    width: 100%;
    max-width: 300px;
	font-family: 'Speedee-Bold';
}*/

button {
    background-color: #DB1121;
    color: #fff;
    border: none;
    padding: 3px 20px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 14px;
    width: 100%;
    max-width: 300px;
    font-family: 'Speedee-Bold';
	line-height: 40px; /* Adjust this to match the desired button height */
    height: 40px; /* Set the button height */
	display: inline-block; /* Ensure inline-block display */
}

button.animate-bottom {
    animation: slideInBottom 1s forwards;
}

.footer {
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
	color: #fff;
   
}

.footer p {
    margin: 0;
    font-size: 12px;
	font-family: 'Speedee-Regular';
}

.footer a {
    color: #fff;
    text-decoration: underline;
	font-family: 'Speedee-Regular';
}

#uber-link {
	font-family: 'UberMove-Regular';
}


#quiz-screen {
    text-align: center;
   /* border: 2px solid green; /* Debug border */
    background-color: white; /* Debug background */
	font-family: 'SpeedeeCondensed-Black';
}

#logo {
    margin-top: 20px;
    width: 150px;
}

#question-image {
    margin: 20px 0;
    width: 300px;
    height: auto;
}

#footer-logo {
    margin-top: 20px;
    width: 150px;
}

.options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 300px;
}

button.correct {
   /* background-color: green;*/
}

button.wrong {
    /*background-color: blue;*/
}

@keyframes slideInTop {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* Result Screen Styles */
#result-screen {
    background-color: #DB1121; /* Red background */
    color: #fff; /* White text */
    justify-content: center;
    flex-direction: column;
    align-content: space-around;
    justify-content: flex-start;
    align-items: center;
}

#result-logo {
   margin-top: 20px;
   width: 150px;
}

#result-title {
    font-size: 24px;
    margin: 20px 0;
	font-family: 'SpeedeeCondensed-Black';
}

#result-subtitle {
    font-size: 18px;
    margin: 10px 0;
	font-family:'Speedee-Regular';
}

#result-image {
    margin: 20px 0;
    width: 300px;
    height: auto;
}

#order-now {
    background-color: #fff;
    color: #DB1121;
    border: none;
    padding: 3px 0 0 0;
    cursor: pointer;
    font-size: 16px;
    border-radius: 14px;
    width: 100%;
    max-width: 300px;
	font-family: 'Speedee-Bold';
	line-height: 50px; /* Adjust this to match the desired button height */
    height: 50px; /* Set the button height */
    display: inline-block; /* Ensure inline-block display */
}  

#order-now:hover {
    background-color: #f2f2f2;
}

#result-screen .footer {
    bottom: 0;
    width: 100%;
    color: #fff;
}

.header {
   text-align: center;
   padding: 5% 10% 0 10%;
  
}
.bottom-content {
    position: fixed; /* Makes the element stick in place */
    bottom: 0; /* Aligns it to the bottom of the viewport */
    width: 100%; /* Ensures it stretches across the screen width */
    text-align: center; /* Centers the content within the element */
    background-color: hsl(0deg 0% 0% / 0%); /* Optional: Apply a background color to ensure visibility */
    padding: 0 0 5% 0; /* Adjusts spacing around the content */
}
.btm {
	/* media Query */
	display: flex;
	font-size: 1em;
	/*padding: 10px; /* Add padding to prevent cropping */
	align-content: flex-start;
	flex-direction: column;
	width: 100%;
	color: white;
	align-items: center;
	flex-wrap: nowrap;
	font-size: 0.8em;
}

.btm a {
	color: white;
    text-decoration: underline;
}

.btm a:hover {
    text-decoration: underline;
}

/* 
Verified devices
iphone 15 pro - OK
iphone 15 pro max - NOK
iphone 15 - NOK
iphone 13 - NOK
iphone X - NOK
Pixel 7 pro, Pixel 6 pro - NOK
Pixel 7, Pixel 6 - NOK
one plus nord 2- NOK
*/

/* Styles for most iPhones */
  @media only screen 
  and (min-device-width: 320px) 
  and (min-device-height: 568px) 
  and (-webkit-device-pixel-ratio: 3) {
	  #logo {
		margin-top: 20px;
		width: 100px;
	}
	#result-logo {
	   margin-top: 20px;
	   width: 100px;
	}
	#footer-logo {
    /*margin-top: 20px;*/
    width: 100px;
	}
	#intro-screen button{
		padding: 0 0 0 0; /* Remove padding */
	}
	button {
    padding: 0 20px;
	}
	#order-now {
    padding: 0 0 0 0;
	}
  /* Styles for 
iphone 15 pro max
iphone 14 pro max
iphone 13 pro max
iphone 12 pro max
iphone 11 pro max
iphone 11*/
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 430px) 
  and (min-device-height: 896px) 
  and (max-device-height: 932px) 
  and (-webkit-device-pixel-ratio: 2), 
  only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 430px) 
  and (min-device-height: 896px) 
  and (max-device-height: 932px) 
  and (-webkit-device-pixel-ratio: 3) {
	  	  #logo {
		margin-top: 20px;
		width: 150px;
	}
	#result-logo {
	   margin-top: 20px;
	   width: 150px;
	}
	#footer-logo {
    margin-top: 20px;
    width: 150px;
	}
	#intro-screen button{
		margin-bottom: 10%;
		padding: 0 0 0 0; /* Remove padding */
	}
	button {
    padding: 0 20px;
	}
	#order-now {
    padding: 0 0 0 0;
	}
	  
  }
  
  /* iPhone X */
@media only screen 
  and (device-width: 375px) 
  and (device-height: 812px) 
  and (-webkit-device-pixel-ratio: 3) {
  #logo {
		margin-top: 20px;
		width: 80px;
	}
	#result-logo {
	   margin-top: 20px;
	   width: 80px;
	}
	#footer-logo {
    /*margin-top: 20px;*/
    width: 80px;
	}
	#intro-screen button{
		/*margin-bottom: 10%;*/
		padding: 0 0 0 0; /* Remove padding */
	}
	button {
    padding: 0 20px;
	}
	#order-now {
    padding: 0 0 0 0;
	}
}
  
  /* Pixel 7, Pixel 6 */
@media only screen 
  and (device-width: 412px) 
  and (device-height: 915px) { 
  #intro-screen button{
		/*margin-bottom: 10%;*/
		padding: 3px 0 0 0; /* Remove padding */
	}
  }
  
  /* Xiaomi Mi 11, Nord 2*/
@media only screen 
  and (min-device-width: 320px) 
  and (min-device-height: 568px)
  and (-webkit-device-pixel-ratio: 2){ 
  #intro-screen button{
		/*margin-bottom: 10%;*/
		padding: 3px 0 0 0; /* Remove padding */
	}
  }