* {box-sizing:border-box;
scrollbar-color:#555568 #a0a08b;}

::selection {background-color:#211e20;
color:#e9efec;}

body {background-color:#211e20;
color:#e9efec;
font-family: "Atkinson Hyperlegible", Helvetica, sans-serif;}

.container {width:70%;
max-width:1000px;
margin:auto;
background-color:#555568;
padding:15px;
border:1px #e9efec solid;
border-radius:5px;
transition:0.5s;
}

.container img {max-width:100%;}

a {color:#a0a08b;}

h1, h2 {text-align:center;}

#wizard {display:none;}

#clouds1 {width:200px;}

#clouds1:hover {width:100%;}

#mycat {width:200px;
transition:0.5s;}

#mycat:hover {width:100%;}

.contain {display:flex;
flex-wrap:wrap;
width:100%;
gap:10px;}

#checkthisout {display:inline-block;
height:100px;
width:100px;
border:3px solid #211e20;
transition:0.5s;
border-radius:100%;}

#checkthisout:hover {border-radius:0;
}

.glowing {box-shadow:#e9efec 0px 0px 50px;}

.glowingbox {display:inline-block;
margin-right:100px;
width:100px;
height:100px;
background-color:white;
border:black 2px solid;
box-shadow: 0px 0px 100px white;}

.floatingbox {display:inline-block;
margin-right:100px;
width:100px;
height:100px;
background-color:white;
border:black 2px solid;
box-shadow: 2px 4px 5px rgba(00,00,00,0.5);}

.layers {display:inline-block;
margin-right:100px;
width:100px;
height:100px;
background-color:white;
border:black 2px solid;
box-shadow: 5px 5px red,
-10px -10px 100px orange,
8px 8px yellow,
-5px 5px 13px green,
100px 25px blue}

.noblur {display:inline-block;
margin-right:100px;
width:100px;
height:100px;
background-color:white;
border:black 2px solid;
box-shadow: 10px 10px white;}

.insetshadowbox {display:inline-block;
margin-right:50px;
width:100px;
height:100px;
background-color:white;
border:black 2px solid;
box-shadow: 3px 5px 10px inset black;}

.flex {display:flex;}

.hoverme, .hoverme2, .hoverme3 {margin:auto;
width:100px;
height:100px;
background-color:white;
color:black;
border:2px black solid;
transition:0.5s;}

.hoverme:hover {box-shadow: 2px 10px 10px rgba(00,00,00,0.5);}

.hoverme2:hover {box-shadow:10px 10px 100px white;}

.hoverme3:hover {box-shadow:
6px 6px red,
8px 8px orange,
10px 10px yellow,
12px 12px green,
14px 14px cyan}

.bearsticker {position:absolute;
top:200px;
left:333px;}

.relativebox {margin:auto;
border:#e9efec 3px solid;
width:400px;
height:300px;
position:relative;}

.relativebox2 {margin:auto;
border:#e9efec 3px solid;
width:60%;
height:30vw;
position:relative;}

.relativebox3 {margin:0;
display:inline-block;
border:#e9efec 3px solid;
width:60%;
height:30vw;
position:relative;}

.relativeboxnooverflow {margin:0;
display:inline-block;
border:#e9efec 3px solid;
width:60%;
height:30vw;
position:relative;
overflow:auto;}


.bearsticker2 {position:absolute;
right:0;
bottom:0;}

.bearsticker3 {position:absolute;
right:-100px;
top:-50px;}

.smiley {margin-left: -100px;}

.theseguys {margin-left:-50px;}

.pinksmiley {position:relative;
z-index:100;}
.orange {margin-left:-100px;}
.bear {margin-left:-100px;}

@media only screen and (max-width: 700px) {
#kitten {display:none;}

#wizard {display:block;}

.container {width:90%;}
}