html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     font-family:Verdana;
     font-size:11px;
     color:white;
     background-color:black;
     background-image:url("./pixel-star-background.gif");
     background-repeat:repeat;
     background-attachment:fixed;
}
a {
  color:#FF7900;
}

a:hover {
  color:cyan;
}

a:active {
  color:teal;
}

.item1 { grid-area: something1; }
.item2 { grid-area: header; }
.item3 { grid-area: something2; }
.item4 { grid-area: navbar; }
.item5 { grid-area: main; }
.item6 { grid-area: info; }
.item7 { grid-area: buttons; }
.item8 { grid-area: webrings; }
.item9 { grid-area: chatbox; }

.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 1fr;
    gap:1em;
    grid-template-areas:
    'something1 header header something2'
    'navbar main main info'
    'navbar buttons webrings info'
    'navbar buttons chatbox info';
    width:100%;
    max-width: var(--wrapper-width, 1400px);
    margin-left: auto;
    margin-right: auto;
}

.item2 img {
    position:relative;
    justify-content: center;
    object-fit:cover;
    width:100%;
    height:auto;
  }

.item4 {
  text-transform: uppercase;
  height:fit-content;
}

.item4 ul {
  list-style-type: none;
  padding:5px;
  font-size:15px;
  font-weight:bold;
}

li {
  margin-bottom: 10px;
}

.item5 {
  height:400px;
}

.item6 {
  height:200px;
}

.item4, .item5, .item6, .item7, .item8, .item9 {
  background-color:black;
  border-style:inset;
  border-width:5px;
  border-color:#4B0082;
  padding:5px;
  color:gold;
}

.item7, .item8 {
  text-align: center;
  height: 100px;
}

.item9 {
  height:300px;
  display: flex;
}

iframe {
  width: 100%;
  height: 100%;
  border: none; /* optional: removes default border */
}

.footer {
  text-align: center;
  padding-top: 5px;
  margin-bottom: 5px;
}

.footer p {
  background-color:black;
  display:block;
  width:160px;
  margin:0 auto;
  margin-top:5px;
  margin-bottom:5px;
  padding:5px;
}


.active-image-container {
  display: inline-block;
  position: relative;
  width: 88px;
}

.active-image-container img {
  width: 88px;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.img-active {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.active-image-container:active .img-main {
  opacity: 0;
}

.active-image-container:active .img-active {
  opacity: 1;
}