game.css

/* Fredoka One Font */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

.title {
    text-align: center;
    font-family: 'Fredoka One';
    font-size: 50px;
    color: #B4B8FF;
}

.text {
    text-align: center;
    font-family: 'Fredoka One';
    font-size: 15px;
}

.smallText {
    text-align: center;
    font-family: 'Fredoka One';
    font-size: 10px;
}

.buttonCenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 15rem;
}

.imageCenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
}

.containerbkgd {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    overflow: hidden;
}

.clouds {
    background-image: url("assets/bkgd.PNG");
    background-size: cover;
    background-repeat: no-repeat;
}

.bakery {
    background-image: url("./assets/bakerybkgd.png");
    background-size: cover;
    background-repeat: no-repeat;

}

.tutbkgd {
    background-image: url("assets/tutbkgd.png");
    background-size: cover;
    background-repeat: no-repeat;
}

.halosuccessbkgd {
    background-image: url("./assets/halosuccessbkgd.png");
    background-size: cover;
    background-repeat: no-repeat;

}

.halofailbkgd {
    background-image: url("./assets/halofailbkgd.png");
    background-size: cover;
    background-repeat: no-repeat;

}

.menubkgd {
    /* background-image: url("assets/menu.PNG"); */
    position: absolute;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: 450px;
    margin-right: auto;
    width: 40%;
    top: 0;
    left: 0;
}

.haloHaloIcon {
    position: relative;
    max-width: 100%;
    height: auto;
    margin-left: 807px;
    margin-right: 600px;
    margin-top: 100px;
    width: 7%;
}
    
/* responsive button imgs */
.responsive {
    width: 50%;
    height: auto;
}

.avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.buttonHover {
    opacity: 100%;
}

.buttonHover:hover {
    opacity: 70%;
}

.wrapper {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 2rem;
    align-items: center;
    height: 90%;
}

.row {
    display: flex;
}
  
.column {
    flex: 33.33%;
    padding: 5px;
    border: 4px solid #FDCED3;
}

h1 {
    color: #323330;
}

.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px;
    top: -120px;
}

.drop-targets {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    margin: 20px 0;
}

.squareBox {
    height: 150px;
    width: 150px;
    border: solid 3px;
    color: #FDCED3;
    margin: 10px;

    /* align items in the box */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.drag-over {
    border: dashed 3px;
    color: #B4B8FF
}

.item {
    height: 75px;
    width: 75px;
    background-color: #F0DB4F;
    
}

.hide {
    display: none;
}

.image {
    height: 256px;
    width: 256px;
    background: url(/assets/steps/step1.PNG) 0px 0px;
}