@charset "UTF-8";
/* CSS Document */

/* Start of Desktop styling */
@media screen and (min-width: 1024px){
	body{
		background-color: rgba(21,20,18,1.0);
		background-image:url("images/Untitled-2.webp");
		background-size: cover;
		background-repeat: repeat;
	}

	.container{
		width:60vw;
		height:auto;
		background-color:rgba(0,0,0,0.2);
		border-radius: 1vw;
		border-color: rgba(255,255,255,1.0);
		border-width: thin;
		border-style: solid;
		margin:1vw 20vw;
	}

	.container img.logo{
		width:20vw;
		margin:2vw 20vw;
	}

	.container iframe{
		width:40vw;
		height:20vw;
		margin:5vw 10vw 2vw;
		border-style: none;
	}

	.icons{
		width:60vw;
		height:4vw;
		background-color:rgba(0,0,0,0.2);
		border-radius: 1vw;
		border-color: rgba(255,255,255,1.0);
		border-width: thin;
		border-style: solid;
		margin:1vw 20vw;
		position: relative;
	}

	.icons h1{
		display:inline-block;
		font-size:2vw;
		margin:0vw;
		padding:0vw;
		color:rgba(255,255,255,1.0);
		position:absolute;
		line-height: 4vw;
		left: 1vw;
		font-family: "bebas-neue", sans-serif;
		font-weight: 400;
		font-style: normal;
	}

	.icons .icon_container{
		width:auto;
		position: absolute;
		top:0vw;
		right:1vw;
	}

	.icons .icon_container .specific{
		width:4vw;
		height:4vw;
		margin:0vw 1vw;
		display:inline-block;
	}
	
	.icons img.icon{
		width:2vw;
		height:2vw;
		margin:1vw;
		transition: 0.5s;
	}
	
	.icons img.icon:hover{
		width:2.5vw;
		height:2.5vw;
		margin:0.75vw;
		transition:0.5s;
	}
	
}

/* Start of Mobile styling */
@media screen and (max-width: 1023px){
	body{
		background-color: rgba(21,20,18,1.0);
		background-image:url("images/Untitled-2.webp");
		background-size: cover;
		background-repeat: repeat;
	}

	.container{
		width:95vw;
		height:auto;
		background-color:rgba(0,0,0,0.2);
		border-radius: 5vw;
		border-color: rgba(255,255,255,1.0);
		border-width: thin;
		border-style: solid;
		margin:1vw 2.5vw;
	}

	.container img.logo{
		width:70vw;
		margin:5vw 15vw;
	}

	.container iframe{
		width:75vw;
		height:60vw;
		margin:5vw 10vw 2vw;
		border-style: none;
	}

	.icons{
		width:95vw;
		height:auto;
		background-color:rgba(0,0,0,0.2);
		border-radius: 5vw;
		border-color: rgba(255,255,255,1.0);
		border-width: thin;
		border-style: solid;
		margin:2.5vw;
		position: relative;
	}
	
	.icons .specific{
		display:inline-block;
	}

	.icons h1{
		display:block;
		font-size:14vw;
		margin:0vw;
		padding:0vw;
		color:rgba(255,255,255,1.0);
		font-family: "bebas-neue", sans-serif;
		font-weight: 400;
		font-style: normal;
		text-align:center;
	}

	.icons .icon_container{
		width:auto;
		display:block;
	}

	.icons img.icon{
		width:10vw;
		height:10vw;
		margin:4vw;
	}
}