@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:900;
    src:url(../fonts/Roboto-Black.ttf);
}

@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:400;
    src:url(../fonts/Roboto-Regular.ttf);
}

@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:300;
    src:url(../fonts/Roboto-Light.ttf);
}

@font-face{
	font-family:'Roboto';
	font-style:normal;
	font-weight:100;
    src:url(../fonts/Roboto-Thin.ttf);
}

:root{
	--hue:0;
	--text-color:hsl(var(--hue), 100%, 10%);
}

*,
::after,
::before{
	margin:0;
	padding:0;
	outline:0;
	box-sizing:inherit;
	text-decoration:none
}

html{
	box-sizing:border-box;
	font-family:Roboto;
	min-height:100%;
	color:var(--text-color);
}

body{
	display:flex;
	flex-direction:column;
	gap:4rem;
	align-items:center;
	width:100%;
	min-height:100%;
	
	background-color:hsl(var(--hue), 100%, 10%);
	background:linear-gradient(180deg,
		hsl(var(--hue), 50%, 84%, 1) 0%,
		hsl(var(--hue), 50%, 80%, 1) 6%,
		hsl(var(--hue), 50%, 54%, 1) 6%,
		hsl(var(--hue), 50%, 50%, 1) 50%,
		hsl(var(--hue), 50%, 24%, 1) 50%,
		hsl(var(--hue), 50%, 20%, 1) 56%,
		hsl(var(--hue), 50%, 44%, 1) 56%,
		hsl(var(--hue), 50%, 40%, 1) 100%);
	background-size:100% 70px;
}

body::after{
	content:'';
	position:fixed;
	inset:0;
	/* background-color:hsl(var(--hue), 50%, 90%); */
	opacity:0.5;
	background:linear-gradient(180deg,
		hsl(var(--hue), 50%, 100%) 0%,
		hsl(var(--hue), 50%, 50%) 100%);
	z-index:-1;
}

.body *{
	flex-shrink:0;
}

section{
	width:100%;
	display:block;
}

section span{
	display:block;
	text-align:center;
	font-size:1.5rem;
}

section iframe{
	width:100%;
	text-align:center;
	font-size:1.5rem;
}

image, svg{
	display:block;
}

.image-full{
	width:100%;
	padding:1rem;
}

.dj-logo{
	width:calc(100% - 2rem);
	margin:1rem;
	aspect-ratio:1;
	position:relative;
	border-radius:50%;
	background:linear-gradient(180deg,
		hsl(var(--hue), 0%, 100%, 0.4) 0%,
		hsl(var(--hue), 0%, 30%, 0.4) 100%);
	/* z-index:-1; */
	border:10px solid hsl(var(--hue), 50%, 25%);
}

.dj-logo > img{
	width:100%;
	position:absolute;
	aspect-ratio:1;
	border-radius:50%;
}

.dj-logo > svg{
	position:absolute;
	color:hsl(var(--hue), 90%, 85%);
	filter:drop-shadow(0 0 8px rgb(0, 0, 0, 0.5));
}

.reno-svg{
	bottom:8%;
	width:40%;
	left:50%;
	transform:translateX(-50%);
}

.inti-svg{
	bottom:8%;
	width:30%;
	left:50%;
	transform:translateX(-50%);
}

.freddie-svg{
	width:100%;
	bottom:12%;
	/* left:50%; */
	/* transform:translateX(-50%); */
}

footer{
	background-color:hsl(var(--hue), 50%, 20%);
	display:flex;
	flex-direction:column;
	width:100%;
	padding:2rem;
	color:white;
	margin-top:auto;
}

.foot-head{
	font-weight:700;
}

.foot-head:not(:first-child){
	margin-top:1rem;
}












/*
 *    #######                      
 *    #        ####  #####  #    # 
 *    #       #    # #    # ##  ## 
 *    #####   #    # #    # # ## # 
 *    #       #    # #####  #    # 
 *    #       #    # #   #  #    # 
 *    #        ####  #    # #    # 
 *                                 
 *    
 *    Form
*/


.form-links{
	display:flex;
	justify-content:center;
	padding:0.5rem 0 0.5rem 0;
	margin:0.5rem 0 0.5rem 0;
	user-select:none;
}

.form-links > *{
	font-size:1.25rem;
	
}

.form-links > span{
	padding:0.5rem 0;
}

.form-link{
	padding:0.5rem 1rem;
	background:none;
	border:none;
}


.forms-container{
	display:flex;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-snap-type:x mandatory;
	/* width:100%; */
}

.forms-container::-webkit-scrollbar{
	display:none;
}

.form{
	flex-shrink:0;
	width:100%;
	padding:0 1rem;
	scroll-snap-align:center;
	display:flex;
	flex-direction:column;
	gap:2rem;
	/* margin-top:4rem; */
}

.forms-title{
	display:block;
	text-align:center;
	font-size:2.25rem;
	font-weight:400;
}

