@font-face {
       font-family: "deli";
       src: url(../fonts/Delicious_Handrawn/DeliciousHandrawn-Regular.ttf);
}
@font-face {
       font-family: "ralewaybold";
       src: url(../fonts/Raleway/Raleway-Bold.ttf);
}
      
@font-face {
            font-family: "ralewaymedium";
            src: url(../fonts/Raleway/Raleway-Medium.ttf);
}

html{
    scroll-behavior: smooth;
}

body{
     background-image: url(../images/her.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     margin: auto;
     max-height: 834px;
     min-height: 630px;
}

header{
       width: 100%;
       height: 107vh;
}

.navlist :hover{
             transform: scale(1.05);
             transition: 0.6s ease-in-out;
}

#bloc :hover{
             transform: scale(1.05);
             transition: 0.6s ease-in-out;
}

.navlist{
    padding: 3px;
    background-color: #84BF00;
    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-around;
    margin-top: 0;
    z-index: 1;
}


nav a {
       color: white;
       text-decoration: none;
       font-size: 14px;
       font-family: "ralewaymedium";     
}

nav a :hover{
       color: white;
       font-size: 14px;
       font-family: "ralewaybold";     
}

li{
   list-style: none;
}

#titlebox{
          margin-left: 13%;
          display: flex;
          flex-direction: column;
          margin-top: 5%;
}

h1{
    color: white;
    font-size: 65px;
    font-family: "Proza Libre", sans-serif;
    font-weight: bold;
    font-style: italic;
    background-color: #84BF00;
    width: 29%;
}

h2{
    color: white;
    font-weight: bold;
    font-size: 85px;
    font-family: "Proza Libre", sans-serif;
    width: 40%;
}

h3{
       color: white;
       font-weight: bold;
       font-size: 40px;
       font-family: "deli";
}

#present{
         display: flex;
         background-color: #332F6B;
         justify-content: center;
}

span{
    align-items: center;
    font-style: italic;
    font-family: "deli";
    font-size: 32px;
}

#text{
      text-align: center;
      font-family: "ralewaymedium";
      font-size: 21px;
      font-weight: lighter;
      color: white;
      line-height: 200%;
      padding-inline: 4%;
      margin-top:140px;
      display: block;
}

#variantr{
    background-color: #9D1803;
    color: white;
    font-size: 25px;
    font-family: "ralewaybold";
    padding: 25px;
    margin-top: 7%;
    margin-bottom: 1%;
    text-align: center;
}

#red{
    color: #9D1803;
    border-radius: 20px;
    font-family: "ralewaymedium";
    font-size: 25px;
    margin-top: 81px;
    line-height: 1px;
}

h4{
   background-color: #332F6B;
   color: white;
   font-family: "ralewaybold";
   font-size: 30px;
   padding: 25px;
   margin-top: 7%;
   text-align: center;
   margin-bottom: 4%;
}

section{
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
}

#bloc{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3%;
}

h5{
    color: #332F6B ;
    font-size: 25px;
    font-family: "ralewaymedium";
}

#titre{
       margin-left: 20%;
}

p{
    font-size: 14px;
    font-family: "ralewaymedium";
    color: #332F6B;
    display: flex;
    gap: 11px;
}

#adress{
       line-height: 36px;
       font-size: 14px;
       font-family: "ralewaymedium";
       color: #9D1803;
       display: block;
       font-size: 14px;
}

#adress img{
            margin-right: 9px;
}

#txt{
     text-align: center;
     font-size: 18px;
     font-family: "ralewaymedium";
     color: black;
     line-height: 161%;
     padding-inline: 20%;
}

.map{
    display: flex;
    justify-content: center;
    margin-top: 4%;
}

footer{
       background-color: #332F6B;
       display: flex;
       justify-content: center;
       flex-direction: column;
       margin-top: 7%;
       align-items: center;
}
footer img{
           width: 40%;
}

#foot{
      font-size: 14px;
      font-family: "ralewaymedium";
      color: white;
}

iframe{
        width: 90%;
}

a{
  display: flex;
  justify-content: center;
  text-decoration: none;
}

button{
         background-color: #9D1803;
         color: white;
         border-radius: 12px;
         padding: 15px;
         font-size: 15px;
         font-family: "deli";
}

#blu {
         background-color: #332F6B;
         color: white;
         border-radius: 12px;
         padding: 15px;
         font-size: 15px;
         font-family: "deli";
         
}

a :hover{
         transform: scale(1.05);
         transition: 0.6s ease-in-out;
}

#video{
      display: flex;
      justify-content: center;
      padding: 5%;
      height: 65vh;
}

#video video{
             border-radius: 30px;
             border-color: #332F6B;
             border-style: solid
}

#log{
     display: flex;
     justify-content: center;

}

#log p{
       font-family: "deli";
}

#hotels{
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 7%;
}