index2.css

*{
    padding:0px;
    margin:0px;
}
header{
	height:100px;
	width:100%;
	background-image:linear-gradient(to right, red, red);
	
}
#logoBox{
	width: 30%;
	height: 100%;
	float: right;
	background-color: #fafafa;
}
#h1Header{	
	float: left;
	line-height: 100px;
	padding: 0 15px;
}
#logo{
	height: 100%;
	border-radius: 50%;
}
header a{
	color: black;
}
nav{
	width:70%;
	text-align: center;
}
nav a{
	text-decoration: none;
	color: white;
	font-weight: bold;
	display: inline-block;
}
nav li{
	display: inline-block;
	line-height: 100px;
	width:100px;
	text-align: center;
}
nav a:hover{
	background-color: white;
	color: black;
	height: 100%;
	width: 100%;
}
main{
	width: 100%;
	height: 450px;
	background-color: rgb(255, 55, 55);
	border-top: 3px solid white;
	animation-name: changeBackground;
	animation-duration: 10s;  
    animation-iteration-count: infinite;	
}
aside{
	width: 30%;
	height: 100%;
	background-color: #fafafa;
    text-align: center;
    float: left;	
}
aside img{
	width: 90%;
	
}
#h1Aside{
	padding: 20px 0;
	border-bottom: 2px solid red;
}
#article{
	float: right;
	height: 450px;
	width: 70%;
	position: relative;
}
#box{
	text-align: center;
	position: absolute;
	width: 400px;
	height: 180px;
	background-color: aqua;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	
}
#box h2{
	border-bottom: 3px solid red;
	padding: 15px 0; 
}
#box p{
	font-family: 'Josefin Sans', sans-serif;
	text-align:;
}
#box h2{
	font-family: 'Grandstander', cursive;
font-family: 'Josefin Sans', sans-serif;
}
#contact-box{
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 15px;
}
#contact-box img{
	width: 45px;
	border-bottom: 2px double red;
	padding-bottom: 10px;
	padding-left: 3px;
	padding-right: 3px;
}
#contact-box img:hover{
	width: 60px;
	border-bottom: 2px solid black;
	
}
@keyframes changeBackground{
	0%{
		background-color: white;
	}
	25%{
		background-color: green;
	}
	50%{
		background-color: red;
	}
	75%{
		background-color: yellow;
	}
	100%{
		background-color: black;
	}

}
/* @media only screen and (min-width:1034) and (max-width:1209){ */
    /* #logoBox { */
        /* width: 35%; */
        /* height: 100%; */
        /* float: right; */
        /* background-color: #fafafa; */
/* } */
	
		
/* }		 */
@media (max-width:1209px) and (min-width:1034px) {
		#logoBox {
        width: 35%;
        height: 100%;
        float: right;
        background-color: #fafafa;
        }   

		#aside{
		width: 35%;	
		}
    	
}

@media (max-width:1034px) and (min-width:940px) {
		#logoBox {
        width: 40%;
        height: 100%;
        float: right;
        background-color: #fafafa;
    }	
}
@media (max-width:940px) and (min-width:850px) {
		#logoBox {
        width: 45%;
        height: 100%;
        float: right;
        background-color: #fafafa;
        }   
		#aside{
		width: 45%;	
		}
    	
}
@media (max-width:850px) and (min-width:703px) {
		#logoBox {
        width: 52%;
        height: 100%;
        float: right;
        background-color: #fafafa;
        }     	
}

@media (max-width:703px) {
	    header, main{
			height: auto;
		}
		#logoBox {
            width: 100%;
			text-align: center;
        } 
		#h1Header, #logo{
			float: none;
		}
		#logo{
			float: none;
            height: 170px;
	        border-radius: 50%;
			margin-bottom: 15px;
			margin-top: -25px;
		}
        span a{
			text-decoration: none;
		}	
        nav{
			width: 100%;
		}
        aside{
			width: 100%;
		}	
        article{
			height: 230px;
			width: 100%;
			background-color: #fafafa;	
		}		
		#box{
			left: 32%;
			top: 30%;
		}
}
@media (max-width:500px) {
        nav li{
		display: block;	
		width: 100%;
		
		}
             	
}