/* ---------------------- 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;
}
h2 {
	font-size: 16pt;
}
a {
	opacity: 0; position: relative;
	animation: 1s ease 0.5s 1 normal forwards running fade-rise;
}
p, b, i, h2 {
	font-family: calibril; font-size: 14pt;
	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
}


header {
	background-color: #222222; text-align: center; position
}
nav {
	padding: 15px 80px; background-color: whitesmoke;	
}
nav h1 {
	float: left;
}
nav a {
	width: 165px; height: 40px; margin: 0 10px; padding: 10px; font-family: gilc;
	font-size: 22pt; text-align: center; background-color: gainsboro;
	border-radius: 15px; display: inline-table; transition: .3s;
}
nav a:hover {
	cursor: pointer; transform: scale(1.1);
}
nav b {
	display: none;
}

aside {
	width: 950px; height: 0px; background-color: lightblue;
	transition: height 0.3s cubic-bezier(0.35, 0.88, 0.5, 0.93);
	border-radius: 10px; box-shadow: 2px 2px 3px rgba(150,150,150,.5);
}
aside h1 {
	display: none;
}



/* -------- Sent -------- */

#sent {
	width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.5);
	position: fixed; left: 0; top: 15px; opacity: 0; z-index: -1;
}
#sent-container {
	width: 450px; margin: 250px calc(50% - 225px); padding: 50px;
	background-color: white; text-align: center;
}
#sent-container h1 b {
	position: absolute; top: -45px; right: -30px;
	font-weight: 400; color: red; font-size: 36pt;
}
#sent-container h1 b:hover {
	cursor: pointer; text-shadow: red 0px 0px 5px; transition: .3s;
}
#sent-container p {
	width: auto; font-size: 18pt;
}







#total {
	width: calc(100% - 20px); padding: 10px; background-color: mediumseagreen;
	position: absolute; bottom: 0;
}


/* -------- Nav -------- */


/* --------------------------- Mobile sized screens -------------------------- */

@media screen and (max-width:640px){
	
p, b, i, h2 {
	font-size: 12pt;
}

h2 {
	font-family: 'gilc';
    font-size: 16pt;
    margin: -5px 0 0;
    letter-spacing: 1.5px;
}

header img {
	width: 90vw; position: relative; left: -10px;
}

nav {
	width: calc(100% - 30px); height: 25px; padding: 15px;
	background-color: whitesmoke;
}
nav h1 {
	font-size: 16pt; display: block;
}
nav b {
	margin: -8px 0 0; font-size: 24pt;
	display: block; float: right; 
}


aside {
	width: 100vw; height: 100vh; position: fixed; top: 0; right: 105vw;
	transition: right 0.3s cubic-bezier(0.35, 0.88, 0.5, 0.93); border-radius: 0;
	box-shadow: none; z-index: 5; backdrop-filter: blur(2px);
	background-color: color-mix(in srgb, lightblue 90%, transparent);
}
aside h1 {
	padding: 10px 0; font-size: 20pt;
	background-color: whitesmoke; display: block;
}


#cover {
	width: 0; height: 100vh; position: absolute; top: 0;
	opacity: 0; background-color: rgb(0, 0, 0, 0.8);
	transition: opacity .3s; z-index: 5;           
}

#nav-sel {
	width: 0; height: calc(100vh - 100px); padding: 50px 0; position: fixed; 
	top: 0px; left: 0px; background-color: rgb(50, 50, 50); overflow-x: hidden;
	transition: 0.3s cubic-bezier(0.35, 0.88, 0.5, 0.93); z-index: 5;
}
#nav-sel a {
	margin: 15px 0; font-size: 22pt;
}

#sent-container {
	width: calc(100% - 100px); margin: 250px 0;
}

}





/* 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;}
}