index.css

@media all and (max-width:1600px){
html{
font-size: 20px; 
}
}    
@media all and (max-width:800px){
html{
font-size: 15px; 
}
}   
body{
background: rgb(1,8,2);
background: linear-gradient(90deg, rgba(1,8,2,1) 0%, rgba(4,0,0,1) 0%, rgba(3,36,0,1) 40%, rgba(4,0,0,1) 100%, rgba(9,29,6,0.865983893557423) 100%);
margin: 0;
color: whitesmoke;
height: 100%;
}
html{
font-size: 16px;
}
main{
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
nav{
height: 40px;
background: rgb(1,8,2);
background: linear-gradient(90deg, rgba(1,8,2,1) 0%, rgba(4,0,0,1) 0%, rgba(3,36,0,1) 40%, rgba(4,0,0,1) 100%, rgba(9,29,6,0.865983893557423) 100%);
position: sticky;
width: 100%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
top: 3px;    
}
section{    
height: 200vh;
font-size: 1.5rem;
padding: 1px 0px;        
}
nav ul{
list-style: none;
padding: 0px;
margin: 0;       
}
nav li{
float: left;
width: 12.50%;
text-align: center;     
}
nav a{
font-size: 1.2rem;
line-height: 40px;
text-decoration: none;
color: red;
transition: color 1s linear 0.3s;
}
nav a:hover{ color: darkgreen;}

span{
padding-top: 50px;
text-align: center;
}
section a{
padding-top: 40px;
}
article{
font-size: 1.5rem;
height: 80vh;
padding: 40px 10px;
font-size: large;           
}
article li{
float: left;
width: 25%;
text-align: center;
font-size: 19px;
}
article ul{
list-style: none;
padding: 0;
margin: 0;
}
banner img{
width:1100px;
height: 320px;
}
p{
text-align: center;}
span{
display: flex;
justify-content: center;
font-size:xx-large;
}
#ob1 img{
width: 275px;
height: 412px;
float: left;      
}
#ob2 img {
width: 275px;
height: 412px;
float: left; 
}
#ob3 img {
width: 275px;
height: 412px;
float: left;  
}
#ob4 img {
width: 275px;
height: 412px; 
clear: both;  
}
h1{
text-align: center;
font-family: verdana;    
}