@media all and (min-aspect-ratio: 1/1){
	nav{
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #046abf;
	display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  z-index: 2;
	  height: calc(30px + (110 - 30) * ((100vw - 300px) / (3840 - 300)));
	}

	#logocontainer{
		color: #e9f5ff;
		display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
		width: 25%;
	}


	#title{
		height: calc(6px + (60 - 6) * ((100vw - 300px) / (3840 - 300)));
		font-size: calc(6px + (60 - 6) * ((100vw - 300px) / (3840 - 300)));
	}

	/*
	body {4
	  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
	}*/

	#slogan{
		font-size: calc(3px + (40 - 3) * ((100vw - 300px) / (3840 - 300)));
	}

	#navBarLandscape {
		position: relative;

	    list-style: none;

	    display: -webkit-box;
	  display: -ms-flexbox;
		  display: flex;
	    width: 60%;
	}

	#navBarLandscape li{
		height: 100%;
		width: 20%;
		display: flex;
		cursor: pointer;
	}

	#navBarLandscape li a {
		text-decoration: none;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
	  	justify-content: center;
		margin: auto;
		color: #e9f5ff;
		font-size: calc(4px + (50 - 4) * ((100vw - 300px) / (3840 - 300)));
	}


	#navBarLandscape li:hover {
		background-color: #0580e6;
	}

	#downarrow{
		width: calc(4px + (28 - 4) * ((100vw - 300px) / (3840 - 300)));
	}

	.current{
		background-color: #035599;
	}

	#gdrop{
		margin-top: calc(30px + (110 - 30) * ((100vw - 300px) / (3840 - 300)));
	}

	#gdrop li {
		width: 100%;
	    display: none;
	    list-style: none;
	    background-color: #046abf;

	}

	#gdrop li a{
	    flex: 1;
	    padding-left: calc(4px + (20 - 4) * ((100vw - 300px) / (3840 - 300)));
	    padding-right: calc(4px + (20 - 4) * ((100vw - 300px) / (3840 - 300)));
	    justify-content: flex-start;
	}

	#games:hover > #gdrop li {
	    display: flex;
	}

	#games:hover > #gdrop {
	    position: absolute;
	    display: flex;
	    flex-direction: column;
	}

	#contactLandscape{
		display: -webkit-box;
		  display: -ms-flexbox;
		  display: flex;
		  justify-content: flex-end;
		  align-items: center;
		  margin-left: auto;
	}

	#contactLandscape div{
		background: url(../grfx/email.svg) no-repeat;
		background-size: 100% 100%;
		height: calc(24px + (90 - 24) * ((100vw - 300px) / (3840 - 300)));
		width: calc(24px + (90 - 24) * ((100vw - 300px) / (3840 - 300)));
		cursor: pointer;
		margin: 0 1vw 0 1vw;
	}

	#contactLandscape a:hover > div{
		background: url(../grfx/emailhov.svg) no-repeat;
		background-size: 100% 100%;
	}

	#navBarPortrait, #hamburgerNav, #navBarShade{
		display: none;
	}
}

@media all and (max-aspect-ratio: 1/1){
	#navBarShade{
		display: none;
	    position: fixed; 
	    left: 0; 
	    top: 0;
	    width: 100%; 
	    height: 100%;
	    z-index: 2;
	}

	nav{
		position: fixed;
		top: 0;
		width: 100%;
		background-color: #046abf;
	  	display: flex;
	  	z-index: 2;
	  	height: calc(40px + (220 - 40) * ((100vw - 300px) / (2160 - 300)));
	}

	#logocontainer{
		color: #e9f5ff;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		width: 80%;
		padding-left: 1vw;
	}

	#title{
		height: calc(16px + (100 - 16) * ((100vw - 300px) / (2160 - 300)));;
		font-size: calc(16px + (100 - 16) * ((100vw - 300px) / (2160 - 300)));
	}

	/*
	body {4
	  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
	}*/

	#slogan{
		font-size: calc(12px + (80 - 12) * ((100vw - 300px) / (2160 - 300)));
	}

	#navBarPortrait{
		right: 0;
		width: 0;
		height: 100%;
		position: fixed;
		background-color: #034e8d;
	    z-index: 5;
	    transition: width .3s ease-in-out;
	    list-style: none;
	  display: flex;
	  flex-direction: column;
	  overflow: auto;
	}

	#contactPortrait{
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	#navSections{
		height: 100%;
	  display: flex;
	  flex-direction: column;
	}	

	#navSections li{
		height: 100%;
		width: 100%;
		display: flex;
		cursor: pointer;
	}

	#navSections li a{
		text-decoration: none;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
	  	justify-content: center;
		color: #e9f5ff;
		font-size: calc(20px + (160 - 20) * ((100vw - 300px) / (2160 - 300)));
	}

	#navSections li:hover {
		background-color: #035ca6;
	}

	.current{
		background-color: #024074;
	}

	#hamburgerNav, #hamburgerMenu, #emailMenu{
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	#hamburgerNav, #emailMenu{
		height: calc(40px + (220 - 40) * ((100vw - 300px) / (2160 - 300)));
		margin-left: auto;
	}

	#hamburgerNav{
		padding: 0 2vw 0 2vw;
	}

	#hamburgerMenu{ 
		height: calc(40px + (220 - 40) * ((100vw - 300px) / (2160 - 300)));
		margin-right: auto;
		padding: 0 2vw 0 2vw;
	}

	#emailMenu a{
		text-decoration: none;
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
	  	justify-content: center;
		margin: auto;
		padding: 0 2vw 0 2vw;
	}

	#hamburgerNav div, #hamburgerMenu div{
		background: url(../grfx/hamburger.svg) no-repeat;
		background-size: 100% 100%;
		width: calc(20px + (160 - 20) * ((100vw - 300px) / (2160 - 300)));
		height: calc(20px + (160 - 20) * ((100vw - 300px) / (2160 - 300)));
	}

	#hamburgerNav:hover > div, #hamburgerMenu:hover > div{
		background: url(../grfx/hamburgerhov.svg) no-repeat;
		background-size: 100% 100%;
	}

	#emailMenu div{
		background: url(../grfx/email.svg) no-repeat;
		background-size: 100% 100%;
		width: calc(30px + (180 - 40) * ((100vw - 300px) / (2160 - 300)));
		height: calc(30px + (180 - 40) * ((100vw - 300px) / (2160 - 300)));
		cursor: pointer;
	}

	#emailMenu:hover > a div{
		background: url(../grfx/emailhov.svg) no-repeat;
		background-size: 100% 100%;
	}

	#navBarLandscape{
		display: none;
	}

	#contactLandscape{
		display: none;
	}
}