html, body{
    height: 100%;
}
body{
    background: linear-gradient(135deg, #667eea, #764ba2);
    margin: 0;
}

h1{
    color: #f0f0f0;
    margin: 0;
    padding: 40px 0 40px 50px; 
}
nav{

    display: flex;
    flex-direction: column;
}
a{
    flex: 1;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 6% 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
}
p{
    color: rgb(46, 46, 46);
    background-color: rgba(255, 255, 255, 0.4);
    font-size: 2em;
    margin: 0;
    font-weight: bold;
    border-radius: 40px;
    padding: 15px 20px;
}
.cats{
    background-image: url(cats.png);
}
.leafy{
    background-image: url(leafy.png);
}
.nemo{
    background-image: url(nemo.png);
}
.winter{
    background-image: url(winter.png);
}
.iceland{
    background-image: url(iceland.png);
}
.bussines{
    background-image: url(bussines.png);
}
.welformed{
    background-image: url(welformed.png);
}
.seaworld{
    background-image: url(seaworld.png);
}
.catmint{
    background-image: url(catmint.png);
}
.twinspa{
    background-image: url(twinSPA.png);
}
.mountains{
    background-image: url(mountains.jpg);
}
.hotel{
    background-image: url(image.png);
}
.flippy{
    background-image: url(mesto.jpg);
}
@media(min-width: 950px){
    nav{
        flex-direction: row;
    }
}