/* VARIABLES
======================================================================================================== */

:root{
	--bg : url("../images/bgs/background_contact_day.jpg");
}

/* NAV
======================================================================================================== */

nav{
	position: fixed;
	margin : 1% 1% 1% 1%;
	height: 96%;

	z-index: 1;

	display : flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

#nav_up{
	width : auto;
	margin-top: 1%;

	display: flex;
	align-items: center;
}

#nav_down{
	width : auto;
	margin-bottom: 10%;
	
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

/* MAIN
============================================================================================================ */

#all{
	width : 100%;

	display: flex;
	justify-content: space-between;
}


#left{
	width: 30%;
	height: 100%;
	position: fixed;
	z-index: -1;

	display: flex;
	align-items: center;
	justify-content: center;

	background-image: var(--bg);
	background-position: center;
	background-size: cover;
}

	#left img{
		width : 20%;
	}



#right{
	width: 70%;
	height : 100%;
	margin-left: 30%;
	position: fixed;

	border-left: solid var(--secondary-color-1) 7px;
}

	#right form{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	#right form h1{
		width : 80%;
		padding: 1% 1% 1% 1%;

		text-align: center;

		background-color: var(--secondary-color-1);
	}

	#right form section{
		width : 90%;
		margin : 0.5%;

		display: flex;
		justify-content: space-around;
	}

	#right form section article{
		width: 30%;

		display: flex;
		flex-direction: column;
	}

	#right form section article label, h4{
		text-decoration: underline;
		text-decoration-color: var(--secondary-color-1);
	}

	#right form section article input{
		margin: 5%;
	}

	#right form div{
		text-align: center;
		width: 80%;
	}
	#right form div input{
		width: 70%;
	}

	#right form input{
		padding: 6px;
		border : none;

		font-size: 18px;
		text-align: center;
	}

	#right form input:focus, #right form textarea{
		outline: 0;
	}

	#right form textarea{
		width: 60%;
		height : 200px;
		min-height: 30px;
		margin: 3%;
		resize: none;
		font : 20px Arial, sans-serif;
		overflow : hidden;

		border : solid var(--secondary-color-1) 5px;
	}

	#right form button{
		width: 20%;
		padding: 14px 30px 14px 30px;

		font-weight: bold;
		font-size: 18px;
		color : var(--text-color);

		background-color: var(--secondary-color-1);
		border : solid rgba(0, 0, 0, 0) 3px;
		border-radius: 2em;
	}

footer{
	width : auto;
	height: 100%;
	position: fixed;

	right : 1%;
}
	footer ul{
		height : 100%;
		padding-top: 15px;

		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	footer ul li{
		margin: 20% 0% 20% 0%;

		border : solid var(--secondary-color-1) 3px;
		border-radius: 50%;

		text-align: center;
	}

	footer ul li img{
		width : 70px;

		border-radius: 50%;

		vertical-align: middle;
		filter: drop-shadow(0 0 0.10rem black);
	}

#displaySent{
	width: 100%;
	height: 100%;
	position: fixed;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	visibility: hidden;
  	opacity: 0;

	z-index: 2;

	background-color: rgba(0, 0, 0, 0.85);
	color : white;

	transition: opacity 0.4s, visibility 0.4s;
}

	#displaySent section{
		width: 35%;
		text-align: center;
	}

	#displaySent section button{
		width: 20%;

		padding : 15px;
		margin : 15px;

		background-color: black;
		color: white;
		border : solid white 2px;
		border-radius: 2.5em;

  		transition: box-shadow 200ms ease-in-out;
	}

	#displaySent button:hover{
		box-shadow: 0 0 20px 0 aqua, 0 0 40px 10px #1DA1F2,0 0 60px 10px blue;
	}


/* RESPONSIVE 
============================================================================================================ */

@media all and (orientation: portrait){

	#displaySent section{
		width : 85%;
	}

	#displaySent section button{
		width: 40%;
		padding: 30px;
		font-size: 30px;
	}

	#left{
		display: none;
	}

	#right{
		border : none;
		margin : 0;
		width : 100%;
		
		background-image: var(--bg);
		background-size: cover;
	}
	
	#right form{
		justify-content: space-around;

		text-align: center;
	}

	#right form section article{
		width: 50%;
	}

	#right form textarea{
		width: 80%;
	}

	#right form button{
		width: 40%;
	}

	footer ul li{
		background-color: var(--secondary-color-1);
	}
}