@font-face {
  font-family: "Comically";
  src: url("../fnts/comicallyregular.woff") format("woff");
}

body {
  background-image: url("../bgs/bg1.webp");
  color: white;
  font-family: "Comically", Arial, Helvetica, sans-serif;
font-size: 1.5em;
}

.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 11px;
grid-row-gap: 11px;
}

.div1 { grid-area: 1 / 2 / 2 / 3; }
.div2 { grid-area: 2 / 2 / 3 / 3; }
.div3 { grid-area: 1 / 3 / 3 / 4; }
.div4 { grid-area: 3 / 3 / 4 / 4; }
.div5 { grid-area: 3 / 2 / 4 / 3; }



.container {
  background-color: rgba(0, 0, 0, 0.98);
  border-color: red;
border-style: groove;
border-width: 0.2em;
}

.log-scroll{
  height: 200px;
  overflow: auto;
}

/* buttons */

.slider{
-moz-animation: marquee 37s linear infinite;
        -webkit-animation: marquee 37s linear infinite;
        animation: marquee 37s linear infinite;
}

@-moz-keyframes marquee {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      @-webkit-keyframes marquee {
        0% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      @keyframes marquee {
        0% {
          -moz-transform: translateX(100%);
          -webkit-transform: translateX(100%);
          transform: translateX(100%)
        }
        100% {
          -moz-transform: translateX(-100%);
          -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
        }
      }

.slider:hover{
  animation-play-state: paused;
}

/*                                    */