@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Roboto+Condensed:wght@300;400;700&display=swap');

*{
    padding:0;
    margin:0;
}
main{
    max-width: 1000px;
    margin: 2rem auto;
    box-shadow: 20px 0px 50px rgba(0, 0, 0, 0.1),-20px 0px 50px rgba(0, 0, 0, 0.1);
    font-family: Roboto Condensed,sans-serif;  
    padding:.5rem;  
    background: #ffdddd;
}

img{
    display: inline-block;
    width: 100%;
    height: 100%;
}
a{
    text-decoration: none;
    color: #333;
}
.split{
    display: flex;
}
.content{
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content h1{
    font-weight: 400;
}
.content h3{
    font-weight: 200;
}
.content .inner{
    text-align: center;
}
.content a{
    margin-top: .5rem;
    display: inline-block;
    border:2px solid #ccc;
    padding:0.6rem 1.5rem;
    border-radius: 50px;
}
.content a:hover{
    background: rgb(233, 230, 230);
}
.image{
    width: 50%;
    height: 80vh;
    background-image:url('https://source.unsplash.com/1600x900/?travel,human');
    background-position: center;
    background-size: cover;

}
.nav{
    padding:1.5rem;
    background: #181818;
    color:white;
    text-align: center;
}
.nav h2{
    padding:.5rem;
    display: inline-block;
    border-left: 1px dotted white;
    border-right: 1px dotted white;

}
.context{
    text-align: center;
    height: 5rem;
}
footer{
    border-top: 1px solid #333;
    text-align: center;
    padding:1rem;
}
footer h1{
    font-size: 3rem;
}
footer p{
    font-size: 1.2rem;
}
@media (max-width:700px) {
    h1{
        font-size: 2rem;
    }
    p{
        font-size:.8rem;
    }
    main{
        margin-top: 0;
    }
.split
{
    flex-direction: column;
}
.split .inner h1{
    font-size: 1.5rem;
}
.split .inner h3{
    font-size: 1rem;
}
.split .inner a{
    padding:1rem;
}
.split>div{
    width: 100%;
    height: 50vh;
}

}