@font-face {
  font-family: mainFont;
  src: url(fonts/Nunito-SemiBold.ttf);
  font-size: x-large;
  font-display: swap;
}

iframe {
  border-radius: 25px;
  border: 2px white solid;
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
}

html {
  --background-color: rgb(35, 23, 79);
  --text-color: rgb(255, 251, 245);
  background-image: url('images/background.webp');
  background-color: var(--background-color);
}

body {
  font-family: mainFont, Courier, monospace;
  font-size: 100%;
  letter-spacing: 0.15em;
  color: var(--text-color);

  height: 100%;
  width: 100%;
}

.logo {
  width: 100%;
  margin: auto 0;
  margin-top: 20px;
}

#main {
  text-align: center;
  max-width: 650px;
  width: 60%;
  padding: 10px;
  margin: auto;
}

.videocontainer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.button {
  filter: saturate(0) brightness(100);

  font-family: mainFont, Courier, monospace;
  font-size: 100%;
  letter-spacing: 0.15em;
  color: var(--text-color);
  background-color: transparent;
  margin-top: 10px;

  border-radius: 25px;
  border: 2px white solid;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none !important;
  padding: 0 0.8em;
}

.bigbutton {

  font-size: 105%;
  letter-spacing: 0.15em;
  margin-top: 20px;

  margin-left: 100px;
  margin-right: 100px;

  padding: 0.2em 0.8em;
}

.biggerbutton {

  font-size: 120%;
  letter-spacing: 0.15em;
  margin-top: 20px;

  margin-left: 100px;
  margin-right: 100px;

  padding: 0.2em 0.8em;
}



.glowbutton {
  animation: glow 0.5s infinite alternate;
}

/* Keyframes for glowing effect */
@keyframes glow {
  from{
    box-shadow: 0 0 20px rgb(225, 7, 76);
  }
  to {
    box-shadow: 0 0 25px rgb(76, 7, 225);
  }
}


.email::placeholder {
  color: #999;
  font-style: italic;
}

.button-container .button {
  margin: 5px; /* Add some margin for spacing */
}

/* Style for the horizontal line */
.divider {
  height: 0px;
  border-style: 1px dotted #fff;
  width: 60%;

  margin: 20px auto; /* Center the line and add some vertical margin */
}

.button:hover{
    filter: saturate(100) hue-rotate(-25deg);
    border: 2px rgb(255, 18, 77) solid;
    color: rgb(255, 18, 77);
}

/* .bigbutton:hover{
  filter: saturate(100) hue-rotate(-25deg);
  border: 2px rgb(255, 18, 77) solid;
  color: rgb(255, 18, 77);
} */

.rainbowtext span{
  animation: colorchange 3s infinite alternate-reverse;
  display: inline-block;
  /* margin-bottom: 1em; */
}

@keyframes colorchange{
    0% { color: #4c29ff; transform: translateY(0px);}
    25% { color: #ff21b3; transform: translateY(4px);}
    50% { color: #00bbd1; transform: translateY(-4px);}
    75% { color: #fa87ff; transform: translateY(4px);}
    100% { color: #eba872; transform: translateY(-4px);}
}

input {
    color: var(--text-color);
    font-family: mainFont, Courier, monospace;
    font-size: 100%;
    letter-spacing: 0.15em;

    background-color: transparent;
    border-radius: 25px;
    border: 2px white dotted;
/*    display: inline-block;*/
    padding: .1em .8em;
}

b {
  color: rgb(255, 18, 77);
}

/* >>> link styling <<< */
/* unvisited link */
a:link {
  font-weight: bold;
  text-decoration: underline;
  color: rgb(255, 181, 20);
}

/* visited link */
a:visited {
  color: rgb(255, 181, 20);
  font-weight: bold;
}

/* mouse over link */
a:hover {
  color: rgb(255, 18, 77);
  font-weight: bold;
}

/* selected link */
a:active {
  font-weight: bold;
}

#opencall {
  color: rgb(255, 18, 77);
}

#opencall:hover {
  color: rgb(255, 255, 255);
}

a.roundbutton {
  border-radius: 25px;
  border: 2px white solid;
  color: white;
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  text-decoration: none;
  padding: 0 0.8em;
}

a.roundbutton:hover {
  border-radius: 25px;
  border: 2px rgb(255, 18, 93) solid;
  color: rgb(255, 18, 77);
}

ul {
  list-style-type: "✶ ";
}
li {
  padding: .15em;
}

#link {
  font-family: mainFont, Courier, monospace;
  font-size: 110%;
  letter-spacing: 0.15em;
  color: var(--text-color);

  height: 100%;
  width: 100%;
}

#link:visited {
  color: var(--text-color);
}


#links {
  font-family: mainFont, Courier, monospace;
  font-size: 110%;
  letter-spacing: 0.15em;
  color: var(--text-color);

  margin-top: 5%;
  margin-bottom: 1%;
}
#funding{
  margin-top: 50px;
}
#funding>*{
  margin-bottom: 5px;
}

.vaf {
  height: 60px;
  display: block;
  margin: auto;
}

p {
  margin-top: 20px;
}

hr {
  border: 0px dotted;
  border-top: 2px dotted #fff;
}

.membertitle {
  margin: 10px;
  text-align: center;

}

.memberbox {
  height: 100%;
  display: flex;

  padding: 10px;
  margin-bottom: 50px;

  border-style: dashed;
  border-radius: 15px;
  border-color: white;
  border-width: 1px;
}

.memberimg {
  height: 10em;
  width: auto;
  float: left;

  border-radius: 10px;
  border-spacing: 10px;
  padding-right: 15px;
}

.description {
  text-align: left;
  /* padding-left: 40px; */
  font-size: 90%;
}

@media only screen and (max-width: 600px) {

  #main {
    font-size: 80%;
    padding: 0px;
    width: 80%;
  } 

  .description{
    font-size: 100%;
    text-align: center;
    padding: 0px;
    margin: 18px;
  }

  .memberbox {
    flex-wrap: wrap;
    justify-content: center;
  }

  .memberimg {
    height: 15em;
    padding: 0px;
    margin: 10px;
  }
  .membertitle
  {
    font-size: larger;
  }

  .button-container {
    flex-direction: column;
    align-items: center;
  }

  .bigbutton {
    margin-top: 10px;
  }

  .button {
    width: auto; /* Ensure buttons do not take full width */
    max-width: 80%; /* Set a maximum width */
    margin-bottom: 10px; /* Space between stacked buttons */
    margin-left: 0%;
    margin-right: 0%;
    color: blue !important;
    font-size: 120%;
  };



  .rainbowtext {
    font-size: 90%;
  }
}