/* ---------------------- Nova.Hub Header CSS ---------------------- */

/* ------ Removal of default padding, margin & list style ------ */

*{
	margin: 0px; padding: 0px; list-style-type: none;
	text-decoration: none;
}
html {
	min-height: 100vh; background-size: cover;	background-repeat: no-repeat;
	background-position: center center; background-image: url(BACKGROUND.png);
	overflow: hidden;  -webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */
}

@font-face {
	font-family: calibril; src: url(FONTS/CALIBRIL.ttf);
}
@font-face {
	font-family: montserrat-light; src: url(FONTS/MONTSERRAT-LIGHT.ttf);
}
@font-face {
	font-family: fivosans-bold; src: url(FONTS/FIVOSANS-BOLD.otf);
}
@font-face {
	font-family: gilc; src: url(FONTS/GILC.TTF);
}

h1 {
	font-family: calibri; font-size: 32pt; font-weight: 400;
	letter-spacing: 1.5px; position: relative; opacity: 0;
	animation: 1s ease 0.5s 1 normal forwards running fade-fall;
}
a {
	opacity: 0; position: relative;
	animation: 1s ease 0.5s 1 normal forwards running fade-rise;
}
p {
	font-family: gilc; font-size: 22pt; font-weight: 400;
	letter-spacing: .5px; opacity: 0; animation: fade-text 1s;
	animation-delay: 0.7s; animation-fill-mode: forwards;
}

::placeholder { /* Firefox */
	color: red; opacity: .4; font-size: 14pt
}

::-ms-input-placeholder { /* Edge 12-18 */
	color: red; opacity: .4; font-size: 14pt
}


/* -------- IPAD-CONT -------- */

#ipad-cont {
	padding: 100px calc(50vw - 700px); width: 1400px;
}
#ipad {
	width: 1450px; height: 900px; border-radius: 50px;
}


#ipad {
	overflow-y: scroll; /* or auto, depending on desired default behavior */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE 10+ */
}
#ipad::-webkit-scrollbar { /* WebKit */
	width: 0; height: 0;
}

#ipad h1 {
	padding: 10; text-align: center; border-radius: 0 0 25px 25px;
	backdrop-filter: blur(2px); overflow: hidden;
}


/* -------- HEADER -------- */

#header {
	height: 125px; text-align: center; /* background-color: #222222; old color */
	background-color: color-mix(in srgb, #222222 60%, transparent);
	backdrop-filter: blur(2px);
}
#header img {
	height: 120px;
}




main {
	width: 100%; height: calc(100% - 125px); position: relative;
	overflow-x: hidden;	background-color: color-mix(in srgb, #bcbcbc 60%, transparent);
	backdrop-filter: blur(2px); /*background-color: #bcbcbc; old color */
}

main {
	overflow-y: scroll; /* or auto, depending on desired default behavior */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE 10+ */
}
main::-webkit-scrollbar { /* WebKit */
	width: 0; height: 0;
}


/* -------- Footer -------- */

footer {
	width: 1600px;text-align: center; position: absolute;
    bottom: 50px;
}

footer img {
	width: 80px;
}
    



/* Animation */

@keyframes fade-slide {
    from {left: -10%; opacity: 0;}
    to {left: 0px; opacity: 1;}
}

@keyframes fade-rise {
    from {bottom: -50px; opacity: 0;}
    to {bottom: 0px; opacity: 1; }
}
@keyframes fade-fall {
    from {top: -25px; opacity: 0;}
    to {top: 0px; opacity: 1;}
}

@keyframes fade-text {
	from {opacity: 0;} to {opacity: 1;}
}