.parent {
    position: relative;
    width: 20vw;
    height: 20vw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -5vh;
    left: 0vw;
}

.parent2 {
    position: relative;
    width: 18vw;
    height: 18vw;
    background-color: var(--colorBody);
}

.child {
    position: absolute;
    top: 2vw;
    left: 2vw;
    width: 20vw;
    height: 20vw;
    display: flex;
    align-items: center;
    background-color: var(--colorBody);
    border: solid var(--ColorNumber5) 1vw;
}

.parent3 {
    position: relative;
    width: 80vw;
    height: 20vw;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -5vh;
    left: 10vw;
}

.parent4 {
    position: relative;
    width: 78vw;
    height: 18vw;
    background-color: var(--colorBody);
}

.child2 {
    position: absolute;
    width: 30vw;
    height: 24vw;
    display: flex;
    align-items: center;
    background-color: var(--colorBody);
    border: solid var(--ColorNumber5) 1vw;
    flex-direction: column;
    top: -5vh;
    left: 45vw;
}

.child3 {
    position: absolute;
    top: 4vw;
    left: 3vw;
    width: 30vw;
    height: 20vw;
    display: flex;
    align-items: center;
    background-color: var(--colorBody);
    border: solid var(--ColorNumber5) 1vw;
    flex-direction: column;
}

@media screen and (orientation: portrait) and (max-width: 500px) {
    .parent {
        width: 60vw;
        height: 60vw;
        top: 0vh;
    }
    .parent2 {
        width: 55vw;
        height: 55vw;
    }
    .child {
        width: 60vw;
        height: 60vw;
        border: solid var(--ColorNumber5) 2vw;
    }
    .parent3 {
        width: 86vw;
        height: 210vw;
    }
    .parent4 {
        width: 80vw;
        height: 200vw;
    }
    .child2 {
        width: 78vw;
        height: 126vw;
        top: 42vh;
        left: 0vw;
    }
    .child3 {
        top: 4vw;
        left: 0vw;
        width: 78vw;
        height: 62vw;
    }
}

@media screen and (orientation: portrait) and (min-width: 501px) {
    .parent {
        width: 40vw;
        height: 40vw;
        top: 0vh;
    }
    .parent2 {
        width: 35vw;
        height: 35vw;
    }
    .child {
        width: 40vw;
        height: 40vw;
        border: solid var(--ColorNumber5) 2vw;
    }
    .parent3 {
        width: 86vw;
        height: 84vw;
    }
    .parent4 {
        width: 80vw;
        height: 78vw;
    }
    .child2 {
        width: 78vw;
        height: 35vw;
        top: 28vh;
        left: 0vw;
    }
    .child3 {
        top: 2vw;
        left: 20vw;
        width: 40vw;
        height: 30vw;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .parent3 {
        height: 32vw;
    }
    .parent4 {
        height: 30vw;
    }
    .child2 {
        height: 40vw;
    }
    .child3 {
        left: 1vw;
        width: 40vw;
        height: 30vw;
    }
}

@media only screen and (min-width: 1025px) and (max-width: 1367px) and (orientation: landscape) {
    .parent3 {
        height: 27vw;
    }
    .parent4 {
        height: 25vw;
    }
    .child2 {
        height: 37vw;
    }
    .child3 {
        height: 23vw;
        width:35vw;
    }
}