* {
    padding: 0px;
    margin: 0px;
}
/* navigation bar */
.nav {
    width: 100%;
    height: 10vh;
    background-color: rgb(125, 163, 129);
}

.navrap {
    width: 80%;
    padding-top: 2vh;
    margin: auto;
    font-style: oblique;
}

.logo h1 {
    color: black;
    font-size: 40px;
    padding-top: -4vh;
}

.menu {
    float: right;
}

.menu ul {
    margin-top: -30px;
}

.menu ul li {
    display: inline;
    padding: 5px;
}

.menu ul li a {
    color: white;
    background-color: slategray;
    text-decoration: none;
    padding: 14px;
    border-radius: 15px;
    font-weight: bolder;
}

.menu ul li a:hover {
    padding: 14px;
    border-radius: 15px;
    color: slategray;
    background-color: white;
}
/* middle */
.mid{
    width: 100%;
    height: 300vh;
    background-color: rgb(136, 122, 89);
}
.midrap{
    width: 80%;
    margin: auto;
}
.midrap h1{
    color: black;
    font-size: 60px;
    text-align: center;
    font-family: cursive;
}
.midrap1{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    padding-top: 50px;
}
.box{
    border: 10px solid black;
}
.box img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 50px;
}
.box h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box1{
    border: 10px solid black;
}
.box1 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 15px;
}
.box1 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box2{
    border: 10px solid black;
}
.box2 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 50px;
}
.box2 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box3{
    border: 10px solid black;
}
.box3 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 15px;
}
.box3 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box4{
    border: 10px solid black;
}
.box4 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 50px;
}
.box4 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box5{
    border: 10px solid black;
}
.box5 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 15px;
}
.box5 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box6{
    border: 10px solid black;
}
.box6 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 50px;
}
.box6 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box7{
    border: 10px solid black;
}
.box7 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 15px;
}
.box7 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box8{
    border: 10px solid black;
}
.box8 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 50px;
}
.box8 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box9{
    border: 10px solid black;
}
.box9 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 15px;
}
.box9 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box10{
    border: 10px solid black;
}
.box10 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 50px;
}
.box10 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
.box11{
    border: 10px solid black;
}
.box11 img{
    height: 30vh;
    margin-top: 20px;
    margin-left: 5px;
}
.box11 h2{
    font-size: 30px;
    color: black;
    text-align: center;
    font-family: cursive;
    font-weight: bold;
    padding-top: 15px;
}
/* footer */
.footer{
    width: 100%;
    height: 8vh;
    background-color: rgb(125, 113, 113);
}
.footrap{
    width: 100%;
    height: 10vh;
    margin: auto;
}
.footrap h4{
    color: black;
    text-align: center;
    padding-top: 3vh;
    font-size: 25px;
    font-weight: bolder;
}