body {
    background-image: url('../pictures/backdrop.png');
    background-size: 150px;
    background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
}


.h1{
    color: rgb(197, 159, 35);
   
}

.links {
      text-decoration: none;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 20px;
        color: rgb(32, 72, 95);
        
        :hover{
            color: rgb(97, 164, 240);
            text-decoration: none;
            
        }
        :active{
             text-decoration: none; color: rgb(32, 72, 95);
            :hover{
            color: rgb(84, 150, 212);
            }
            }
      
    }
    
.div1 {
    position: top;
   position: fixed;
   display: flex;
    
    background-color: rgb(241, 230, 221);
    width: 90%;
    
    padding: 2px;
    top: 2px;
    border: 5px solid rgb(37, 72, 73);
   
    justify-content: space-evenly;
   
    
    
    justify-self: center;
    
  
}

.div2 {
    background-color: rgb(241, 230, 221);
    width: 90%;
    display: flex;
    padding: 2px;
    top: 2px;
    border: 5px solid rgb(37, 72, 73);
    align-content: space-evenly;
    justify-content: space-evenly;
    align-items: space-evenly;
    justify-self: center;

}
.div3 {
    background-color: rgb(241, 230, 221);
    width: 90%;
    display: flex;
    padding: 2px;
    top: 2px;
    border: 5px solid rgb(37, 72, 73);
    align-content: space-evenly;
    justify-content: space-evenly;
    align-items: space-evenly;
    justify-self: center;
    justify-content: center;
    object-fit: contain;

}

.div4{
    
    flex-direction: column; /* Stack items vertically */
    width: 90%;
    display: flex;
    padding: 10px;
    top: 10px;
   
    align-content: space-evenly;
    align-items: center;
    align-items: space-evenly;
    justify-self: center;
    justify-content: center;
    object-position: center;
    object-fit: fill;
    overflow: hidden;
    
}

.gallery{
    max-width: 70%;
    padding: 10px;
}


.firsttext {
    padding-top: 90px;
    align-self: center;
    justify-self: center;
    
}

.text {
    color: rgb(22, 32, 65)


}

.about {
    float: left;
    padding-top: 100px;
    padding-left: 5%;
    padding-right: 5%;
    
    width: 60%;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    

}

.picture{
    
    padding-top: 80px;
    padding-right: 5%;
    padding-bottom: 5%;
    width: 25%;
    height: 2%;
    align-self: right;
    justify-self: right;
    float: right;
    object-fit: scale-down;
    
    }

.bottom{
    position: fixed;
    
    bottom: 0;
    padding-bottom: 5%;
    align-self: center;
    justify-self: center;
    text-align: center;
    text-decoration: none;
    justify-content: space-evenly;
    
    display: flex;
    font-size: 20px;
    color: rgb(32, 72, 95);
        
        :hover{
            color: rgb(97, 164, 240);
            text-decoration: none;
        }
        :active{
             text-decoration: none; color: rgb(32, 72, 95);
            :hover{
            color: rgb(84, 150, 212);
            }
            }
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.about{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: larger;
    color: rgb(1, 7, 20)
}