@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

*{
  margin: 0;
  padding: 0;
}

:root{
  --spaceBTriangles: 200px;
  --rotateZValue: 90deg;
  --contentHeight: 30px;
  --contentWidth: 0px;
  --triangleGroupDistance: 50px;

  --primary-color: #7BFBEE;
  --secondary-color: #F950FF;
  --dark-color: #333;
}

.page-container {
  background: #000;
  height: 8780px;
  max-width: 100vw;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding-top: 100px;
  /* align-items: center; */
}

.main-container {
  /* background: #999; */
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: rotateZ(var(--rotateZValue));
  /* max-height: 500px; */
  max-width: 500px;
  height: 500px;
}

/* .triangle-a {
  width: 100px;
  height: 100px;
} */

.border-shadow{
  filter:
    drop-shadow(5px -7px 8px var(--secondary-color))
    drop-shadow(0 0 20px var(--primary-color))
    drop-shadow(-5px 7px 8px var(--primary-color))
    drop-shadow(0 0 200px var(--primary-color))
    ;
}

.text-shadow{
  filter:
    drop-shadow(2px -1px 1px var(--secondary-color))
    drop-shadow(0 0 20px var(--primary-color))
    drop-shadow(-5px 7px 8px var(--primary-color))
    drop-shadow(0 0 200px var(--primary-color))
    ;
}

/* Triangles */
.triangle-a1{
  position: relative;
  float: left;
  left: var(--triangleGroupDistance);
  width: 0;
  height: 0;
  border-top: 86.6px solid var(--dark-color);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.triangle-a2{
  position: relative;
  float: right;
  right: var(--triangleGroupDistance);
  width: 0;
  height: 0;
  border-top: 86.6px solid var(--dark-color);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.triangle-b1{
  position: relative;
  float: left;
  left: var(--triangleGroupDistance);
  width: 0;
  height: 0;
  border-bottom: 86.6px solid var(--dark-color);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.triangle-b2{
  position: relative;
  float: right;
  right: var(--triangleGroupDistance);
  width: 0;
  height: 0;
  border-bottom: 86.6px solid var(--dark-color);
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.space-b-triangles {
  height: var(--spaceBTriangles);
  width: 10px;
  /* background: #eee; */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Content */
.content-container {
  width: var(--contentWidth);
  height: var(--contentHeight);  /*30px;*/
  background: #;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* box-sizing: border-box; */
  /* border: 3px solid #fff; */
  box-shadow: inset 0 0 0 2px var(--primary-color), 0 0 20px var(--primary-color);

}

.box a{
  text-decoration: none;
}

.box h2{
  font-size: 60px;
  font-family: 'Press Start 2P';
  color: #eef;
}