@font-face {
  font-family: va11hall-a;
  src: url(va11halla-text.woff2);
}
body {
  background: #f7d5f7 url("images/sunwork.png");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
.picture img {
  max-width: 100%;
  display: block;
  height: auto;
}
#home-img {
  height: 600px;
}
a:link {
  text-decoration: none;
  font-weight: bold;
  color: #0bd68c;
}
a:visited {
  text-decoration: none;
  font-weight: bold;
  color: #0bd68c;
}
a:hover {
  text-decoration: none;
  font-weight: bold;
  color: #d61f0b;
}

.container {
  margin: auto;
  margin-top: 150px;
  column-gap: 35px;
  width: 35%;
  font-family: va11hall-a;
  background-color: #14011775;
  padding: 15px;
  border-radius: 25px;
}
.container > div {
  padding: 10px;
}
.container > div.nav {
  grid-row-start: 1;
  grid-column-start: 3;
  grid-row-end: 1;
  grid-column-end: 5;
  display: flex;
  border-radius: 15px;
  justify-content: space-evenly;
  background-color: #121d2c;
  padding: 10px 10px 10px 10px;
}
.container > div.nav > a {
  text-decoration: none;
  color: #e9eeac;
  font-weight: bold;
}
.container > div.nav > a:hover {
  text-decoration: none;
  color: #d61f0b;
  font-weight: bold;
}
.container > div.picture {
  grid-row-start: 2;
  grid-column-start: 3;
  grid-row-end: 4;
  grid-column-end: 5;
  image-orientation: center;
  border: 0px;
  border-radius: 0px 0px 15px 15px;
  padding: 0px;
}
.container > div.textbox {
  grid-row-start: 4;
  grid-column-start: 3;
  grid-row-end: 4;
  grid-column-end: 5;
  background-color: black;
  border: 3px solid white;
  border-radius: 15px;
  min-height: 100px;
}

.container > div.textbox p {
  color: white;
  margin-left: 10px;
  font-size: 25px;
  text-align: center;
}

#ticker1 {
  position: absolute;
  top: 50px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker1 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker1 10s linear infinite;
  gap: 10px;
}

#ticker1:hover ul {
  animation-play-state: paused;
}

@keyframes ticker1 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker2 {
  position: absolute;
  top: 134px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker2 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker2 14s linear 0.7s infinite;
  gap: 10px;
}

#ticker2:hover ul {
  animation-play-state: paused;
}

@keyframes ticker2 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker3 {
  position: absolute;
  top: 182px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker3 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker3 09s linear 1.23s infinite reverse;
  gap: 10px;
}

#ticker3:hover ul {
  animation-play-state: paused;
}

@keyframes ticker3 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker4 {
  position: absolute;
  top: 212px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker4 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker4 13s linear 0.5s infinite;
  gap: 10px;
}

#ticker4:hover ul {
  animation-play-state: paused;
}

@keyframes ticker4 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker5 {
  position: absolute;
  top: 300px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker5 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker5 10s linear infinite reverse;
  gap: 10px;
}

#ticker5:hover ul {
  animation-play-state: paused;
}

@keyframes ticker5 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker6 {
  position: absolute;
  top: 375px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker6 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker6 12s linear 1.2s infinite reverse;
  gap: 10px;
}

#ticker6:hover ul {
  animation-play-state: paused;
}

@keyframes ticker6 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker7 {
  position: absolute;
  top: 450px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker7 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker7 18s linear 0.72s infinite;
  gap: 10px;
}

#ticker7:hover ul {
  animation-play-state: paused;
}

@keyframes ticker7 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker8 {
  position: absolute;
  top: 520px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker8 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker8 17s linear 0.33s infinite reverse;
  gap: 10px;
}

#ticker8:hover ul {
  animation-play-state: paused;
}

@keyframes ticker8 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker9 {
  position: absolute;
  top: 650px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker9 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker9 16s linear 0.87s infinite reverse;
  gap: 10px;
}

#ticker9:hover ul {
  animation-play-state: paused;
}

@keyframes ticker9 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker10 {
  position: absolute;
  top: 0px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker10 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker10 18s linear 0.94s infinite reverse;
  gap: 10px;
}

#ticker10:hover ul {
  animation-play-state: paused;
}

@keyframes ticker10 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker11 {
  position: absolute;
  top: 720px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker11 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker11 11s linear 1.32s infinite;
  gap: 10px;
}

#ticker11:hover ul {
  animation-play-state: paused;
}

@keyframes ticker11 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}

#ticker12 {
  position: absolute;
  top: 800px;
  font-size: 15px;
  overflow: hidden;
  user-select: none;
}

#ticker12 ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-evenly;
  animation: ticker12 15s linear 1.45s infinite reverse;
  gap: 10px;
}

#ticker12:hover ul {
  animation-play-state: paused;
}

@keyframes ticker12 {
  from {
    transform: translateX(calc(100%));
    /* use this to govern where the ticker starts, if you give it a number over 100% it will have a delay before it comes in */
  }
  to {
    transform: translateX(calc(-135%));
    /* This governs where the marque ends. Adjust this to a greater number if the marque is ending sooner than you want it to. */
  }
}