body {
  margin: 0;

  background: url("pattern.png");
  overflow: hidden;
  background-size: auto;
  background-position: left;
  background-repeat: repeat;
  font-family: Arial, sans-serif;
}

#content {
  height: 100vh;
  width: 100vw;
}

#header h1{
  margin: 0px;
}

#widgets div {
  
}

.widget {
  background: linear-gradient(rgba(255,255,255,1) -50%,
                              rgba(255,255,255,0));
  position: absolute;
  justify-content: center;
  align-items: center;
  height: auto;
  aspect-ratio: calc(400 / 810 * 100vh);
  resize: horizontal;
  width: calc(400 / 810 * 100vh);
  overflow: hidden;
  border: 1px solid #d3d3d3;
  border-radius: calc(10 / 810 * 100vh);
  padding: calc(20 / 810 * 100vh);
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

.widget.compact {
  resize: none;
  width: calc(100 / 810 * 100vh); 
  height: calc(50 / 810 * 100vh);
  overflow: hidden;
}

.widget.compact .image {
  display: none;
}
.widget.compact .carousel {
  display: none;
}

.inside {
  cursor: grab;
  margin: 0px;
  position: relative;
  border: 1px solid #d3d3d3;
  width: inherit;
  height: inherit;
  gap: 0px;
  overflow: hidden;
}

.image {
  margin: 0px;
  width: inherit;
}

.image img {
  height: 100%;
  width: inherit;
}

.carousel {
  width: 100%;
  height: calc(100vh * 100 / 810);
  background: linear-gradient(#525252,#000000 );
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}

.carousel-viewport {
  width: 100%;
  height: 100%;

  overflow: hidden;
  align-items: center;
  justify-content: center;
}


.carousel-track {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  will-change: transform;
  transition: transform 0.25s ease;
}

.carousel-track img {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: auto;
  cursor: pointer;
  transform: scale(0.9);
  opacity: 0.5;
  transition: all 0.2s ease;
}

.carousel-track img.active {
  opacity: 1;
  transform: scale(1);
}

.inside .image img {
  transition: opacity 0.2s ease;
}

.inside .image img.loading {
  opacity: 0;
}

.inside .image img.loaded {
  opacity: 1;
}

.widget[data-index="0"] .prev {
  opacity: 0.3;
  pointer-events: none;
}

#search {
  top: 56px; 
  left: 25px;
  margin: 0px;
}

#comics {
  top: 180px; 
  left: 25px;
  margin: 0px;
}

#magazine {
  top: 180px; 
  left: 737px;
  margin: 0px;
}

#games {
  top: 3px; 
  left: 1136px;
  margin: 0px;
}

.game-viewer {
  width: 100%;
  height: 200px;
}

.game-viewer iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.widget iframe {
  display: none;
}

.widget.is-game iframe {
  display: block;
}

#animations {
  top: 94px; 
  left: 464px;
  margin: 0px;
}

#illustrations {
  top: 201px; 
  left: 1146px;
  margin: 0px;
}

#footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(#525252,#000000 );
  color: white;
  font-size: calc(16 / 810 * 100vh);
  text-align: left;
  margin: 0px;
  padding: calc(5 / 810 * 100vh);
}

#footer a:link {
  color: #50aed2;
}

#footer a:visited {
  color: #50aed2;
}