.yellow {
    background-color: #F4F1BB;
}

.red {
    background-color: #ED6A5A;
}

.blue {
    background-color: #9BC1BC;
}

.box {
    position: relative;
    padding: 10px;
    height: 40px;
    width: 40px;
    border-style: dashed;
    border-width: 1px;
    border-color: #5CA4A9;
    background-color: #E6EBE0;
    text-align: center;
    color: #5CA4A9;
}

.toggled {
    background-color: #5CA4A9;
}

.icon {
    position: absolute;
    top: 15%;
    left: 15%;
}

.person {
    z-index: 2;
    width: 70%;
	  height: 70%;
	  border-radius: 50%;
}

.wall {
    z-index: 1;
    position: absolute;
    background-color: #5CA4A9;
    border-radius: 3px;
}

.tile {
    z-index: 1;
    border-radius: 3px;
}

.moon {
    width: 70%;
    height: 70%;
}

.square {
    width: 30%;
    height: 30%;
}

.vertical {
    top: -7%;
    left: -15%;
    width: 25%;
    height: 114%;
}

.horizontal {
    top: 90%;
    left: -15%;
    width: 120%;
    height: 25%;
}

.container {
    display: flex;
}

.outer {
    display: flex;
    flex-direction: row;
    width: fit-content;
    margin: auto;
    border-width: 13px;
    border-color: #5CA4A9;
    border-radius: 3px;
    border-style: solid;
}

.inner {
    background-color: red;
}