@import url("./main.css");



.volunteerpage-main{

    height:calc(100vh - 130px);

    padding-left: 2.5vw;

    padding-top: 20px; 

}



.volunteerpage-container{

    width: 100%;

    height:calc(100vh - 130px);

}



.mobile-body{

	padding: 20px;

}



.box{

	position: relative;

	width: 97%;

	height: 100%;

	background: transparent;

	border-radius: 8px;

	overflow: hidden;

}





.box::before 

{

	content: '';

	z-index: 1;

	position: absolute;

	top: -50%;

	left: -50%;

	width: 100%;

	height: 100%;

	transform-origin: bottom right;

	background: linear-gradient(0deg,transparent,rgb(36, 91, 149),rgb(36, 91, 149));

	animation: animate 6s linear infinite;

}



.box::after 

{

	content: '';

	z-index: 1;

	position: absolute;

	top: -50%;

	left: -50%;

	width: 100%;

	height: 100%;

	transform-origin: bottom right;

	background: linear-gradient(0deg,transparent,rgb(36, 91, 149),rgb(36, 91, 149));

	animation: animate 6s linear infinite;

	animation-delay: -3s;

}

@keyframes animate 

{

	0%

	{

		transform: rotate(0deg);

	}

	100%

	{

		transform: rotate(360deg);

	}

}



.main-header{

    margin-right:2vw;

}



form 

{

    margin: auto;

    align-items: center;

	position: absolute;

	inset: 2px;

	background: var(--menu-bg-color);

	color : var(--font-color);

	padding: 50px 40px;

	border-radius: 8px;

	z-index: 2;

	display: flex;

	flex-direction: column;

}



.inputBox 

{

	position: relative;

	width: 300px;

	margin-top: 20px;

}



.inputBox input 

{

	position: relative;

	width: 100%;

	padding: 10px 10px 10px;

	background: transparent;

	box-shadow: none;

	border: 3px solid black;
	
    border-radius: 15px;

	color: var(--font-color);

	font-size: 1em;

	letter-spacing: 0.05em;

	transition: 0.5s;

	z-index: 10;

}



.inputBox span 

{

	position: absolute;

	left: 0;

	padding: 20px 0px 10px;

	pointer-events: none;

	font-size: 1em;

	color: #8f8f8f;

	letter-spacing: 0.05em;

	transition: 0.5s;

}



.inputBox input:valid ~ span,

.inputBox input:focus ~ span 

{

	color: var(--menu-hover-color);

	transform: translateX(0px) translateY(-34px);

	font-size: 0.75em;

}



input[type="submit"]

{

	border: none;

	outline: none;

	padding: 10px;

	background:rgb(36, 91, 149);

	cursor: pointer;

	border-radius: 4px;

    color : #ffff;

	font-weight: 600;

	width: 50%;

	margin-top: 10px;

    position: center;

}

input[type="submit"]:active 

{

	opacity: 0.8;

}



.box p, .inputBox{

    margin:auto;

    font-size: 15px;

}