.content{
  color:white;
  max-width: 100%;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.content.slide-out {
  filter: blur(6px);
  opacity: 0;
  transform: translateX(-100%);
}

.introduction {
  text-align: center;
  max-width: 100%;
  margin: auto;
  color: white;
}
p{
  font-size:18px
}
h2{
  color:white;
}
#discord, #youtube{
  color:white;
  text-decoration: none;
}
footer{
  height: 60px;
}
h2, h3{
  text-decoration: underline;
  font-size:25px;
}
body{
  background-color: #000000;
}
h1 {
  font-size: clamp(2rem, 8vw, 3rem);
  margin-bottom: 0.5rem; 
}

#imgbrand {
  width: 100%;
  height: auto;
  max-width: 800px; 
  margin-top: 0.5rem; 
}
#info1{
  border-style:groove;
  border-radius: 15px;
  border-color: cornflowerblue;
  border-width:50px;
  background-color: cornflowerblue;
  width:100%
}
#info2{
  border-style: groove;
  border-radius: 15px;
  border-color: rgb(163, 124, 243);
  border-width:50px;
  background-color: rgb(163, 124, 243);
  width:100%
}
#info3{
  border-style: groove;
  border-radius: 15px;
  border-color: green;
  border-width:50px;
  background-color: green;
  transition-delay: 60ms;
  width:100%;

}

h3{
margin-bottom:15px;
}
.offscreen{
  opacity: 0;
  filter: blur(5px);
  transform:translateX(-100%);


}

.onscreen{
  opacity: 1 !important;
  filter:blur(0);
  transform: translateX(0);
  transition: all 1s ease-in;
}

@media (prefers-reduced-motion) {
  .offscreen {
    transition: none;
  }
}

form {
  display: flex;
  flex-direction:column;
}

label {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}
label[for="message"] {
  display:flex;
  flex-direction: row;
  align-items: center;
  margin-bottom:10px;
}
input[type=text], input[type=email] , textarea , select{
  padding: 10px;
  margin-bottom: 20px;
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  height:35px;
  width:260px;
  color: #333;
}

textarea{
  height:200px;
  width:250px;
  resize: none;
}
input[type=submit] {
  background-color: #47B58B;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.4s ease-in-out;
  margin-bottom:15px;
  height:45px;
  width:200px;
}

input[type=submit]:hover {
  background-color: #3D9C78;
}

#news {
  border-style:groove;
  border-radius: 15px;
  border-color: rgb(226, 77, 89);
  border-width:50px;
  background-color: rgb(226, 77, 89);
  width:100%
}


#devblog {
  border-style:groove;
  border-radius: 15px;
  border-color: rgb(236, 115, 238);
  border-width:50px;
  background-color: rgb(236, 115, 238);
  width:100%
}

@media (prefers-reduced-motion) {
.offrscreen {
  transition: none;
}
}

#nonews{
  font-size:45px;
}

#message-bar{
  padding:10px;
  background-color: red;
  text-align: center;
  margin:8px
}

#important_msg{
  color:white;
  font-family: Verdana, Geneva, Tahoma, sans-serif
}