/* Colors: 
 * Green:	#66CA00
 * Brown: 	#42493A
 * Black:	#252623
 * Grey:	#A6AE9D
 * Blue:	#00D6FF
 * Dark:	#009EDF
*/

@media only screen and (orientation: portrait){
	body{
		padding-bottom: 7vh !important;
		
		nav{
			div{
				width: 10vh;
				height: 5vh;
				font-size: 1.75vh !important;
			}
			
			& a:first-child div {
				border-radius: 1.5vh 0px 0px 1.5vh;
			}
			
			& a:last-child div {
				border-radius: 0px 1.5vh 1.5vh 0px;
			}
		}
		
		#Top{
			button{
				width: 16vh;
				font-size: 1.4vh;
			}
		}
		
		button, input[type='button'], input[type="submit"], #BackBtn {
			width: 12vh;
			height: 7vh;
			border-radius: 1vh;
			font-size: 1.5vh;
			font-weight: normal;
		}
		
		#Buttons{
			button{
				width: 12vh;
				height: 7vh;
				border-radius: 1vh;
				font-size: 1.5vh !important;
				font-weight: normal;
			}
		}
		
		footer{
			font-size: 1.25vh;
			padding-left: 2vh;
			padding-right: 1vh;
			
			img{
				height: 5vh;
			}
		}
	}
}

body{
	font-family: 'nunito sans';
	margin: 0px;
	position: relative;
	min-height: 100vh; /* For footer */
	padding-bottom: 6vw;
	margin-top: 0px;
	padding-top: 2.5%;
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: column;
    align-items: center;
	width: 100%;
}

nav{
	margin: 2.5% auto;
	margin-top: 0px;
	text-align: center;
	
	div{
		display: inline-block;
		width: 12.5vw;
		height: 5vw;
		background-color: #A6AE9D;
		align-content: center;
		color: black;
		font-size: 2vw;
		
		&:hover{
			background-color: #42493A !important;
			color: white;
		}
	}
	
	& a:first-child div {
		border-radius: 2vw 0px 0px 2vw;
	}
	
	& a:last-child div {
		border-radius: 0px 2vw 2vw 0px;
	}
}

#BackBtn {
	width: 15vw;
	height: 8vw;
	border-radius: 1vw;
	font-size: 1.25vw;
	align-self: flex-start;
	margin-left: 5vw;
	background-color: #42493A;
	color: white;
	font-weight: bold;
	padding: 0px 4%;
	position: relative;
	
	&:hover{
		background-color: #66CA00;
		color: black;
	}
	
	&::before{
		content: "\3E";
		display: inline-block;
		transform: rotate(180deg) scale(1.25, 1.5);
		float: left;
		clear: none;
	}
}

#Buttons{
	display: inline-flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 2.5vw;
	width: 80%;
	height: fit-content !important;
	
	button{
		width: 20vw;
		height: 8vw;
		border-radius: 1vw;
		font-size: 1.25vw;
		
		background-color: #42493A;
		color: white;
		font-weight: bold;
		
		&:hover{
			background-color: #66CA00;
			color: black;
		}
	}
}

h1{
	margin-bottom: 1vw;
	text-decoration: underline;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	text-align: center;
}

h2{
	width: 100%;
	text-align: center;
}

form{
	padding: 2%;
	border: 1px solid grey;
	border-radius: 1vw;
	width: 90vw;
	margin-bottom: 2.5vw;
}

label{
	font-weight: bold;
	margin-top: 0px;
	padding-top: 0px;
}

.dropdown{
	width: 18vw;
	box-sizing: border-box;
	margin: 0px;
	font-size: max(1.25vw, 1.25vh);
	padding: 1vw;
	border: 1px solid grey;
	border-radius: 0.5vw;
	background-color: white;
	position: relative;
	margin-bottom: 2.5vw;
	margin-left: 1vw;
	margin-top: 0.5vw;
	cursor: pointer;
	
	&::before{
		content: "\3E";
		display: inline-block;
		transform: rotate(90deg) scale(1, 1.25);
		transition: transform 0.25s;
		float: right;
		clear: none;
	}
	
	ul{
		white-space: nowrap;
		position: absolute;
		overflow-y: hidden;
		display: none;
		border: 1px solid grey;
		border-radius: 0.5vw;
		background-color: white;
		margin: 1vw -1vw;
		padding: 0.5vw;
		transition: height 0.25s;
		padding-bottom: 1vw !important;
		box-sizing: border-box;
		z-index: 20;
		
		li{
			list-style-type: none;
			width: auto;
			padding: 0.5vw;
		}
		
		li:hover{
			background-color: #66CA00;
			border-top: 1px solid grey;
			border-bottom: 1px solid grey;				
		}
	}
}

input{
	width: 18vw;
	box-sizing: border-box;
	margin: 0px;
	font-size: max(1.25vw, 1.25vh);
	padding: 1vw;
	border: 1px solid grey;
	border-radius: 0.5vw;
	background-color: white;
	position: relative;
	margin-bottom: 2.5vw;
	margin-left: 1vw;
	margin-top: 0.5vw;
	position: relative;
	cursor: pointer;
}

.tied{
	margin-bottom: 1vw !important;
}

input[type="Submit"] {
	background-color: #66CA00;
	font-weight: bold;
	
	&:hover{
		background-color: #42493A;
		color: white;
	}
}

#Delete{
	background-color: red;
	color: white;
	float: right;
	
	&:hover{
		background-color: white;
		color: red;
	}
}

button, input[type="button"] {
	background-color: #A6AE9D;
	font-weight: bold;
	width: 18vw;
	box-sizing: border-box;
	margin: 0px;
	font-size: max(1.25vw, 1.25vh);
	padding: 1vw;
	border: 1px solid grey;
	border-radius: 0.5vw;
	position: relative;
	cursor: pointer;
	
	&:hover {
		background-color: #42493A;
		color: black;
	}
}

input[type="text"] {
	cursor: text;
}

input[type="checkbox"] {
	display: inline-block;
	width: 1vw;
	
	&+label{
		display: inline-block;
		margin-bottom: 2.5vw;
	}
}

select{
	width: 18vw;
	box-sizing: border-box;
	margin: 0px;
	font-size: max(1.25vw, 1.25vh);
	padding: 1vw;
	border: 1px solid grey;
	border-radius: 0.5vw;
	background-color: white;
	position: relative;
	margin-bottom: 2.5vw;
	margin-left: 1vw;
	margin-top: 0.5vw;
	position: relative;
	cursor: pointer;
}

textarea{
	width: 35vw;
	height: 15vw;
	box-sizing: border-box;
	margin: 0px;
	font-size: max(1.25vw, 1.25vh);
	padding: 1vw;
	border: 1px solid grey;
	border-radius: 0.5vw;
	background-color: white;
	position: relative;
	margin-bottom: 2.5vw;
	margin-left: 1vw;
	margin-top: 0.5vw;
	position: relative;
	cursor: text;
}

footer{
	margin-top: 1%;
	border-top: 1px solid grey;
	position: absolute;
	bottom: 0px;
	width: 100%;
	background-color: white;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	
	img{
		height: 4vw;
		display: inline-block;
		vertical-align: middle;
	}
	
	span, a{
		height: 100%;
		display: inline-block;
		margin-right: 1%;
	}
	
	.right{
		margin-left: auto;
		white-space: nowrap;
		text-align: right;
	}
}