.bg1 {
    width: 30%;
    height: 30%;
    position: fixed;
    top: 5%;
    left: -10%;
    z-index: 27;
    background-color: var(--yellow);
    text-align: center;
}

.bg2 {
    width: 10%;
    height: 30%;
    position: fixed;
    left: 20%;
    top: 15%;
    z-index: 26;
    background-color: var(--red);
    text-align: center;
}

/*.bg3*/
.main {
    width: 40%;
    height: 45%;
    position: fixed;
    left: 30%;
    top: 20%;
    z-index: 36;
    background-color: var(--blue);
}

/*bg4*/
.questions {
    width: 25%;
    height: 36%;
    position: fixed;
    left: 5%;
    bottom: 3%;
    z-index: 25;
    background-color: var(--green);
}

.bg5 {
    width: 25%;
    height: 30%;
    position: fixed;
    right: 5%;
    top: 12%;
    z-index: -1;
    background-color: var(--purple);
    text-align: center;
}

.bg6 {
    width: 18%;
    height: 50%;
    position: fixed;
    right: -5%;
    bottom: 10%;
    z-index: -2;
    background-color: var(--magenta);
    text-align: center;
    color: darkgray;
}

.bg7 {
    width: 12%;
    height: 10%;
    position: fixed;
    right: 30%;
    bottom: 2%;
    z-index: 41;
    background-color: var(--yellow);
}