@charset "UTF-8";
/* CSS Document */
body{
    background-color: #2F343B;
}

#main-box1{
    width: 900px;
    height: 600px;
    background-color: beige;
    position: relative;
    margin: 40px auto;
}

#main-box2{
    width: 900px;
    height: 600px;
    background-color: #FFEFDF;
    position: relative;
    margin: 40px auto;
    
}

#main-box3{
    width: 900px;
    height: 600px;
    background-color: #A6998A;
    position: relative;
    margin: 40px auto;
}

#main-box4{
    width: 900px;
    height: 600px;
    background-color: #A2A63C;
    position: relative;
    margin: 40px auto;
}

#main-box5{
    width: 900px;
    height: 600px;
    background-color: coral;
    position: relative;
    margin: 40px auto;
}

#main-box6{
    width: 900px;
    height: 600px;
    background-color: #93A8C9;
    position: relative;
    margin: 40px auto;
}

#main-box7{
    width: 900px;
    height: 600px;
    background-image: url("media/sunset.jpg");
    position: relative;
    margin: 40px auto;
}

#main-box8{
    width: 900px;
    height: 600px;
    background-color: #BF0426;
    position: relative;
    margin: 40px auto;
}
.vertical-center{
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.clouds{
    width: 900px;
    height: 400px;
    position: absolute;
    z-index: 1;
}

.building1{
    width: 225px;
    height: 440px;
    background-color: #703030;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}

.building2{
    width: 225px;
    height: 320px;
    background-color: #7E827A;
    position: absolute;
    left: 225px;
    bottom: 0;
    z-index: 2;
}

.building3{
    width: 225px;
    height: 410px;
    background-color: #C77966;
    position: absolute;
    left: 450px;
    bottom: 0;
    z-index: 2;
}

.building4{
    width: 225px;
    height: 360px;
    background-color: #E3CDA4;
    position: absolute;
    left: 675px;
    bottom: 0;
    z-index: 2;
}

.door1{
    width: 150px;
    height: 220px;
    position: absolute;
    left: 35px;
    bottom: 0;
    z-index: 3;
}

.door2{
    width: 100px;
    height: 215px;
    position: absolute;
    left: 60px;
    bottom: 0;
    z-index: 3;
}

.door3{
    width: 150px;
    height: 175px;
    position: absolute;
    left: 40px;
    bottom: 0;
    z-index: 3;
}

.door4{
    width: 150px;
    height: 200px;
    position: absolute;
    left: 40px;
    bottom: 0;
    z-index: 3;
}

.coffee-text{
    color: #E3CDA4;
    font-family: "SignPainter-HouseScript";
    font-size: 45pt;
    text-align: center;
    position: absolute;
    bottom: 225px;
    right: 5px;
}

.hardware-text{
    color: #2F343B;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-size: 30pt;
    position: absolute;
    bottom: 180px;
    left: 25px;
}

.pet-text{
    color: #703030;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 35pt;
    text-align: center;
    position: absolute;
    bottom: 225px;
    left: 0px;
}

.pharma-text{
    color: #C77966;
    font-family: "American Typewriter";
    font-size: 25pt;
    position: absolute;
    bottom: 250px;
    left: 15px;
}

.cafe{
    width: 900px;
    height: 600px;
}

.wrench{
    width: 200px;
    height: 320px;
    position: absolute;
    top: 25px;
    left: 20px;
}

.screwdriver{
    width: 300px;
    height: 350px;
    position: absolute;
    right: 200px;
    bottom: 80px;
}

.crowbar{
    width: 300px;
    height: 600px;
    position: absolute;
    right: 10px;
    top: 15px;
}

.level{
    width: 400px;
    height: 150px;
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.hammer{
    width: 300px;
    height: 450px;
    position: absolute;
    top: 25px;
    left: 200px;
    z-index: 2;
}

.hammer-gif{
    width: 565px;
    height: 570px;
    position: fixed;
    bottom: 190px;
    left: 340px;
    z-index: 1;
}

.hammer-vid{
    width: 300px;
    height: 600px;
    position: absolute;
    left: 200px;
    bottom: 50px;
    transform: rotate(180deg);
}

.exit1{
    width: 80px;
    height: 60px;
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
}

.cup1{
    width: 50px;
    height: 70px;
    position: absolute;
    bottom: 225px;
    left: 10px;
    z-index: 1;
}

.cup2{
    width: 45px;
    height: 60px;
    position: absolute;
    bottom: 325px;
    left: 300px;
    z-index: 1;
}

.bagel{
    width: 60px;
    height: 45px;
    position: absolute;
    top: 250px;
    right: 300px;
    z-index: 1;
}

.coffee-vid{
    width: 140px;
    height: 160px;
    position: absolute;
    left: 400px;
    top: 325px;
    transform: rotate(180deg);
}

.nespresso{
    width: 75px;
    height: 110px;
    position: absolute;
    right: 120px;
    top: 60px;
    z-index: 3;
}

.skink{
    width: 900px;
    height: 600px;
    position: absolute;
    bottom: 30px;
}

.bean{
    width: 325px;
    height: 420px;
    position: absolute;
    left: -1px;
    bottom: -25px;
}

.yogi{
    width: 220px;
    height: 250px;
    position: absolute;
    left: 300px;
    bottom: 0;
}

.snake{
    width: 300px;
    height: 400px;
    position: absolute;
    top: 15px;
    right: 90px;
}

.steamy-cup{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 3
}

.coffee-machine-text{
    width: 600px;
    height: auto;
    font-family: "SignPainter-HouseScript";
    font-size: 20pt;
    color: #703030;
    position: absolute;
    left: 125px;
    bottom: 5px;
}

.hammering-text{
    width: 200px;
    height: 600px;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
    font-size: 40pt;
    color: #F2B705;
    position: absolute;
    right: 40px;
    top: 100px;
}

.apron{
    width: 200px;
    height: auto;
    position: absolute;
    left: 10px;
    bottom: 10px;
}

.back-to-hardware{
    width: 200px;
    height: auto;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 15pt;
    color: #044BD9;
    position: absolute;
    left: 10px;
    bottom: 190px;
}

.dry-shampoo{
    width: 80px;
    height: auto;
    position: absolute;
    left: 10px;
    top: 10px;
}

.vitamins{
    width: 200px;
    height: auto;
    position: absolute;
    top: 80px;
    right: 45px;
}

.deoderant{
    width: 125px;
    height: auto;
    position: absolute;
    bottom: 20px;
    right: 350px;
}

.pills-gif{
    width: 600px;
    height: auto;
    position: absolute;
    top: 100px;
    left: -10px;
}

.bandaid-gif{
    width: 200px;
    height: auto;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.bandaid-text{
    width: 400px;
    height: auto;
    font-family: "American Typewriter";
    font-size: 20pt;
    color: #C77966;
    position: absolute;
    left: 250px;
    bottom: 10px;
    
}

.grooming-vid{
    width: 140px;
    height: 160px;
    position: absolute;
    left: 300px;
    top: 100px;
}

.bone-gif{
    width: 200px;
    height: auto;
    position: absolute;
    left: 10px;
    bottom: 10px;
    
}

.grooming-text{
    width: 250px;
    height: auto;
    position: absolute;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 20pt;
    color: #4BAABF;
    left: 10px;
    bottom: 100px;
}

.bath-text{
    width: 200px;
    height: auto;
    position: absolute;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 20pt;
    color: #402312;
    left: 20px;
    bottom: 300px;
}

.who-text{
    width: 400px;
    height: auto;
    position: absolute;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 35pt;
    color: #402312;
    right: 10px;
    bottom: 2px;
}

.trick-text{
    width: 200px;
    height: auto;
    position: absolute;
    font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
    font-size: 15pt;
    color: antiquewhite;
    left: 300px;
    top: 50px;
}

.deoderant-text{
    width: 100px;
    height: auto;
    position: absolute;
    font-family: "American Typewriter";
    font-size: 20pt;
    color: #A9BDD7;
    right: 250px;
    bottom: 10px;
    z-index: 2;
}

.sun-gif{
    width: 200px;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}

.pill1{
    width: 75px;
    height: auto;
    position: absolute;
    left: 50px;
    top: 75px;
}

.pill2{
    width: 200px;
    height: auto;
    position: absolute;
    top: 60px;
    right: 100px;
}

.pill3{
    width: 175px;
    height: auto;
    position: absolute;
    top: 150px;
    left: 250px;
}

.pill4{
    width: 225px;
    height: auto;
    position: absolute;
    bottom: 65px;
    left: 20px;
}

.pill5{
    width: 125px;
    height: auto;
    position: absolute;
    right: 25px;
    bottom: 40px;
}

.pill6{
    width: 225px;
    height: auto;
    position: absolute;
    right: 200px;
    bottom: 100px;
}

.loose-pills{
    width: 400px;
    height: auto;
    font-family: "American Typewriter";
    font-size: 40pt;
    color: #39588A;
    position: absolute;
    right: 250px;
    top: 10px;
    z-index: 2;
}

.sunset-text{
    width: 400px;
    height: auto;
    font-family: "Futura Medium";
    font-size: 30pt;
    color: aliceblue;
    position: absolute;
    left: 250px;
    bottom: 5px;
}

.goto-cafe-text{
    width: 200px;
    height: 200px;
    font-family: "SignPainter-HouseScript";
    font-size: 20pt;
    color: aliceblue;
    position: absolute;
    left: 10px;
    bottom: 5px;
}