* {
  box-sizing: border-box;

}

html {
  background: url(images/bg2.png) no-repeat center fixed;
  background-size: cover;
  
}




@font-face {
  font-display: swap; 
  font-family: 'Cherry Bomb One';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/cherry-bomb-one-v10-latin-regular.woff2') format('woff2'); 
}
@font-face {
  font-family: cheri; 
  src: url(cheri.TTF) format(ttf);
    font-weight: 400;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: conform; 
  src: url(conform.TTF) format(ttf);
  font-weight: normal;
  font-style: normal;
}


.body {
	text-align: center;
margin: auto;
border-style: double;
padding: 20px;
background-image: url(images/gingham.png);
background-size: 200px , 200px;
background-position: left top;
  background-repeat: repeat;
border-radius: 10px;
  border-color: purple;
border-style: thick;
font-family: 'conform', 'Brush Script MT', sans-serif;
max-width: 80%;
overflow-y: auto;
overflow-x: auto;


}

.button { border-radius: 25px;
background-color: pink;
width: 60%;
text-align:center;
overflow:hidden;
 transition-duration: 0.4s;
  cursor: pointer;
}

.button:hover {
	background-color: #cc99ff;
}

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center; 
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}


.header {
  background-image: url(images/Comic.png);
background-size: cover;
background-position: center;
  background-repeat: no-repeat;
border-style: double;
padding: 150px;
}

.footer {
  background-image: url(images/bg.png);
background-size: 600px , 600px;
background-position: left bottom;
  background-repeat: repeat;
border-style: double;
}

.main {

border-radius: 10px;
  border-color: purple;
border-style: double;
word-wrap: break-word;
background-color:rgba(255, 255, 255, 0.5);
}

.bear {
	background-image:url(images/barebearpin.png); 
background-repeat: no-repeat; 
background-size: 400px, 400px; 
background-position: top left;
position: absolute;
  top: 50px;
  left: 0;
   width: 400px;
  height: 400px;

}

.aside-1 {
  
}

.nav {
	border-style: double;
background-image: url(images/basket.png);
background-size: 300px , 300px;
background-position: left top;
  background-repeat: repeat;
overflow-y: auto;
overflow-x: hidden;
}

.box1 {
  width: 100%;
border-style: double;
background-image: url(images/plates.png);
background-size: 400px , 400px;
background-position: left top;
  background-repeat: repeat;
overflow-y: auto;
overflow-x: hidden;
}

.box2 {
  width: 100%;
border-style: double;
background-image: url(images/sun.png);
background-size: 300px , 300px;
background-position: left top;
  background-repeat: repeat;
overflow-y: auto;
overflow-x: hidden;
}

.box3 {
  width: 100%;
border-style: double;
background-image: url(images/kites.png);
background-size: 300px , 300px;
background-position: left top;
  background-repeat: repeat;
overflow-y: auto;
overflow-x: hidden;
}


.aside-2 {
  
}

p {
font-family: 'conform', 'Brush Script MT', cursive, sans-serif; 
 text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
font-size: 20px;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 0 0; }

}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}


h1 {
font-family: 'cheri';
color:purple;
 text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
font-size: 50px;
}
h2 {
font-family: 'cheri';
color:purple;
 text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
               1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
			   font-size: 30px;
}

 * { cursor: url(images/bee.cur), auto; }