@font-face {
  font-family: libSans;
  src: url(fonts/LiberationSans-Regular.ttf);
}
@font-face {
  font-family: libSans;
  src: url(fonts/LiberationSans-Bold.ttf);
  font-weight: bold;
}
@font-face {
  font-family: libSans;
  src: url(fonts/LiberationSans-Italic.ttf);
  font-style: italic;
}
@font-face {
  font-family: libSans;
  src: url(fonts/LiberationSans-BoldItalic.ttf);
  font-style: italic;
  font-weight: bold;
}

*{
  font-family: 'libSans';
  scrollbar-color: transparent;
  scrollbar-width: none;
  user-select: none;
}

:root {
  --contact-isaac: #222493;
 --contact-lars: #007BFF;
 --contact-lars-secondary: #0055FF;
  --deep-ocean-400-opaque: #3c467b65;

   --wave: hsl(240, 53%, 45%);


  --seaside-50: #dff2eb;
  --seaside-100: #b9e5e8;
  --seaside-150: #7ab2d3;

  --ocean-100: #dff5ff;
  --ocean-200: #67c6e3;
  --ocean-300: #378ce7;
  --ocean-400: #5356ff;

  --deep-ocean-100: #6e8cfb;
  --deep-ocean-200: #636ccb;
  --deep-ocean-300: #50589c;
  --deep-ocean-400: #3c467b;

  --bg-gradient: linear-gradient(
    180deg,
    hsl(240deg 53% 45%) 0%,
    hsl(238deg 54% 42%) 2%,
    hsl(236deg 54% 40%) 4%,
    hsl(234deg 54% 37%) 6%,
    hsl(233deg 53% 35%) 9%,
    hsl(233deg 51% 33%) 11%,
    hsl(232deg 48% 30%) 14%,
    hsl(231deg 50% 29%) 17%,
    hsl(230deg 52% 27%) 20%,
    hsl(229deg 53% 26%) 24%,
    hsl(228deg 55% 24%) 27%,
    hsl(227deg 57% 23%) 31%,
    hsl(226deg 60% 21%) 34%,
    hsl(226deg 59% 20%) 38%,
    hsl(226deg 59% 18%) 42%,
    hsl(226deg 59% 17%) 46%,
    hsl(226deg 58% 15%) 51%,
    hsl(226deg 57% 14%) 56%,
    hsl(227deg 56% 13%) 61%,
    hsl(224deg 56% 11%) 66%,
    hsl(224deg 53% 10%) 71%,
    hsl(223deg 50% 9%) 77%,
    hsl(221deg 48% 7%) 84%,
    hsl(219deg 46% 6%) 91%,
    hsl(220deg 30% 4%) 100%
  );

  --temp-gradient: linear-gradient(
    90deg,
    var(--deep-ocean-200) 13%,
    var(--deep-ocean-100) 26%,
    var(--seaside-150) 39%,
    #76c28f 52%,
    #dade75 65%,
    #eebd79 78%,
    #ed7464 91%,
    #e94832 100%
  );

}

body {
  margin: 0px;
  padding: 0px;
}

/* HEADER */

#headerTitle {
  font-family: "libSans";
  color: var(--deep-ocean-400);
  font-size: 32px;
  font-weight: bold;
}

language-toggle, contact-toggle{
  color: var(--deep-ocean-400);
  font-size: 32px;
}
#contact_button{
  transition: color 0.2s ease-in;
}
#contact_button:hover{
  color: var(--ocean-300);
}

#deutsch{
  transition: opacity 0.3s ease-in;
  opacity: 0.4;
  cursor: pointer
}

#deutsch.active{
  opacity: 1;
}

#deutsch:hover{
  opacity: 0.8
}

#english{
  transition: opacity 0.2s ease-in;
  opacity: 0.4;
  cursor: pointer
}

#english.active{
  opacity: 1;
}

#english:hover{
  opacity: 0.8
}

#underwater * {
  z-index: 1; /* So that bubbles go "behind" text/elements in the water */
}

/* PRIMARY CONTAINERS OF THE WEBSITE 
* section-one - Header + Chart
* Wave lives in between these two sections
* section-two - Alert Form + Alert Description
* section-three - Information
* section-four - Bottom + Seaweed + Fish + BubbleSpawner
*/

.sec-2-anim, .sec-3-anim, .sec-4-anim{
  opacity: 0;
  transform: translateY(250px)
}

