@font-face {
    font-family: 'TripleBahrain';
    src: url('../fonts/DINOT-Medium.woff2') format('woff2'),
        url('../fonts/DINOT-Medium.woff') format('woff'),
        url('../fonts/DINOT-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TripleBahrain';
    src: url('../fonts/DINOT-Bold.woff2') format('woff2'),
        url('../fonts/DINOT-Bold.woff') format('woff'),
        url('../fonts/DINOT-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TripleBahrain';
    src: url('../fonts/DINOT-Light.woff2') format('woff2'),
        url('../fonts/DINOT-Light.woff') format('woff'),
        url('../fonts/DINOT-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'TripleBahrain';
    src: url('../fonts/DINOT-Black.woff2') format('woff2'),
        url('../fonts/DINOT-Black.woff') format('woff'),
        url('../fonts/DINOT-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



html, body {
	height: 100vh;
	margin: 0;
	padding: 0;
	background-color: #000000;
	font-family: 'TripleBahrain', sans-serif;
    font-weight: 300;
    font-style: normal;
	font-size: 18px;
	color: #ffffff;
	
	    background: linear-gradient(to bottom, #000000 0%, #000a1f 70%, #003366 100%);
    background-attachment: fixed; /* prevents flicker on iOS */
    overflow: hidden;
}


.download-btn {
	/* padding: 20px; */
    text-align: center;
    /* background: black; */
    /* border-radius: 20px; */
    width: 100%;
    display: flex;
    justify-content: center;
}

.download-image {
  width: 50%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.download {
    border-radius: 5px;
    /* background: black; */
    width: fit-content;
    padding: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    color: white;
    border: solid 1px;
    font-size: 0.7em;
}

.OLDtitle-text {
    font-size: clamp(0.8rem, 3vw, 4rem);
    font-weight: bold;
    letter-spacing: 5px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    /* height: 40%; */
    flex-direction: column;
    margin-top: 10vh;
}

.uber-logo-image {
	width: 20%;
	height: auto;
}

.countdown-text {
	color:#000000;
	text-align: center;
	font-family: 'uberFontBold';
}

.heading-logo {
	height:20vw;
	min-height:20vh;
}

.main-body {
display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 27vh;   /* height of top image */
    padding-bottom: 30vh; /* height of earthboard image */
    text-align: center;
    gap: 4vh;
}

.bulk-text {
    display: flex;
    flex-direction: column;
    text-align: center;
    /* font-size: clamp(1rem, 2.5vw, 1.4rem); */
    font-size: clamp(10px, 1.5vh, 22px);
    line-height: 1.3;	
    /* line-height: 1.3em; */
    padding: 0 20px;
}

.title-image {
	    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    height: 27vh;   /* <-- SCALE WITH HEIGHT */
    width: auto;
    z-index: 2;
	    max-height: 50vw;
}

.bahrainanisland-image {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    height: 10vh;
    width: auto;
    z-index: 2;
    max-height: 50vw;
}
.earthboard-image {
	    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 30vh;
    width: auto;
    z-index: 2;
    max-height: 50vw;
}