@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
font-family: 'Comic Neue', cursive;
 background-color:#bc80cc;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:white;
 margin-bottom: 60px;
}
#wrapper p
{
 font-size:16px;
}
#logout_form input[type="submit"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 font-size:16px;
 background:none;
 border:2px solid white;
 color:white;
}
#login_form
{
 
 background-color:white;
 width:350px;
 margin-left:310px;
 padding:20px;
 box-sizing:border-box;
 box-shadow:0px 0px 10px 0px #3B240B;
 margin: 0px auto;
 margin-top:200px;
}
#login_form h1
{
 margin:0px;
 font-size:25px;
 color:#8A4B08;
}
#login_form input[type="password"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 padding-left:10px;
 font-size:16px;
}
#login_form input[type="submit"]
{
 width:250px;
 margin-top:10px;
 height:40px;
 font-size:16px;
 background-color:#8A4B08;
 border:none;
 box-shadow:0px 4px 0px 0px #61380B;
 color:white;
 border-radius:3px;
}
#login_form p
{
 margin:0px;
 margin-top:15px;
 color:#8A4B08;
 font-size:17px;
 font-weight:bold;
}

.doorcontainer {
    display: block;
    text-align: center;
    width: 90%;
    max-width: 1000px;
    margin: 0px auto;
	margin-bottom: 100px;
}

.door {
	width: 80px;
	margin: 20px;
}

.clickable {
	cursor: pointer;
}

.smalldoor {
	width: 20px;
	position: absolute;
	bottom: -200px;
	right: 20px;
	cursor: pointer;
}

.counter {
	background-color: #fff;
	padding: 12px 20px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	border-radius: 40px;
}

.winbody {
	background-color: #000;
	background-image: url("./img/float.jpeg");
	background-size: cover;
	background-position: center;
}

#wrapperwin {
	margin:0 auto;
 padding:0px;
 text-align:center;
 color: #fff;
 max-width: 800px;
 width: 90%;
 margin-top: 40px;
}

#wrapperwin h1 {
	font-size: 40px;
	text-shadow: 0px 4px 8px #0007;

}

.fireworks {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
}


@media screen and (max-width:750px) {
	#wrapper h1 {
		font-size: 35px;
	}

}