.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}
.logo-select img {
  width: 269px;
}

.last-servers-contents {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.last-servers-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.last-servers-wrapper .img-last {
  width: 130px;
}

.last-servers-logo {
  color: white;
}

.last-server-chanal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.last-server-chanal img {
  width: 100px;
}

.last-server {
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.last-server .chanal {
  position: absolute;
  right: 50px;

  color: #d1b538;
}

.last-server .text-last-server {
  position: absolute;
  right: 77px;
  color: #818181;
  font-size: 10px;
}

.character_1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 145.5px;
}
.character_2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 145.5px;
}
.chanal-server {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0px 40px 0px;
}
.chanalwrap {
  margin-right: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.chanalwrap img {
  width: 80%;
}
.selectserver img {
  width: 117px;
  margin-top: 20px;
}
a {
  cursor: pointer;
  transition: 0.3s;
}
a:hover {
  transform: scale(1.1);
}
.hot img {
  width: 54.5px;
}
.hot {
  position: absolute;
  bottom: -10px;
  right: -20px;
}
.new img {
  width: 54.5px;
}
.new {
  position: absolute;
  bottom: -10px;
  right: -20px;
}
.up img {
  width: 54.5px;
}
.up {
  position: absolute;
  bottom: -10px;
  right: -20px;
}
.server-img {
  position: relative;
}

.last-server .server-bg {
  width: 210px;
}

.button-play {
  cursor: pointer;
}

.user-icon {
  position: absolute;
  transform: scale(15%);
  left: 122px;
  filter: invert(40%) grayscale(90%);
}

.last-time {
  position: absolute;
  transform: scale(30%);
  top: 3px;
  left: -10px;
}

.last-icon {
  position: absolute;
  transform: scale(20%);
  bottom: -3px;
  left: -10px;
}
.multiple-items {
  display: none;
}
@media screen and (max-width: 940px) {
  .character_1 {
    display: none;
  }
  .character_2 {
    display: none;
  }
}
@media screen and (min-width: 820px) {
  .container {
    height: 100%;
  }
}
@media screen and (max-width: 768px) {
  .container {
    height: 100%;
  }
  .character_1 {
    display: none;
  }
  .character_2 {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  /* body{
      height:100vh; remove for responsive
    } */
  .multiple-items {
    margin: 10px;
    display: block;
    height: 100%;
    margin-top: 5rem;
  }
  .logo-select {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container {
    padding: 10px;
    display: block;
    justify-content: 0;
    align-items: 0;
    flex-direction: 0;
  }
  .chanal-server {
    display: none;
    /* display: flex;
      flex-direction: column;
      justify-content:center;
      align-items:center; */
  }
  .chanalwrap {
    margin-right: 0px;
    margin-bottom: 20px;
  }
  .character_1 {
    display: none;
  }
  .character_2 {
    display: none;
  }
  .last-servers-contents {
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 376px) {
  /* body {
    height: 120vh; remove for responsive
  } */
}