body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;

}



.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

h1{
    
    color: #fff;
    text-shadow: 0 0 10px #000;
    text-transform: uppercase;
}

body{
    background: rgb(185,255,237);
background: radial-gradient(circle, rgba(185,255,237,1) 0%, rgba(0,142,104,1) 81%, rgba(23,91,73,1) 100%);
}

img{
    width: 30%;
    object-fit: cover;
}


@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    img {
        width: 100%;
    }
}


@media screen and (max-width: 400px) {
    h1 {
        font-size: 2rem;
    }
    
}

@media screen and (max-width: 320px) {
    h1 {
        font-size: 1.5rem;
    }
}