body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background-color: #0009f1; /* Blue background */
    display: block;
}

.image-container {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon {
    width: 45px;
}
img.center{
    position: absolute;
    width: 45%;
    max-width: 216px;
}

img.center_larger {
    position: absolute;
    width: 75%;
    max-width: 433px;
}

img.center_largest{
    position: absolute;
    width: 100%;
    max-width: 810px;
}

.icon-container {
    position: relative;
    text-align: center;
}
.icon-container a.item {
    margin: 10px;
}

@media(min-width: 660px){
    img.center_larger {
        position: absolute;
        width: 45%;
        max-width: 433px;
    }
        img.center_largest{
        position: absolute;
        width:60%;
        max-width: 810px;
    }
}

/* Desktop View */
@media(min-width: 1200px){
    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img.center{
        width: 100%;
    }
    img.center_larger {
        width: 100%;
    }
    img.center_largest{
        width: 100%;
    }

    .icon-container  {
        position: absolute;
        aspect-ratio: 1/1;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 810px;
        width: 810px;
    }
    .icon {
        width: 45px;
        transition: .3s all;
    }
    a.item {
        position: absolute;
        width: 45px;     
        height: 45px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
    }
    a.item:hover .icon{
        transform: scale(1.4);
    }

    .item:nth-child(1) { transform: rotate(-30deg) translate(500px) rotate(30deg); }
    .item:nth-child(2) { transform: rotate(-20deg) translate(500px) rotate(20deg); } 
    .item:nth-child(3) { transform: rotate(-10deg) translate(500px) rotate(10deg); }
    .item:nth-child(4) { transform: rotate(0deg) translate(500px) rotate(0deg); }
}