html{
	transition: 0.4s;
}
.blur{
	filter:blur(100px);
}
#red{
	background-color: #BF0A30;
	width:100vw;
	height:calc(100vh*(1/3));
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	color:white;
}
#white{
	background-color: white;
	width:100vw;
	height:calc(100vh*(1/3));
	position: absolute;
	top:50%;
	transform: translate(0, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	color:black;
}
#blue{
	background-color: #002868;
	width:100vw;
	height:calc(100vh*(1/3));
	position: absolute;
	bottom:0;
	display: flex;
	align-items: center;
	justify-content: center;
	color:white;
}
#flag{
	width:100vw;
	height: 100vh;
	position: absolute;
	display: flex;
	color:white;
	z-index: -1;
	background-repeat: no-repeat;
}
#popUp{
	background-color: white;
	position: absolute;
	width: 400px;
	height: 400px;
	border-radius: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	top:50%;
	right:50%;
	transform: translate(50%, -50%);
	filter:blur(0);
	display: none;
	user-select: none;
	z-index: 5;
	border: solid black 1px;
}
#popUp h1 {
	font-size: 48px;
	padding:12.5px 25px;
}
#popUp h2 {
	font-size: 24px;
	padding:12.5px 25px;
}
#popUp h3 {
	font-size: 18px;
	padding:12.5px 25px;
}
#popUp h4 {
	font-size: 12px;
	font-style: italic;
	padding:12.5px 25px;
}
#popUp .x{
	cursor: pointer;
	transition: 2s;
}
p{
	user-select: none;
	font-size: 32px;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.rotate{
	transform: rotate(1800deg);
}

#redBox{
	background-color: #BF0A30;
	height:100px;
	width:100px;
	position: absolute;
	left:50%;
	transform:translateX(-50%);
	top:0;
	bottom:100%;
	z-index: 5;
}
#blueBox{
	background-color: #002868;
	height:100px;
	width:100px;
	position: absolute;
	left:50%;
	transform:translate(-50%,-100%);
	bottom:0;
	top:100%;
	z-index: 6;
}
#whiteBox{
	border: solid black 1px;
	background-color: white;
	height:100px;
	width:100px;
	position: absolute;
	left:50%;
	transform:translate(-50%, -50%);
	top:50%;
	bottom:50%;
}

#box4{
	background-image: url(images/background5.jpg);
	width:100vw;
	height: 100vh;
	display: none;
	background-position: center;
}

#box5{
	width:100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	display: none;
}