.flex{
    width:100vw;
    height:100vh;
    padding:0;
    margin:0;
    display:flex;
    align-items: center;
    justify-content: center;    
    z-index:1;
}
body{
    overflow: hidden;
    padding:0;
    margin:0;
    /*
    bg 
    https://unsplash.com/photos/assorted-antique-store-display-fUZ3hol13yw
    
beard 
https://unsplash.com/photos/man-wearing-eyeglasses-with-black-frames-JBqwqLG0SXw   

pillow img
https://unsplash.com/photos/a-white-pillow-sitting-on-top-of-a-bed-next-to-a-plant-UC2M_SdOUUA


bg audio 
"Big Mojo" Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 4.0 License
http://creativecommons.org/licenses/by/4.0/

crash
Picture frame dropped on wood floor, shatters.wav by SpliceSound -- https://freesound.org/s/156578/ -- License: Creative Commons 0

pillow audio and mouth audio
Making Bed. Pillows buffing, Heavy duvet straighten. Recorder with Zoom H6 and XY Capsule. Making bed with multiple pillows..wav by JarredKarp -- https://freesound.org/s/490963/ -- License: Attribution NonCommercial 4.0

rolling
rolling_plastic_balls01.flac by wjoojoo -- https://freesound.org/s/273555/ -- License: Attribution 4.0
*/
}
h1{
    font-size: min(20vmin,110px);
    font-family: "Kenia", sans-serif;
  font-weight: 400;
  font-style: normal;
    color:rgb(255, 255, 255);
    padding-bottom:0;
    margin-bottom:0;
    padding-left:10px;
    padding-right:10px;
    background-color:rgb(56, 40, 1);
    border-radius: 10px;
}
p{
    font-family: "Chewy", system-ui;
    font-weight: 400;
    font-style: normal;
   font-size: min(8vmin,70px);
   color:white;
margin-bottom:20px;   
margin-top:20px;    

}
.tutorial{
    position:absolute;
    z-index:1000;
    display: none;
     font-family: "Gloria Hallelujah", cursive;
    font-weight: 400;
    font-style: normal;
    background-color:white;
    color:black;
    width:300px;
    height:200px;
    border-radius:60px;
    border:2px solid black;
    font-size:20px;
    text-align:center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin:0;
    padding:0;
    padding-left:10px;
    padding-right:10px;
    opacity:80%;
}
button{
    font-family: "Chewy", system-ui;
    font-weight: 400;
    font-style: normal;
   font-size: min(10vmin,70px);
    border-radius: 20px;
    width:30vh;
    height:15vh;
    border:2px solid black;
}
button:hover{
    cursor:pointer;
}
.how{
       font-size: min(7vmin,70px);
}
.imgflex{
    display:flex;
    align-items: center;
    justify-content: center; 
}
.title{
    background-color:transparent;
    flex-direction: column;
    background-color: rgba(201, 219, 95, 0.344)
}
.titleimg{
     padding:0;
    margin:0;
    margin-right:50px;
    height:50vh;
}
.buttonflex{
flex-direction: column;
display: flex;
gap:10px;
}

.background{
position:absolute;
width:100vw;
height:100vh;
background-color:#452e00;
background-image: url("./shop.png");
background-size: cover;
background-position: 50% 0%;
opacity:80%;
z-index:-100;
}
.end{
    gap:10px;
    background-color:blue;
    display: none;
    flex-direction: column;
    background-color: rgba(219, 163, 95, 0.344);
    z-index:100;
}
canvas{
    padding:0;
    margin:0;
    z-index:1;
}
.beard{
    display:none;
    filter: brightness(10);
}

.pillowWall{
    display: none;
    background-attachment: fixed;
    padding:0;
    margin:0;
    background-image: url("./pillowwall.png");
    background-size: 120%;
    background-position: center;
    position:absolute;
    top:0;
    z-index:100;
    width:100vw;
    height:100vh;
     background-repeat: repeat-y;
}