header {
  background-color: #2c3a4e;
  margin: 0;
  padding: 0;
}

a {text-decoration: none; }
  

nav {
background-color: #2c3a4e;
font-size: clamp(15px, 4vw, 24px); 
}

.container {
  display: flex;
}

.container.space-between {
  justify-content: space-between;
  gap: 10px;
}

.container.space-evenly {
justify-content: space-evenly;
}

.container.horizontal {
 flex-direction: row;
}

body {
  background: #88adf1;
  background:            url('img/Clione.png'),url('img/combjelly2.png'),url('img/Jelly2.png'),url('img/jelly3.png'),url('img/siphonophore.png'),url('img/squid2.png'),url('img/Copepod.png'),url('img/dragonfish.png'),url('img/Squid.png'),url('img/CombJelly.png'),url('Particles2.png'), linear-gradient(180deg,rgba(67, 87, 115, 1) 0%, rgba(18, 24, 32, 1) 84%);
  background-repeat:     no-repeat,            no-repeat,                no-repeat,            no-repeat,            no-repeat,                  no-repeat,            no-repeat,             no-repeat,                no-repeat,           no-repeat,               repeat,                no-repeat;
  background-attachment: scroll,               scroll,                   scroll,               scroll,               scroll,                     scroll,               scroll,                scroll,                   scroll,              scroll,                  scroll,                scroll;
  background-blend-mode: normal,               normal,                   normal,               normal,               normal,                     normal,               multiply,              normal,                   normal,              normal,                  normal,                normal;
  background-position:   85% 1000px,           80% 1500px,               15% 2200px,           5% 2500px,            10% 1400px,                 85% 1800px,           85% 400px,             90% 2800px,               10% 2900px,          12% 700px,               center,                center;
  background-size:       150px 165px,          100px 91px,               100px 111px,          200px 208px,          200px 384px,                200px 601px,          150px 137px,           400px 177px,              300px 220px,         150px 189px,             auto,                  auto; 
color: white;
  margin: 0;
  padding: 0;
}



h1 {
  color: white; 
  font-size:clamp(10px,15vw,80px);
  margin-top: 0;
  margin-bottom: 0;
}

h2 {
  color: white; 
  font-family: Verdana, Tahoma, sans-serif;
  font-size:clamp(10px,5vw,20px);
  margin-top: 0;
  margin-bottom: 0;
}

h3 {
  color: #ef9f32; 
  font-size: 40px;
  margin-top: 0;
  margin-bottom: 0;
}


h4 {
  color: white; 
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 20px;
}

p {
  font-family: Verdana, Tahoma, sans-serif;
}

ul {
  font-family: Verdana, Tahoma, sans-serif;
}

li {
  font-family: Verdana, Tahoma, sans-serif;
}

footer {
  background-color: #2c3a4e;
  display: flex;
  flex-direction: row;
}

.photobanner {
  height: 200px;
  width: 3550px;
}

.first {
    -webkit-animation: bannermove 60s linear infinite;
       -moz-animation: bannermove 60s linear infinite;
        -ms-animation: bannermove 60s linear infinite;
         -o-animation: bannermove 60s linear infinite;
            animation: bannermove 60s linear infinite;
}
 
@keyframes "bannermove" {
 0% {
    margin-left: 0px;
 }
 100% {
    margin-left: -2125px;
 }
 
}
 
@-moz-keyframes bannermove {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-webkit-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-ms-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}
 
@-o-keyframes "bannermove" {
 0% {
   margin-left: 0px;
 }
 100% {
   margin-left: -2125px;
 }
 
}