*{
    padding: 0;
    margin: 0;
    color: white;
    box-sizing: border-box;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
h1{
    padding: 2%;
    padding-bottom: 0;
}
body{
    background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), url(img/background.JPEG) ;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main{
    width: 100%;
}
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 40px;
    padding-left: 10%;
    padding-right: 10%;
}
.logo{
    color: azure;
    font-size: 28px;
}
span{
    color: aqua;
}
nav ul li{
    list-style-type: none;
    display: inline-block;
    padding: 10px 20px;
    font-size: 20px;
}
nav ul li a{
    color: aliceblue;
    text-decoration: none;
    font-weight: bold;

}
nav ul li a:hover{
    color: aquamarine;
    transition: 0.5s;   
}
.hero{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5%;
}
img{
    width: 100%;
}
.gallery{
    display: inline-block;
    border: 1px solid azure;
    justify-content: center;
    margin: 5px;
    width: 25%;
    
}
.gallery .description{
    padding: 10px;
    text-align: center;
    background-color: rgba(0,0,0,0.7);
    color: aqua;
}
.gallery:hover{
    border: solid rgba(0,0,0,0.7);
}
h2{
    padding: 5%;
}
p{
    padding-bottom: 1%;
}
button{
    color:rgb(31, 27, 27);
    background-color: aqua;
    padding: 7px;
    border-radius: 10px;
    padding-left: 2%;
    padding-right: 2%;
    font-weight: bold;
}
button:hover{
    background-color: rgba(0,255,255,0.8);
    transform: scale(1.2);
    transition: 0.2s;
}