h2{
	text-align:center;
	font-size:2.25rem;
	font-weight:100;
}

.form-title{
	margin-bottom:-2rem;
}

.form-subtitle{
	font-size:1.0rem;
	font-weight:400;
	color:var(--text-color);
}

.form-subtitle a{
	color:var(--text-color);
}

.form label{
	width:100%;
	font-size:1.2rem;
	user-select:none;
}

.form input{
	width:100%;
	height:48px;
	font-size:1.3rem;
	padding:0 0.5rem;
	background-color:hsl(var(--hue), 100%, 90%);
	border:2px solid hsl(var(--hue), 100%, 20%);
}

.form input:active{
	border:2px solid hsl(var(--hue), 100%, 40%);
}

.form input:focus{
	border:2px solid hsl(var(--hue), 100%, 40%);
	background-color:hsl(var(--hue), 100%, 80%);
}

.submit{
	width:100%;
	display:flex;
	align-items:center;
	height:48px;
	font-size:1.3rem;
	gap:0.25rem;
	justify-content:center;
	background-color:hsl(var(--hue), 100%, 40%);
	border:2px solid hsl(var(--hue), 100%, 80%);
	color:white;
}

.submit svg{
	height:44px;
	padding:8px;
	fill:white;
}

/*
 *    #     #                                                                    
 *    ##    #  ####  ##### # ###### #  ####    ##   ##### #  ####  #    #  ####  
 *    # #   # #    #   #   # #      # #    #  #  #    #   # #    # ##   # #      
 *    #  #  # #    #   #   # #####  # #      #    #   #   # #    # # #  #  ####  
 *    #   # # #    #   #   # #      # #      ######   #   # #    # #  # #      # 
 *    #    ## #    #   #   # #      # #    # #    #   #   # #    # #   ## #    # 
 *    #     #  ####    #   # #      #  ####  #    #   #   #  ####  #    #  ####  
 *                                                                               
 *    
 *    Notifications
*/

.notifications{
	position:fixed;
	top:0;
	left:0;
	right:0;
	
	display:flex;
	flex-direction:column;
	gap:4px;
}

.notification{
	/* position:absolute; */
	display:grid;
	grid-template-columns:1fr 40px;
	grid-template-rows:32px 1fr;
	background-color:hsl(var(--hue), 100%, 20%, 0.9);
	/* border-top:2px solid hsl(var(--hue), 100%, 50%, 0.9); */
	width:100%;
}

.notification-date{
	grid-column:1/2;
	grid-row:1/2;
	display:flex;
	gap:0.5em;
	padding:0.5rem;
	align-items:center;
	color:hsl(var(--hue), 100%, 100%, 0.5);
	font-size:0.75rem;
	border-right:1px solid hsl(var(--hue), 100%, 10%, 0.2);
}

.notification-close{
	grid-column:2/3;
	grid-row:1/3;
	width:20px;
	place-self:center;
	fill:white;
}

.notification-body{
	grid-column:1/2;
	grid-row:2/3;
	border-right:1px solid hsl(var(--hue), 100%, 10%, 0.2);
	padding:0.5rem;
	color:white;
}

.notification-date > svg{
	height:10px;
	fill:hsl(var(--hue), 100%, 100%, 0.5);
}


























@media screen and (min-width: 600px) {
	section,
	.overlay-content{
		width:60%;
	}
	
	.dj-logo{
		width:calc(60% - 2rem);
	}
	
	footer{
		padding-left:20%;
	}
}

@media screen and (min-width: 800px) {
	section,
	.overlay-content{
		width:50%;
	}
	
	.dj-logo{
		width:calc(50% - 2rem);
	}
	
	footer{
		padding-left:25%;
	}
}

@media screen and (min-width: 1000px) {
	section,
	.overlay-content{
		width:40%;
	}
	
	.dj-logo{
		width:calc(40% - 2rem);
	}
	
	footer{
		padding-left:30%;
	}
}

@media screen and (min-width: 1200px) {
	section,
	.overlay-content{
		width:35%;
	}
	
	.dj-logo{
		width:calc(35% - 2rem);
	}
	
	footer{
		padding-left:32.5%;
	}
}

@media screen and (min-width: 1400px) {
	section,
	.overlay-content{
		width:30%;
	}
	
	.dj-logo{
		width:calc(30% - 2rem);
	}
	
	footer{
		padding-left:35%;
	}
}

@media screen and (min-width: 1600px) {
	section,
	.overlay-content{
		width:25%;
	}
	
	.dj-logo{
		width:calc(20% - 2rem);
	}
	
	footer{
		padding-left:37.5%;
	}
}

@media screen and (min-width: 1800px) {
	section,
	.overlay-content{
		width:20%;
	}
	
	.dj-logo{
		width:calc(20% - 2rem);
	}
	
	footer{
		padding-left:40%;
	}
}