:root{
  font-size:16px;
}

body {

    margin:0;
    background: white;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    padding:0;
  }

  /*   <section class="welcome-photo"> */

section.welcome-photo{
  
    background-position:43% 70%;
    background-image: url("../resources/start_page_photos/initial-photo.jpg");
    height:50em;
    background-size:cover;
    position:relative;
}

#welcome-photo-text{
    position:absolute;
    bottom:1.8em;
    padding-left:12vw;
    margin:0;
    font-size:2.6em; 
    color:rgb(12, 14, 9);
    font-style:Andale Mono, monospace;
    font-weight:normal;
}

#welcome-photo-text::first-letter{
  font-size: 3.5rem;
  font-weight: normal;
}


/*   <section class="cover-text"> */

.cover-text p{
    margin:0;
    text-align: left;
    padding-left:12vw;
    padding-right:20vw;

    padding-top:2em;
    padding-bottom:2em;;
    font-size:1.6em;

    
}

.cover-text{
  background-color: rgb(244, 243, 243);

}

.icons{
      background-color: rgb(244, 243, 243);
      margin-bottom:2em;
      padding-bottom:2em;
      padding-left:12vw;
      padding-right:14vw;

}



.icons .row{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.icons .second{
  width:70%;
  /* background-color:blue; */
  margin:0 auto;
  padding-top:0.2em;

}

.icons .second button{
  margin:0 auto;
}

.icons img{
  height:2em;
}

.icons .elem{
  width:100%;
  margin:1em;
  display: flex;
  align-items: center;
  width:fit-content

}

.disclaimer {
  padding-left:12vw;
  padding-bottom:1em;
  padding-right:20vw;


}



.disclaimer p {
  font-size: 1.8em;
  border: 3px solid yellow;
  width:auto;
  padding:0.8em;
  padding-top:0.4em;

}





/* <section class="pictures"> */

.pictures{
  padding-left:12vw;
  padding-right:14vw;
  margin-bottom:2em;
}

.image-row {
  display: flex;
  flex-wrap: wrap;
}

.image-item {
  flex:1;
  height: 5em; 
  margin-right: 1.4em; 
  margin-top:1.4em;
  cursor: pointer;
  max-width: 12em;
}


#enlarged-image-container {

  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
}


#enlarged-image-container .wrapper{
  position: relative;
  width: 80%;
  height: 80%;


}

#enlarged-image{
    position:absolute;
    max-height: 1100px;
    width:100%;
    height:100%;
}



#enlarged-image-container .close {
  position:absolute;
  right:-1em;
 
  z-index: 6;
  display:inline;
  width:1em;
  height:auto;
  font-size: 2em;
  cursor: pointer;
  background-color: transparent;
  border:none;
  color:white;
}

#enlarged-image-container .arrow{
  position: absolute;
  display:flex;
  align-items: center;
  top: 50%;
  font-size:50px;
  width: 50px;
  height: 50px;
  border:none;
  color: white;
  background-color: transparent;
}

#enlarged-image-container .arrow:hover{
  color:white;
	background-color: rgba(0, 0, 0, 0.1);
}


#enlarged-image-container .left-arrow{
  left: 0;
}

#enlarged-image-container .right-arrow{
  right: 0;
}






/*   <section class="map"> */


.map{
  padding-left:12vw;
  padding-right:14vw;
  margin-bottom:7em;
}

/* media rules */


@media  (max-width: 1050px) {
    .cover-text p, .disclaimer {
        padding-left: 3vw;

    }

    

    #welcome-photo-text{
        padding-left:3vw;
    }

   

    .room-container.room-container, .map, .icons, .pictures{
      padding-left:3vw;
      padding-right:4vw;

    }

    #enlarged-image-container .wrapper{
      max-height:40%;
    }

    .close {
      right:0

    }

}

@media  (max-width: 600px) {
  section.welcome-photo{
    height:30em;

  }

  .map{
    margin-bottom:2em;
  }

  :root{
    font-size: 0.8rem;
  }

  .room-container .anchor-container.anchor-container{
      padding-right: 2em ;
    }

    #welcome-photo-text{
      bottom:0.8em;
    }

}

@media only screen and (min-width: 1050px) {
  .room-container {
    grid-template-columns: repeat(2, 1fr);
      }

      #enlarged-image-container .arrow{
        font-size: 90px;
        height:130px;
        margin-right:1rem;

      }

}

/*     <section class="room-container"> */

.room-container {
    display: grid;
    gap: 4em;
    margin:0;
    padding-left:12vw;
    padding-right:14vw;
    

  }
  
  .room-container .room {
    
    background-color: rgb(244, 243, 243);
  }
  

  .room{
    margin-top:1em;

  }



   .background-image{
    width: 100%;
    height: 15em; 
    background-size:  cover;                   
    background-position:center;
  }

  #r1{
    background-image: url("../resources/room_photos/yperpoliteli/presidential_suit.jpg");

  }

  #r2{
    background-image: url("../resources/room_photos/deluxe_2_room/deluxe_2_room.jpg");

  }
   #r3{
    background-image: url("../resources/room_photos/deluxe_1_room/deluxe_1_room.jpg");

  }
  #r4{
    background-image: url("../resources/room_photos/simple_2_room/apartment_2_room.jpg");

  }
  #r5{
    background-image: url("../resources/room_photos/simple_1_room/apartment_1_room.jpg");

  }
  

  .name {
    font-size: 1.5em;
    font-weight: bold;
    margin-top: 1.2em;
    margin-left:1rem;
  }


  .description{
    text-align: justify;
    margin-left:1rem;
    margin-right:0.6em;
  }
  
  .advantages{
    display:inline;
    font-size: 1.4em;
    margin-left:1rem;
    font-weight: normal;
    }



  .room_description .seperator{
    position:relative;
    bottom:1.2em;
  }

  .room-container .seperator {
    width:90%;
    background-color: rgba(0,0,0,0.1);
    
    height:0.1em;
    margin:0 auto;
    border:none;
  }
  .room-container .anchor-container{
    
    text-align: right;
    padding-right:4em;
    margin:1em;
  }

  .room-container a{
      text-decoration:none;
      text-align: right;
      font-size: 1.5em;
      color:black;
  }