@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;1,400&display=swap');
* {
  box-sizing:border-box;
  font-family: 'Poppins', sans-serif;
}
body {
  margin:0;
  padding:0;
  border:0;
  width:100%;
  height:100vh;
}

.model {
  display:none;
}

.hp-button {
  position:absolute;
  height:100vh;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 30px;
  transition: .17s linear;
}
.hp-button img {
  width:50px;
  border:2px solid #000;
  border-radius:50%;
  box-shadow:0 0 9px #000;
  cursor:pointer;
}
.next-button {
  transition: .17s linear;
}

.hp-area {
  height:inherit;
  width:100%;
  background-color:#503a1e;
  overflow:hidden;
}
.hp-main-area {
  height:inherit;
  width:100%;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:space-around;
  transition: .17s linear;
}
.hp-item-area {
  display:flex;
  height:100vh;
  align-items:center;
  transition:.17s linear;
}

.favorites {
  z-index:99;
  cursor:pointer;
  position:absolute;
  right:30px;
  top:30px;
  width:50px;
  transition: .17s linear;
}

.hp-name {
  font-size:29px;
  font-weight:700;
  text-shadow:1px 1px 2px #000;
  display:flex;
  align-items:center;
}
.name-char {
  margin-right:10px;
}
.hp-image{
  width:auto;
  height:410px;
  box-shadow:0 0 15px #000;
  border-radius:25px;
}
.hp-image-char  {
  height:inherit;
  object-fit:cover;
  object-position: center;
  border-radius:inherit;
}
.hp-favorite {
  width:40px;
  cursor:pointer;
  z-index: 99;
}
.hp-house {
  font-size:29px;
  font-weight:700;
  text-shadow:1px 1px 2px #000;
}

.favorite-area {
  transition: .17s linear;
}
.favorites-side {
  position:absolute;
  height:100vh;
  right:0;
  top:0;
  width:292px;
  background-color:#333;
  display:none;
  flex-direction:column;
  padding:20px 0;
  transition:0.17s linear;
  margin-right:-292px;
  overflow-y:scroll;
} 
.container-favorites {
  display:flex;
  align-items:center;
  justify-content:space-around;
  margin-bottom:20px;
}

.image-side {
  width:50px;
  height:auto;
}
.favorite-image {
  width:inherit;
  box-shadow:0 0 10px #000;
  border-radius:5px;
}
.favorite-name {
  width:100px;
  font-size:15px;
  color:#fff;
  text-align:center;
  word-wrap: break-word;
}
.favorite-house {
  font-size:15px;
  color:#fff;
  text-align:center;
  word-wrap: break-word;
}
.favorite-close {
  display:flex;
  align-items:center;
  height:inherit;
  cursor:pointer;
}
.favorite-close img {
  width:23px;
}


@media (max-width: 765px) {
  .hp-button {
    padding:0 10px;
  }
  .hp-image {
    height:300px;
  }
  .hp-main-area {
    padding:45px 0;
  }
  .hp-name {
    flex-direction:column;
  }
  .favorites-side {
    padding-top: 100px;
    width:100%;
  }
  .favorites {
    width:35px;
  }
}

@media (min-width:766px) and (max-width:1020px) {
  .hp-main-area {
    flex-direction:row;
    justify-content:center;
  }
  .hp-image {
    height:250px;
    margin-left:30px;
    margin-right:30px;
  }
  .hp-image-char {
    height:inherit;
  }
  .hp-name {
    font-size:18px;
    width:160px;
    word-wrap: break-word;
    text-align:center;
  }
  .hp-favorite {
    width:26px;
  }
  .hp-house {
    font-size:18px;
    width:160px;
    word-wrap: break-word;
  }
  .favorites-side {
    width:100%;
    padding-top:100px;  
  }
  .favorites {
    width:35px;
  }
}