body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    color:rgb(38, 38, 38);
    font-family: "Helvetica Neue",Helvetica,Arial;
    font-size: 8vh;
    text-align: center;
    overflow: hidden;
}

@media (min-width:0px) {
    .layer1 {
        position: absolute;
        top:0;
        left: 0;
        width: 100vh;
        height: 100vw;
        transform-origin:center;
        transform:translate(-25%, 0) rotate(90deg);
        z-index: 2;
        overflow: hidden;
        pointer-events: none;
    }

    .layer2 {
        position: absolute;
        top:0;
        left: 0;
        width: 100vh;
        height: 100vw;
        transform: translate(-25%, 0) rotate(90deg);
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
    }

    .layer3 {
        position: absolute;
        top:0;
        left: 0;
        width: 100vh;
        height: 100vw;
        transform: translate(-25%, 0) rotate(90deg);
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }
}

@media (min-width:801px) {
    .layer1 {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translate(-25%, 0);
        z-index: 2;
        overflow: hidden;
        pointer-events: none;
    }

    .layer2 {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translate(-25%, 0);
        z-index: 1;
        overflow: hidden;
        pointer-events: none;
    }

    .layer3 {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translate(-25%, 0);
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
    }
}

svg {
    position: absolute;
    cursor: hand;
    transition: 0.5s;
    pointer-events: none;
    &:hover {
        transform: scale(110%);
    }
}