html, body {
  max-width: 100%;
  overflow-x: clip; /* Stays clipped without breaking 'sticky' positioning */
}
body {
  background-color: #ffd9ff;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: clamp(0.4rem, 2vw, 1.75rem);
  margin: 0px;
  padding: 0px;
  text-align: center;
  display: block;
  position: relative;
}

.main{
  padding:2%;
  color:#000e47;
}

.img-container {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto;
    gap: 2%;
    @media screen and (max-width: 485px){
      display: block;  
    }

    p{
      width: 50%;
      font-size: clamp(0.65rem, 4vw, 1.75rem);
      @media screen and (max-width: 485px){
      width: 100%
    }
    }
}
.image-stuff{
  display: block;
  position: relative;
  width: 50%;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  border-radius: 20%;
}

.center {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.img-container:hover .image {
  opacity: 0.3;
}

.img-container:hover .center {
  opacity: 1;
}

.center-text {
  text-decoration: none;
  background-color: #FFB1E2;
  color: #000e47;
  font-size: 16px;
  padding: 16px 32px;
}

.center-text a{
  text-decoration: none;
  color:#000e47
}
@media screen and (max-width: 485px){
    .image-stuff{width: 100%;}
    .image{
      opacity:0.3;
    }
    .center{
      opacity: 1;
    }
  }
.sponsors {
  display: block;
  height: auto;
  .logos_und_text {
    display: flex;
    align-items: center;
    font-size: clamp(0.65rem, 3.5vw, 2.5rem);
    min-width: 0;
    gap: 5%;
    .logos{
    display: flex;
    gap: 5%;
    align-items: center;
    }
    .logo {
      display: block;
      align-self: right;
      width: 50%;
      }
  }
  p {
    align-self: left;
    width: 80%;
  }
}

@media screen and (max-width:400px){
  .logos_und_text{
    display: flex;
    p{
      width: 100%;
    }
  }
  .logos{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .logo{
    width:100%;
  }
}

  #creditunion {
    border-radius: 100%;
  }


/*
Things h1 is used for:
-"About Us"
*/
h1 {
  color: rgb(12, 12, 12);
}

/*
Things h2 is used for:
-"Stay Informed"
*/


/*
Things h3 is used for:
-"We will never sell or share your information."
*/
h3 {
  font-size: clamp(0.2rem, 0.2vw + 0.5rem, 1.5rem);
  padding: 0%;
  margin-top: 0%;
  text-decoration: none;
  font-style: italic;
  color: #000e47;
  opacity: 0.6;
}

.newsletter-form {
  position: relative;
  input[type=email] {
    width: 80%;
    padding: 1%;
    margin-top: 2%;
    margin-left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%);
    border-style: groove;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2em;
    border-radius: 10px;
  }
  input[type=submit] {
    width: 30%;
    padding: 2%;
    margin-top: 3%;
    margin-bottom: 0%;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.2em;
    color: #EBF3F9;
    background-color: #000e47;
    border-style: double;
    border-radius: 5px;
    border-color: #EBF3F9;
    margin-left: 50%;
    margin-right: 50%;
    transform: translate(-50%, -50%);
  }
  input[type=submit]:hover {
    background-color: #FFB1E2;
    color: #000e47;
    border-color: #EBF3F9;
    border-style: double;
    cursor: pointer;
  }
}