@font-face {
  font-family: "AndThenItEnds";
  src: url("../fonts/AndThenItEnds.eot");
  src: url("../fonts/AndThenItEnds.woff") format("woff"),
    url("../fonts/AndThenItEnds.woff2") format("woff2"),
    url("../fonts/AndThenItEnds.otf") format("opentype"),
    url("../fonts/AndThenItEnds.ttf") format("truetype"),
    url("../fonts/AndThenItEnds.svg#svgFontName") format("svg");
  font-weight: normal;
  font-style: normal;
}

body,
html {
  font-family: "AndThenItEnds";
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0000;
}

h1 {
  font-size: 200px;
  color: white;
}

@media (max-width: 768px) {
  h1 {
    font-size: 70px;
  }
}

.background {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #101935;
  overflow: hidden;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.logo {
  max-width: 100%;
  height: auto;
}

.background::before,
.background::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 30px;
  background-color: #4da167;
}

.background::before {
  top: 0;
  left: 130px;
  transform: rotate(135deg);
  transform-origin: top left;
}

.background::after {
  bottom: 0;
  right: 130px;
  transform: rotate(135deg);
  transform-origin: bottom right;
}