html{
    background-color: #333333;
    --el-color: tranparent;
}

.base{
    position: fixed;
    background-color: #666666;
    width: 80vh;
    height: 80vh;
    margin: 50px auto auto;
    border: #000000 solid 2px;
    border-radius: 10px;
    z-index: -1000;
}

.square{
    position: absolute;

    width: 80px;
    height: 80px;

    text-align: center;
    font-weight: bold;
    font-family: sans-serif;
    vertical-align: middle;
    line-height: 80px;
}

.elA{
    background-color: #FF7F50;
    top: 91px;
    left: 200px;
}

.elB{
    background-color: #FFA850;
    top: 144px;
    left: 24px;
}

.elC{
    background-color: #96FF50;
    top: 503px;
    left: 59px;
}

.elD{
    background-color: #50FFF0;
    top: 630px;
    left: 605px;
}

.elE{
    background-color: #7809D3;
    top: 21px;
    left: 540px;
}

.elF{
    background-color: #AE09D3;
    top: 242px;
    left: 217px;
}

.elG{
    background-color: #D3096E;
    top: 191px;
    left: 630px;
}

.elH{
    background-color: #D30909;
    top: 568px;
    left: 324px;
}

.elI{
    background-color: #092BD3;
    top: 326px;
    left: 403px;
}

#links{
    font-family: sans-serif;
    color: white;
}

.pseudo::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    opacity: .20;
    background-color: var(--el-color);
}