html {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FF2D8C'/%3E%3Cstop offset='1' stop-color='%23330000'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23FFCA6C' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FFCA6C' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    scrollbar-color: rgb(197, 110, 110) #962020 !important; 
}
body {
    overflow-x: hidden;
}

.pinterest {
    column-count: 5;
    column-gap: 10px;
}

.pinterest li {
    margin-bottom : 10px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.pinterest label {
    display: block;
    height: 100%;
    width: 100%;
}

label:hover {
    cursor: pointer;
}

label:has(input:checked) {
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    height: 101%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
}

.pinterest img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 80vw;
    max-height: 80vh;
    border-radius: 1rem;
}

li a {
    color: white;
    background-image: linear-gradient( 45deg, salmon, orange);
    aspect-ratio: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 2em;
    border-radius: 1rem;
}

label:has(input:checked) img {
    width: max-content;
    height: max-content;
    
}

@media (max-width:1200px) {
    .pinterest {
        column-count: 4;
    }
}
@media (max-width:1000px) {
    .pinterest {
        column-count: 3;
    }
}
@media (max-width:650px) {
    .pinterest {
        column-count: 2;
    }
}