*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* background */
.background{
  width: 100%;
  height: 100vh;
  background-image: url(./photos/pexels-vecislavas-popa-1643383.jpg) ;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.shadow{
  width: 100%;
  height: 100vh;
  background-color:rgba(225, 225, 225, 0.5) ;
}
/* sidebar */
.sidebarlabel div{
  width: 32px;
  height: 32px;
  background-image: url(./photos/horizontal_menu_burger_icon_227407.png);
  position: relative;
  top: 20px;
  left: 160px;
  z-index: 3;
  
}
input[type="checkbox"]{
  display: none; 
  visibility: hidden;
  
}

input:checked~.sidebar{
  display: block;

}

.sidebar{
  width: 200px;
  height: 100vh;
  background-color: rgba(225, 225, 225, 0.8);
  display: none;
  z-index: 1;
  position: absolute;
  top: 0px;
}
.sidebar ul li{
  margin-top: 40px;
list-style: none;
}
a{
  color: rgba(255, 255, 255);
  text-decoration-line: none;
  padding: 40px;
  display: block;
  transition: color 0.2s ease;
}

.sidebar a:hover{
  color:#33646b ;
}
/*content */
.centercontent{

  width: 90vw;
  position: relative;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: white;
  
}


h1{
  font-size: 90px;
  display: flex;
  justify-content: center;
  margin: 20px;
  text-transform: capitalize; 
  color: white; 
}
.buttons{
  display: flex;
  justify-content: center;
  
  position: relative;
  top: 100px;
}
button{
  width: 200px;
  height: 60px;
  background-color: rgba(225, 225, 225, 0.8);
  border: none;
  font-size: 20px;
  color: white;
  transition: background-color 0.3s ease;
  
}
.more{
  position: absolute;
  left:60%;
}

/* login */
.loginbutton{
  width: 200px;
  height: 60px;
  background-color: rgba(225, 225, 225, 0.8);
  border: none;
  font-size: 20px;
  color: white;
  position: absolute;
  left: 21%;  
  transition: background-color 0.3s ease;
}
.loginbutton label{
position: relative;
top: 15px;
}
.loginbutton:hover{
  background-color:#33646b ;

}
.login{
  width: 350px;
  height: 400px;
  background-color: rgba(255, 255, 255,1);

  border-radius: 5px;
  position: absolute;
  left: 365px;
  bottom:200px ;
  transform: translate(-50%,-50%);
  display: none;
  z-index: 4;
  position: relative;

  
}

#account:checked~.login{
  display: block;
}
.login #account label{
  position: absolute;
  top: 30px;
  left: 50px;
}
.exit{
  width: 30px;
  height: 30px;
  background-image: url(./photos/4115230-cancel-close-cross-delete_114048.png);
  background-size: cover;
  position: relative;
  left: 290px;
  top: 5px;


}
.login input{
  width: 250px;
  height: 40px;
  border: none;
  outline: none;
  border-radius: 5px;
  margin: 20px;
  background-color: rgba(225, 225, 225, 0.9);
  position: relative;
  top: 15%;
  left: 35%;
  transform: translate(-50%,-50%);
}

.login button{
  position: relative;
top: 60px;
color: black;
}
.login a{
  position: relative;
  top: 60px;
  left: 95px;
  color: #33646b;
}
input::placeholder{
padding-left: 10px;
color: black;
}

button:hover{
  background-color:#33646b ;
  color: white;
  
}



/* photo */
.section,.bedroomsection,.kitchen{
  margin: 10px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4,1fr); 
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
} 

.section>div ,.bedroomsection>div,.kitchen>div{
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;

}

.section>div>img ,.bedroomsection>div>img,.kitchen>div>img{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;


}
/* section */
.section>div:nth-child(1){
  grid-row-start: span 2;
}
.section>div:nth-child(2){
  grid-column-start: span 2;
  grid-row-start: span 2;

}
.section>div:nth-child(3){
  grid-row-start: span 3;
}
.section>div:nth-child(4){
  grid-column-start: span 2;
  grid-row-start: span 2;

}
.section>div:nth-child(5){
  grid-row-start: span 3;
}

.section>div:nth-child(6){
  grid-row-start: span 2;
  grid-column-start: span 2;

}

.section>div:nth-child(8){
  grid-column-start: span 2;
  grid-row-start: span 3;

}
.section>div:nth-child(10){
  grid-column-start: span 2;
}

.section>div:nth-child(11){
  grid-row-start: span 3;
}
.section>div:nth-child(13){
  grid-row-start: span 2;
} 
.section>div:last-child{
  grid-row-start: span 2;
  grid-column-start: span 2;

}