#section-one {
  height: 75vh;
}
#section-two {
  height: 800px;
  z-index: 1;
}
#section-three {
  height: 575px;
  z-index: 1;
}
#section-four {
  height: 800px;
  z-index: 1;
}

/* CHART */

#chartSelector {
  display: block;
  opacity: 0;
  background-color: var(--ocean-300);
  height: 40px;
  width: 160px;
  border-radius: 10px;
  position: relative;
  margin-top: 4em;
  left: 25%;
}

chart-container {
  display: block;
  position: relative;
  margin-top: 0%;
  margin-left: 25%;
  padding: 2em;
  width: 50%;
  height: fit-content;
  border-radius: 30px;
  border: 2px solid var(--deep-ocean-400);
  background-color:  "#FEFEFE";
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* ALERT FORM */

#alertSelector {
  display: block;
  background-color: var(--seaside-50);
  height: 40px;
  width: 160px;
  border-radius: 10px;
}

input[type="email"]{
  outline: none;
  width: 220px; height: 24px;
  border-radius: 7px;
  border: none;
  padding-left: 1em;
  font-family: 'libSans';
  font-size: 14px;
  font-weight: normal;
  color: var(--deep-ocean-400)
}

checkbox{
  background-color: var(--ocean-100);
  width: 24px;
  height: 24px;
  outline: none;
  border: none;
  accent-color: transparent;
  border-radius: 4px;
}
checkbox.checked{
  background-color: var(--ocean-300);
}
check{
  display: block;
  width: 24px;
  height: 24px;
}
checkbox.checked check{
  opacity: 1 !important;
}
checkbox-container{
  display: flex;
  flex-direction: row; 
  align-items: center; 
  column-gap: 2em;
}

button[type="submit"]{
  background-color: var(--deep-ocean-400);
  width: 220px;
  height: 48px;
  outline: none;
  border: none;
  border-radius: 18px;
  transition: background-color 0.3s ease-in;
}
button[type="submit"]:hover{
  background-color: var(--deep-ocean-300);
}

/* FISH */

.fish{
  left: 0;
  opacity : 0;
  scale: 3;
  transform: rotate(-45deg) scaleX(-1);
  image-rendering: pixelated;
  position: absolute;
}

.reversefish{
  transform: rotate(45deg);
}

.scale_2{
  scale: 4
}
.scale_3{
  scale: 6
}
.scale_4{
  scale: 7
}

/* CONTACT MENU */

.contactMenu{
  position: relative;
  width: fit-content;
  text-align: center;
}

.contactMenuExpanded {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  position: absolute;
  overflow: hidden;
  height: 0;
  top: 2.5em;
  right: 50%;
  background-color: white;
  border: 2px solid var(--deep-ocean-400);
  border-radius: 0.5em;
  z-index: 1;
}

contactcard{
  height: 50%;
  padding: 0.25em;
  max-width: 660px;
  display: flex;
  flex-direction: column;
}

/* PARENT CONTAINER FOR AN (ANCHOR, SVG) PAIR*/

social{ 
  display: flex; 
  flex-direction:  row;
  align-items: center; 
  column-gap: 0.5em;
}

.lars social{
  justify-content: end; 
}

.isaac social{
  justify-content: start;
}

/* ANCHORS */

.isaac social a:hover{
  background-color: var(--seaside-100);
}

.lars social a:hover{
  background-color: var(--seaside-50)
}

social a{
  display: flex;
  flex-direction: row; 
  align-items: center;
  column-gap: 0.5em;
  padding:2px;
  padding-left:8px;
  padding-right: 8px;
  border-radius: 1em;
  transition: background-color, 0.5s, ease-in;
  width: fit-content;
  text-decoration: none;
}

.isaac social a {
  font-size: 0.5em;
  color: var(--deep-ocean-400)
}

.lars social a{
  font-size: 0.5em;
  color: var(--contact-lars-secondary)
}

/* SVGS */

links svg{
  pointer-events: none;
}

/* PARENT CONTAINER FOR ALL "SOCIAL" ELEMENTS */

links {
  display: flex;
  flex-direction: column;
  row-gap: 2px;
}

/* TITLES */

.contactMenuExpanded title{
  display: block;
  font-size: 36px;
  opacity: 0;
  pointer-events: none;
}

.contactMenuExpanded .lars title{
  min-height: 60px;
}

.contactMenuExpanded .lars title{
  color: var(--contact-lars);
  text-align: start;
}

.contactMenuExpanded .isaac title{
  color: var(--contact-isaac);
  text-align: end;
  width: 100%;
  height: fit-content;
}