@import url('https://fonts.googleapis.com/css2?family=Fontdiner+Swanky&display=swap');

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
font-family: 'Fontdiner Swanky', 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: flex;
    text-align: center;
    width: 90%;
    max-width: 800px;
    justify-content: space-between;
    margin: 0px auto;
  align-items: flex-start;
  
}

.door {
	width: 200px;
}

.clickable {
	cursor: pointer;
}

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

@media screen and (max-width:750px) {
	.door {
		width: 28%;
	}

	#wrapper h1 {
		font-size: 35px;
	}

}