@font-face {
  font-family: "rosecaps";
  src: url("rosecaps.TTF") format("truetype");
    }
        @font-face {
  font-family: "basiic";
  src: url("basiic.ttf") format("truetype");
    }
            @font-face {
  font-family: "pixelout";
  src: url("pixelout.ttf") format("truetype");
    }
                @font-face {
  font-family: "pixeloperatorSC";
  src: url("PixelOperatorSC.ttf") format("truetype");
    }
                    @font-face {
  font-family: "pixeloperator";
  src: url("PixelOperator.ttf") format("truetype");
    }
    body {
      background-image: url("brick.png");
      display:flex;
      justify-content: center;
      font-family: pixeloperator;
    }
    .main {
width: 700px;
position: relative;
      border: solid black 1px;
      border-radius: 15px;
      padding: 10px;
      display: block;
      justify-content: center;
      background-color: white;
      background-image: url("church.png");
      -webkit-box-shadow: 0px 11px 17px 9px rgba(0,0,0,0.31); 
box-shadow: 0px 11px 17px 9px rgba(0,0,0,0.31);
    }
    .header {
      border: dotted black 1px;
      justify-content: center;
      display: inline-block;
      padding: 10px;
      background-color: white;
    }
    .header img {
      width: 680px; 
      position: relative;
      z-index: 11;
    }
    .big-3 {
      border: solid black 1px;
      padding: 20px;
      margin: 5px;
      background: white;
    }
    .columns {
      display: flex;
      width: 100%;
      border: outset black 3px;
      border-radius: 5px;
  background: 
    linear-gradient(to bottom, lightgray, white), /* outer gradient */
    linear-gradient(to bottom, white, gray); /* inner gradient */
    }
    .left {
      min-width: 120px;
      padding: 5px;
    }
    .left p{
      margin: 5px;
    }
    .right {
      min-width: 120px;
      padding: 3px;
    }
    .center {
      flex: 1;
      background-image: url("black-mamba.png");
      padding: 5px;
      position: relative;
    }
    .scrollbox h4 {
      margin: 5px;
      margin-top: 0;
    }
    .scrollbox p {
      font-size: 14px;
      margin-top: 0;

    }
    .textthingy {
	width: 100%;
	height: 25px;
    border-radius: 8px;
    border: solid #273263 2px;
    border-image: linear-gradient(to top, darkgray, white);
    background: linear-gradient(to bottom, darkgray, white);
    color: black;
-webkit-box-shadow: 5px 8px 19px 0px rgba(0,0,0,0.51); 
box-shadow: 5px 8px 19px 0px rgba(0,0,0,0.51);
    }
    .textthingy p {
      margin: 0;
    }
    .welcome {
      font-family: pixelout;
      font-size: 25px;
      font-weight: normal;
      margin: 5px;
    }
    .trommesmurf {
      position: absolute;
      top: 250px;
      right: 470px;
      z-index: 15;
      transition: 0.5s ease-in-out;
      pointer-events: none;
    }
    .vines {
      position: absolute;
      top: 0px;
      right: -30px;
      z-index: 15;
      transition: 0.1s ease-in-out;
      pointer-events: none;
    }
    .rose {
      position: absolute;
      top: -15px;
      left: 0px;
      z-index: 10;
      height: 276px;
      clip-path: inset(0 0 131px 0);
    }
        .cogs {
      position: absolute;
      top: -10px;
      left: -170px;
      z-index: 8;
      height: 276px;
      clip-path: inset(0 190px 0 0);
    }
    .textbox {
      border: dotted black 1px;
      margin: 0px;
      padding: 5px;
    }
    a {
      color: blue;
      text-decoration: none;
      transition: 0.07s ease-in-out;
    }
    a:hover {
      margin-left: 10px;
      background-color: blue;
      color: white;
      text-decoration: underline;
      
    }
    .navigation {
      padding: 10px;
      margin-top: 5px;
    }
    .rosecaps {
      font-family:"rosecaps";
    }
    h99 {
      display: inline-flex;
      margin: 0;
    }
    h100 {
      margin: 0;
      display: inline-flex;
      font-family: "pixeloperatorSC";
      font-weight: bold;
      margin-right: 5px;
    }
    .speechbubble {
      position: absolute;
      top: 315px;
      right: 575px;
      height: 90px;
      min-width: 125px;
    }
    .footer p {
      font-size: 10px;
      color: black;
      margin: 5px;
      text-align: center;
    }
    button {
      height: 15px;
      font-family: pixeloperator;
        display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: linear-gradient(to bottom, lightgray, white);
  border: solid black 1px;
  border-radius: 3px;
    }
        button {
      height: 15px;
      font-family: pixeloperator;
        display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: linear-gradient(to bottom, lightgray, white);
  border: solid black 1px;
  border-radius: 3px;
    }
    button:active {
      color: white;
      background: blue;
    }
    button:hover {
      background: white;
    }
    .baloonbutton:hover {
      padding: 1000px;
      transition: 0.1s ease-in-out;
    }
    .floral {
      overflow: hidden;
      background-color: black;
      width: 100%;
    }
    .your-div {
  position: relative; /* required */
}

.center::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-image: url("floral.png");
  background-repeat: repeat;
  background-size: auto;
  pointer-events: none;
}
.underconstruction {
  border: dotted black 1px;
  background-image: url("stripes.png");
  color: white;
  font-weight: bold;
}
::selection {
  background: black;
  color: white;
}