@media only screen and (max-width: 600px){
  
}

@font-face 
{font-family: "Pixel-Operator"; src: url(https://lemonsprout.neocities.org/font/PixelOperator.ttf);
}

body{
font-family: "Pixel-Operator";
background-image: url("https://i.pinimg.com/736x/e4/ae/5e/e4ae5e7703efbad0093812b49bb3dc5a.jpg");
background-size: cover;
background-repeat: no-repeat;
margin:0;
padding:30px;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.3;
  background: url("https://i.pinimg.com/736x/c9/67/9f/c9679f1c9fd991c2bd48408d029bcd7d.jpg");
  z-index:-1;
  pointer-events:none;
}


.grid-container {
  display:inline-grid;
  grid-template-columns: 80px repeat(11, 60px);
  grid-template-rows: repeat(12, 40px); 
  gap: 20px;
  background-color: #84AA5A;
  padding: 20px;
  border: 3px hidden;
  border-radius: 2%;
  position:relative;
  height:auto;
}

.grid-container > div {
  background-color: #f1f1f1;
  color: #000;
  text-align: left;
  border: 3px hidden;
  z-index:0;
}

.item1{
 grid-column: 1 ;
 grid-row: 1 / span 12;
 font-size:15px;
 padding:0;
 border-radius:3%;
}
.navbar-list ul{
list-style-type:none;
  margin:0;
  padding:0;
}
.navbar-list li a{
  display:block;
  padding:8px 16px;
  text-decoration:underline;
}
.navbar-list li{
  text-align:left;
  border-bottom:double 2px #84AA5A;
}

.item2{
 grid-column: 2 / span 7;
 grid-row: 1 / span 4;
 font-size:25px;
 padding:10px;
 border-radius: 2%;
}

.item3{
 grid-column: 9 / span 4;
 grid-row: 1 / span 6; 
  font-size:25px;
 padding:10px;
 border-radius: 2%;
}

.item4{
 grid-column: 2 / span 5;
 grid-row: 5 / span 3;
  font-size:25px;
 padding:10px;
 border-radius: 2%;
 background-image: url("https://i.pinimg.com/736x/6a/72/48/6a7248186a7359ab36da212bd135e689.jpg");
 background-size:521px 229px;
 background-repeat:no-repeat;
}

.item5{
 grid-column: 2 / span 3;
 grid-row: 8 / span 5;
font-size:15px;
 padding:10px;
 border-radius: 2%;
}

#webupdates{
      overflow: scroll;
      overflow-x: hidden;
      height: 10em;
      padding: 1rem;
}
  ::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }

    ::-webkit-scrollbar-track {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
      image-rendering: pixelated;
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }
    ::-webkit-scrollbar-track:active {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
      -webkit-filter: grayscale(100%);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      filter: grayscale(100%);
    }
    ::-webkit-scrollbar-thumb {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      z-index: 1;
    }
    ::-webkit-scrollbar-corner {
      background-color: #cccccc;
    }
    ::-webkit-resizer {
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
      background-position: bottom right;
      background-repeat: no-repeat;
      image-rendering: pixelated;
    }
    ::-webkit-scrollbar-button,
    .scroll::-webkit-scrollbar-button {
      border-top: 1px solid #cccccc;
      border-left: 1px solid #cccccc;
      border-right: 1px solid black;
      border-bottom: 1px solid black;
      box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
      display: block;
      width: 16px;
      height: 16px;
      background-color: #cccccc;
      image-rendering: pixelated;
      background-repeat: no-repeat;
      background-position: center center;
    }
    ::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      background-position: 2px 2px;
    }
    ::-webkit-scrollbar-button:horizontal:decrement,
    .scroll::-webkit-scrollbar-button:horizontal:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
    }
    ::-webkit-scrollbar-button:horizontal:increment,
    .scroll::-webkit-scrollbar-button:horizontal:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
    }
    ::-webkit-scrollbar-button:vertical:decrement,
    .scroll::-webkit-scrollbar-button:vertical:decrement {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
    }
    ::-webkit-scrollbar-button:vertical:increment,
    .scroll::-webkit-scrollbar-button:vertical:increment {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
    }
    ::-webkit-scrollbar-button:horizontal:increment:start,
    .scroll::-webkit-scrollbar-button:horizontal:increment:start {
      display: none;
    }
    ::-webkit-scrollbar-button:horizontal:decrement:end,
    .scroll::-webkit-scrollbar-button:horizontal:decrement:end {
      display: none;
    }
    ::-webkit-scrollbar-button:vertical:increment:start,
    .scroll::-webkit-scrollbar-button:vertical:increment:start {
      display: none;
    }
    ::-webkit-scrollbar-button:vertical:decrement:end,
    .scroll::-webkit-scrollbar-button:vertical:decrement:end {
      display: none;
    }
    ::-webkit-scrollbar-button:active,
    .scroll::-webkit-scrollbar-button:active {
      border-top: 1px solid #868a8e;
      border-left: 1px solid #868a8e;
      border-bottom: 1px solid #868a8e;
      border-right: 1px solid #868a8e;
      box-shadow: none;
    }

.item6{
 grid-column: 5 / span 2;
 grid-row: 8 / span 5;
 font-size:25px;
 padding:10px;
 border-radius: 2%;
}


.item7{
 grid-column: 9 / span 4;
 grid-row: span 6;
  font-size:25px;
 padding:10px;
 border-radius: 2%;
}