@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
body{
background-color:#d8d1ff;

}
.collapsible {
  background-color: #99896F;
  color: white;
  cursor: pointer;
  padding: 5px;
  width: 100%;
border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
margin-top:5px;
}

.active, .collapsible:hover {
  background-color: #99825e;
}


.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #edebe8;


}
a:link {
	color:red;
text-decoration: none;
}
#outermenu {
	width:100%;
min-width:200px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}

A {text-decoration: none;} 

#text {
background-color:white;
width:86.5%;
top:20px;
border:1px black dashed;
padding:20px;
margin-left:auto;
margin-right:auto;	
}

#container {
position:relative;
width:85%;
min-width:320px;
margin-left:auto;
margin-right:auto;	
box-shadow:4px 6px 10px;
  padding:10px;
background-color:white;
margin-top:20px;

}
#container2 {
position:relative;
width:100%;
top:20px;
margin_left:auto;
margin-right:auto;
}

a {
	color:red;
}
a:hover {
color:#666;	
}
.auto-style1 {
	width: 100px;
	height: 161px;
	float: left;
	backface-visibility: hidden;
	position: absolute;
	top: -30px;
	left: 0;
	z-index: 2;
	transform: rotateY(0deg);
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 20px;
font-weight:bold;
}
#header img {
	width:100%;
  border-radius: 25px;
top:20px;

}
#headertext {
width:55%;
	position:absolute;
margin-top:2%;
color:white;
margin-left:auto;
margin-right:auto;
z-index:2;
text-shadow: 2px 2px 8px #000000;
left:6%;
}
input[type=submit] {
  background-color: #1E90FF;
  border: none;
  color: white;
  text-decoration: none;
font-weight:normal ;
font-size:24px;
cursor: pointer;
border:1px black solid;
 text-shadow: 2px 2px 4px #000;
border-radius:10px;
}
input[type=submit]:hover {
  background-color: #0359ab;
  color: #fff;
 
font-weight:normal;
border:1px grey solid;
}

#head {
	font-weight:bold;
}
.collapsible {
  background-color: #F1f1f1;
  color: #000;
  cursor: pointer;
   width: 100%;
border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
margin-top:5px;
}
.active, .collapsible:hover {
  background-color: #fff;
box-shadow:2px 2px 4px 0px #333;
}
.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #F8F8F8;

}

.container2 {
  position: relative;
  width: 100%;
float:left;

}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  opacity: 0.6;
  
}

.container2:hover .overlay {
  height: 100%;
}

.text {
  color: #fff;
  font-size:2.3vw;
  position: absolute;
  top: 50%;
  left: 55%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
line-height:2.3vw;
 width:100%;
}
.text2 {
  color: #fff;
  font-size:1.8vw;
  position: absolute;
  top: 60%;
  left: 45%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: left;
line-height:1.8vw;

}
.signup {
	float:right;
margin-right:20px;
font-size:24px;
}