*{
    box-sizing: border-box;
}


body {
  background-color: rgb(57, 179, 216);
  
  
  
}

h1 {
    color: rgb(255, 225, 170);
    font-size: 4.5rem;
    text-align: center;
    background-color: rgb(14, 38, 51);
    font-family: serif;
    line-height: 14.5rem;
    @media (width > 900px) {
        font-size: 8rem
        
    }
    
    
}

h2 {
    color: rgb(209, 52, 52);
    font-size: 5rem;
    font-family: cursive;
    background-color: rgb(31, 76, 134);
    margin-block-start: 200px;
    padding: 50px;
    text-align: center;
    
}
p {
     color: rgb(206, 255, 221);
    font-size: 3rem;
    font-family: 'Courier New';
    margin-block: 50px;
    
}



b {
    color: rgb(23, 161, 127);
    font-family: cursive;
    background-color: rgb(14, 80, 167);

}
footer {
    background-color: rgb(31, 76, 134);
}
img {
    border: 20px solid rgb(13, 15, 102)
}
    
    
.a {
    color:rgb(11, 7, 63);
    background-color: rgb(25, 105, 170);
    padding: 25px;
}

.b {
    color:rgb(27, 90, 161);
    background-color: rgb(4, 20, 49);
}

.color {
    color: rgb(209, 209, 108)
}

a:visited {
    color:rgb(18, 110, 153)
}

a:hover,:focus-visible {
    color: rgb(109, 20, 211)
}

a:active {
    color:aqua
}

.f {
    color: white;
}


.i p {
    color: rgb(255, 255, 255);
    font-family: serif;
    font-size: 5.5rem;
}

ul {
    color: red;
    list-style:square;
    font-size: 50px;
}


li::marker {
    color: black
}

.con {
    max-inline-size: 1500px;
    margin-inline: auto;
}

img {
    max-inline-size: 100%;
}

.two {
    display: grid;
    @media (width > 1000px) {          
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}
}

.cen {
    text-align: center;
}

header {
    display: flex;
    gap: 50px;
    justify-content: space-between;
}

header img {
    border: solid red 10px;
}

nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 50px;
    
    
    
}



.mar {
    margin-block-start: 0;
}

.marg {
    margin-block-end: 0;
}