@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');

h1 {
  color: rgb(182, 0, 0);
  font-family: "Tiny5", "Brush Script MT", "Lucida Handwriting", monospace;
  font-size: 2.5em;
  text-align: center;
}

h2 {
  color: crimson;
  font-size: 1.5em;
}

p {
  font-family: "Tiny5", "Brush Script MT", "Lucida Handwriting", monospace;
  font-size: 1.5em;
  padding-left: 5%;
  padding-right: 5%;
}

.container { 
 width: 900px; 
 margin: 0px auto 0px auto; 
}

.grid-container {
  display: grid;
  grid-template-areas: 
  'header header header header header header' 
  'left middle middle middle middle right' 
  'footer footer footer footer footer footer';
  grid-column-gap: 5px
} 

.left,
.middle,
.right {
  padding: 5px;
}

.left {
  grid-area: left;
  width: 245px;
}

.middle {
  grid-area: middle;
  width: 635px;
}

.right {
  grid-area: right;
}

.center {
  align-content: center;
}

.box {
  align-content: center;
  background-image: url("images/box/darkboxr.png");
  box-sizing: border-box;
}

.weirdbox {
  align-content: center;
  background-image: url("images/box/darkboxrtesrnoalpha.png");
  box-sizing: border-box;
}

.borderimgzerk {
  border: 25px solid transparent;
  padding: 0px;
  border-image: url("images/box/darkborder.png") 30 round;
}

.weirdborderimgzerk {
  border: 25px solid transparent;
  padding: 0px;
  border-image: url("images/box/darkbordertesr.png") 30 round;
}

.pulsing{
    animation: pulsing 1.5s infinite;
}

.image-wrapper {
    position: relative;
    width: 512px;
    height: 512px;
    transform-style: flat;
    display: inline-block;
    margin: 40px;
}

.imgoverlap {
  position: absolute;
  image-rendering: pixelated;
  border-radius: 50px;
  z-index: 1;
}

.rotation {
    animation: rotateClockwise 24s linear infinite;
}

.rotationb {
    animation: rotateCounterclockwise 24s linear infinite;
}

@keyframes rotateClockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateCounterclockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

@keyframes pulsing {
    0% {
        opacity: 1;
        color: rgb(182, 0, 0);
    }
    50% {
        opacity: 0.75;
        color: rgb(23, 0, 153);
    }
    100% {
        opacity: 1;
        color: rgb(182, 0, 0);
    }
}