@import url("https://ksteffens.de/fonts/index.css");
body{
    background-image:linear-gradient(to bottom right, #1fe474, #014b1b);
    background-attachment: fixed;
    /*background-image:url("green.png"); */
    background-size:cover;
    /*background-color: #202020;*/
    margin:0pt;
    align-items: center;
    justify-content: center;
    display: flex;
    overflow: hidden ;
}
p{
    color:white;
    font-family:'sfprorounded';
    font-weight: bold;
    margin:0;
}   
.grid{
    display:grid;
    gap:10pt;
    height:fit-content;
    width: fit-content;
    grid-auto-columns:15pt ;
    grid-auto-rows: 15pt;
    padding:10pt;
}
.glass{
    background-image:linear-gradient(to bottom right, rgba(255, 255, 255, 0.123), rgba(224, 223, 223, 0.123));
    border-radius: 200pt;
    box-shadow: 0 0 20pt rgba(0, 0, 0, 0.525);
    backdrop-filter: blur(12pt);
    -webkit-backdrop-filter: blur(12pt);
    display: flex;
    justify-content: center;
} 
.glass:nth-child(n + 2) > img{
    height: calc(3*30pt + 2*10pt - 47.5pt);
    width: calc(3*30pt + 2*10pt - 47.5pt);
    border-radius: 100%;
    align-self: center;
    justify-self: center;
}
/*.glass:nth-child(n + 2):not(.grid-item3) > img{
    border-radius: 100%;
}*/
/*.glass:not(.grid-item5){
    border-left: 1pt solid rgba(255, 255, 255, 0.38);
    border-top: 1pt solid rgba(255, 255, 255, 0.38);
} */
.grid-item0{
    grid-column:1/14;
    grid-row:1/14;
}
.grid-item1{
    grid-column:1/5;
    grid-row:11/15;
}
.grid-item2{
    grid-column:4/8;
    grid-row:11/15;
}
.grid-item3{
    grid-column:7/11;
    grid-row:11/15;
}
.grid-item4{
    grid-column:10/14;
    grid-row:11/15;
}