body, html {
  background-color: #0c0c0c;
}

.main-block {
  display:flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  justify-content: center;;
}

.laptop{
  display:flex;
  flex-direction: column;
  align-items: center;
  width:75%;
  margin-block:25px;
}

.screen {
  width: 75%;
  background: #222;
  border-radius: 15px 15px 0 0;
  border-inline: 1px solid black;
  border-top: 1px solid black;
  padding: 15px;
}

.base {
  width:100%;
  height: 25px;
  background: #333;
  border-radius: 0 0 15px 15px;
  border: 1px solid black;
}

.btn {
  all:unset;
  display:flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width:50px;
  aspect-ratio: 1/1;
  font-size:x-large;
  font-weight: 900;
  border: 2px solid white;
  border-radius: 100%;
  color:white;
}
.btn:hover {
  color: #af4428;
  border-color: #af4428
}
.pages {
  display:none;
}

.pages img {
  width:100%;
  object-fit: cover;
}


.pages.active {
  display: flex;

}

.pages.off {
  display: none;
}