body {
    margin: auto;
    text-align: center;
    font-size: 0;
    height: 100%;
}

.image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/*.rectangle {*/
/*    position: fixed;*/
/*    opacity: 0.8;*/
/*    border: solid gray 1px;*/
/*    background-color: white;*/
/*    width: 57.12%;*/
/*    height: 60%;*/
/*    z-index: 10;*/
/*    top: 10%;*/
/*    left: 21.42%;*/
/*}*/

.text {
    position: fixed;
    text-align: center;
    width: 40%;
    height: 70%;
    background-color: white;
    z-index: 10;
    top: 15%;
    left: 30%;
}

.textabout {
    background-color: #D8D8D8;
    opacity: 1;
}

.explanation {
    background-color: #D8D8D8;
    display: none;
}

.icon {
    position: fixed;
    width: 3%;
    height: 4%;
    right: 32%;
    top: 20%;
    z-index: 20;
}

.wrapper {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: auto;
    text-align: center;
}

.square {
    box-sizing: border-box;
    position: relative;
    background-color: white;
    display: inline-block;
    width: 14.2857%;
    height: 20%;
    border: solid #DDD4E7 1px;
    overflow: visible;
}

.border {
    border: solid white 2px;
    border-left: 0;
    border-top: 0;
}

.medium {
    width: 7.69%;
    height: 15%;
}


.link {
    width: 25%;
    height: 100%;
}

.about {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 1;
    opacity: 0.6;
}

.footer {
    display: inline-block;
    z-index: 5;
    width: 100%;
    height: 10%;
}