@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {

  --background-color-n1:#448099;
  --background-color-0:#5599aa;
  --border-color-0:#336677;
  --background-color-1:#77bbdd;
  --border-color-1:#447788;
  --link-color:#22bbcc;
  --clicked-link-color:#1199aa;
  --hovered-link-color:#33ccdd;
  --clicking-link-color:#ffffff;
  
  --rain-background:url("/images/background_rain.gif");
  --water-background:url("/images/background_water.png");

}

h1 {
 
  font-family: "Josefin Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
  
}

p {
  
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  
}

body {
  
  background-image:var(--rain-background);
  
}

.main-body {
 
  display:flex;
  margin:auto;
  margin-top:10vh;
  background-color:var(--background-color-0);
  background-image:var(--water-background);
  background-size:80%;
  background-blend-mode:multiply;
  width: 70vw;
  justify-content:center;
  min-height:90vh;
  border-style:ridge;
  border-width:0.8vw;
  border-color:var(--border-color-0);
  border-radius:1vw;
  
}

.raised-1 {
 
  background-color:var(--background-color-1);
  border-style:outset;
  border-width:3px;
  border-color:var(--border-color-1);
  
}

.marquee-text {
  display:flex;
  white-space:pre;
  width:max-content;
  position: absolute;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  transform: translateX(100%);
  --scroll-time: 5s;
  animation: scroll-left var(--scroll-time) linear infinite;
}

.indent-0 {

  background-color:var(--background-color-n1);
  border-style:inset;
  border-width:3px;
  border-color:var(--background-color-0);

}

@keyframes scroll-left {
  0% {
      transform: translateX(0%);
  }
  100% {
      transform: translateX(-33.3333333%);
  }
}