/* Kodet av Ruben Vareide */

/* Nullstille noen standard nettleserstiler */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h1,
h2 {
  font-family: "Fragment Mono", monospace;
  text-transform: uppercase;
  color: rgb(231, 231, 231);
  /* text-wrap: nowrap; fungerte ikke, google er min venn */
  white-space: nowrap;
}
body {
  margin: 0;
  background-color: rgb(46, 39, 71);
}

/* fjerner alle verdier til a-linker  */
a {
  all: unset;
}

.main {
  display: flex;
  justify-content: center;
}
.txt-main {
  font-size: 42px;
  z-index: 11;
  position: absolute;
  top: 260px;
}
.txt-2 {
  display: flex;
  height: 333px;
  width: 900px;
  justify-content: space-around;
  align-items: flex-end;
  position: absolute;
}

/* rød tekst */
.txt-red {
  font-size: 12px;
  z-index: 12;
  color: rgb(255, 54, 54);
  letter-spacing: 3px;
}

/* Bakgrunnsbilde */
.flex-div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-bg {
  width: 1920px;
  height: 1080px;
  object-fit: none;
  position: relative;
  overflow: hidden;
  top: 0;
}

/* Grid til reise-teksten */
.letter-box {
  display: grid;
  height: 274px;
  width: 908px;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(6, 1fr);
  border: 1px solid rgba(199, 195, 195, 0.201);
  position: absolute;
  z-index: 3;
  top: 336px;
}
/* deler gridden i flere gridder. 6 rows, hvor hver row har 36 column i seg */
.letter-box-1 {
  display: grid;
  grid-template-columns: repeat(36, 1fr);
  grid-template-rows: 1fr;
}
.letter-box-2 {
  display: grid;
  grid-template-columns: repeat(36, 1fr);
  grid-template-rows: 1fr;
}
.letter-box-3 {
  display: grid;
  grid-template-columns: repeat(36, 1fr);
  grid-template-rows: 1fr;
}
.letter-box-4 {
  display: grid;
  grid-template-columns: repeat(36, 1fr);
  grid-template-rows: 1fr;
}
.letter-box-5 {
  display: grid;
  grid-template-columns: repeat(36, 1fr);
  grid-template-rows: 1fr;
}
.letter-box-6 {
  display: grid;
  grid-template-columns: repeat(36, 1fr);
  grid-template-rows: 1fr;
}
/* sentrerer teksten i enkelt griddene, og endrer størrelse på teksten */
.box {
  font-size: 18px;
  align-self: center;
  justify-self: center;
}

/* siden alle verdier på a-link er fjernet, legger til mus pointer verdi her  */
.reise-1,
.reise-2,
.reise-3 {
  cursor: pointer;
}
/* når hover på første grid, vil all tekst endre farge */
.letter-box-1:hover .reise-1 {
  color: rgb(39, 244, 244);
}
/* når hover på andre grid, vil all tekst endre farge */
.letter-box-2:hover .reise-2 {
  color: rgb(39, 244, 244);
}
/* når hover på tredje grid, vil all tekst endre farge */
.letter-box-3:hover .reise-3 {
  color: rgb(39, 244, 244);
}

.grid-item {
  transition: all 0s ease;
}

.grid-item:hover {
  background-color: rgb(32, 32, 32);
}

/* animation av boarding teksten */
.boarding {
  color: rgb(37, 210, 98);
  animation-name: boarding;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Skifter farge og teksten blir bittelitt større */
@keyframes boarding {
  from {
    color: rgb(8, 148, 57);
    transform: scale(1);
  }
  to {
    color: rgb(12, 255, 97);
    transform: scale(1.08);
  }
}