*{
margin: 0;
padding: 0;
font-family: Arial;
}

.header{
width: 100%;
height: 30vh;
}
.top-nav{
width: 100%;
background-color:#000;
height:10%;
}
.top-nav p{
color: #fff;
text-align: center;
}
.navbar{
width: 100%;
height: 20vh;
background-color: navy;
display: flex;
justify-content: space-evenly;
align-items: center;
}
h2{
color: #fff;
}

.navbar a{
text-decoration: none;
color: #000;
}
.navbar button{
padding:  5px  15px;
border-radius: 25px;
border: none;
cursor: pointer;
}
#middle-section{
width: 100%;
height: 100vh;
}
.image{
background-image: url(../images/freddy-kearney-o-ioeoATbIM-unsplash.jpg);
width:100%;
height:100vh;
background-size: cover;
background-position: center;
}

#last-section{
width: 100%;
height: 50vh;
}
.split{
width: 100%;
display: flex;
height:100%;
}

.fourty{
flex-basis: 30%;
background-color: rgba(1, 1, 14, 0.76);
}
.name{
margin-top: 20%;
margin-left: 30%;
margin-right: 30%;
}
.name h1{
/* text-align: center; */
color: #fff;
}
.name-1{
margin-top: 15px;
margin-left: 30%;
color: #fff;
}
.name-2{
margin-left: 35%;
color: #fff;
}

.button{
margin-left: 30%;
margin-top: 5%;
/* display: block; */
} 
.design{
text-decoration: none;
}
.button{
padding: 10px;
 border: none;
 border-radius: 15px;
 cursor: pointer;
background:rgb(209, 155, 53);
color: #fff;
}
.sixty{
flex-basis: 70%;
background-color: rgb(209, 155, 53);
}
.chars{
margin-left: 10%;
margin-right: 10%;
}
.chars p{
margin-top: 3%;
text-align: center;
color: #fff;
text-align: 18px;
}

@media (max-width: 500px){
    .split{
    display: flex;
    flex-direction: column;
    }
    .fourty{
    flex-basis: 50%;
    }
    .sixty{
    flex-basis: 50%;
    }

    .button{
    margin-bottom: 3%;
    }
}