@font-face {
		font-family:first;
		src: url("../fonts/knewave-regular.ttf");
	}
body {
	color:#e3d0fb;

	background-color:DarkBlue;
}

#center{
	margin:auto;

	display:block;
	text-align:center;
}
#left{
	
}
hr {
	color: green;
}
img, video {
   max-width:100%;
   height:auto;
}
img {
	padding-bottom:10px;
}

.flex{
	margin:20px;
	display:block;
}
.flex2{
	
	display:none;
}
.border1{
	
	border:5px purple solid;
	width:300px;
	clear:both;
	padding-left:10px;
	padding-right:10px;
}
.logo4{
	width:99px;
	float:none;
}
.title{
			font-family: first,sans-serif;
}
.secondExternal{
	display:none;
}
.border2{
	border:5px orange solid;
	width:300px;
	padding-left:10px;
	padding-right:10px;
}

.border3{
	border:5px red solid;
	width:300px;
	padding-left:10px;
	padding-right:10px;
}

.border4{
	border: 5px yellow solid;
	width:300px;
	padding-left:10px;
	padding-right:10px;
}
@media screen and (min-width:768px) { 
    .logo4{
		width:199px;
		
	}

	h1 {
		font-size:20px;
	}
	h6{
		font-size:10px;
	}
	.border1{
		border:5px purple solid;
		width:500px;
		clear:both;

	}
	.border2{
		border:5px orange solid;
		width:400px;
		padding-left:10px;
		padding-right:10px;
	}
	.border3{
		border:5px red solid;
		width:500px;
		padding-left:10px;
		padding-right:10px;
	}
		
	.border4{
		border: 5px yellow solid;
		width:500px;
		padding-left:10px;
		padding-right:10px;
	}
	
	.flex2{
		margin:20px;
		display:flex;
	}
	.flex {
		 display:none;
	}
	.secondExternal{
		display:block;
	}
}

/* 3: Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 
	.logo4{
		width:299px;
		
	}
	h1 {
		font-size:40px;
	}
	h6{
		font-size:10px;
	}
	.border1{
		border:5px purple solid;
		width:600px;
		clear:both;
	}
	.border2{
		border:5px orange solid;
		width:600px;
		padding-left:10px;
		padding-right:10px;
	}
	
	.border3{
		margin:1px;
		border:5px red solid;
		width:600px;
		padding-left:10px;
		padding-right:10px;
		
	}
	
	.border4{
		border: 5px yellow solid;
		width:600px;	
		padding-left:10px;
		padding-right:10px;
				
	}
	
	.flex2{
		margin:20px;
		display:flex;
	}
	.flex{
		display:none;
	}
	.secondExternal{
		display:block;
	}
}

/* 4: Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	.logo4{
		
		width:399px;
	}	
	h1 {
		font-size:60px;
	}
	h6{
		font-size:20px;
	}
	.border1{
		border:5px purple solid;
		width:800px;
		clear:both;	
	}
	
	.border2{	
		border:5px orange solid;
		width:700px;
		padding-left:10px;
		padding-right:10px;	
	}

	.border3{
		position:relative;
		padding-left:10px;
		padding-right:10px;
		
		border:5px red solid;
		width:700px;
	}
	
	.flex2{
		display:none	
	}
	.flex{
		margin: 20px;
		display:flex;
	}
		
	.border4{
		position:relative;
		clear:right;
		border: 5px yellow solid;
		width:750px;
		padding-left:10px;
		padding-right:10px;
	}
	
	.secondExternal{
		display:none;
	}

}