*, *::before, *::after {
  box-sizing: border-box;
}

html,body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden; 
}

.header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background-color: #c6beb3;
  background-image: url(../img/noise.png);
}

.header-section-1 {
  width: calc(100% / 3);
}

.header-section-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 3);
}

.header-section-3 {
  width: calc(100% / 3);
  text-align: right;
}

.hamburger,
.cross {
  width: 2em;
  margin: 20px;
}

.dot {
  width: 1em;
  margin: 20px;
}

a.svgcontainer {
  width: calc(100%/3);
}

a.svgcontainer img {
  width: 100%;
  display: block;
}

.section-1 {
  height: calc(100vh);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c6beb3;
}

.broken {
  width: 2em;
  margin: 20px;
}

.section-2 {
  display: flex;
}

.grid {
  width: calc(100% / 3);
  display: block;
}

.star {
  width: calc(100% / 3);
  display: block;
}

.halo {
  width: calc(100% / 3);
  display: block;
}

.section-3 {
  text-align: center;
  background-color: #f5f5dc;
}

.blue {
  width: 33%;
  margin: 5%;
}

.section-4 {
  display: flex;
  height: 2em;
  background-color: #0000ff;
  margin-bottom: -1px;
}

.section-5 {
  margin-bottom: -1px;
}

.black {
  width: 100%;
  display: block;
}

.section-6 {
  display: flex;
  margin-bottom: -1px;
}

.section-7 {
  display: flex;
  margin-bottom: -1px;
}


.wheel {
  display: block;
  max-width: 100%;
  width: 50vw;
}

.section-8 {
  height: calc(100vh - 75px);
}

.still {
  height: 100%;
  width: 100%;
}

.section-9 {
  background-color: #dadada;
  background-image: url(../img/noise.png);
  margin-bottom: -1px;
}

.red {
  width: 25%;
  margin: 5%;
}

.section-10 {
  text-align: right;
  background-color: #dadada;
  background-image: url(../img/noise.png);
  margin-bottom: -1px;
}

.rune {
  width: 13%;
  margin: 5%;
}

.section-11 {
  display: flex;
  justify-content: center;
  background-color: #dadada;
  background-image: url(../img/noise.png);
  margin-bottom: -1px;
}

.jexiste {
  width: 33%;
  margin: 5%;
}

.section-12 {
  text-align: center;
  background-color: #dadada;
  background-image: url(../img/noise.png);
}

.sun {
  width: 100%;
  margin: 5%;
}

.section-13 {
  margin-bottom: -1px;
}

.eye {
  width: 100%;
  display: block;
}

.hexen {
  width: 100%;
  display: block;
}

.section-15 {
  height: calc(100vh - 75px);
  background-color: red;
}

.section-16 {
  margin-top: -1px;
  margin-bottom: -1px;
}

.plus {
  width: 100%;
  display: block;
}

.section-18 {
  height: calc(100vh - 75px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c6beb3;
  background-image: url(../img/noise.png);
}

.point {
  width: 1em;
  margin: 20px;
}

.photo {
  width: 100%;
  display: block;
}

@media (max-width: 480px) {
  .red {
    width: 33%;
  }
  .rune {
    width: 18%;
  }
  .jexiste {
    width: 50%;
  }
}