body {
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}
img {
    width: 100%;
    max-width: 350px;
}

.attachment section {
    height: 100vh;
    border: 10px solid #333;
    box-shadow: inset 0 0 0 10px #eee, inset 0 0 20px rgba(0,0,0,.5) ;
    background-attachment:fixed;
}

.attachment section:first-child {
    background-image: url(../../Day10/img/monkey-1200px-cmp.jpeg);
}

.attachment section:nth-child(2) {
    background-image: url(../../Day10/img/birds.jpeg);
}

.attachment section:nth-child(3) {
    background-image: url(../../Day10/img/blob-haikei.svg);
}

.pattern {
    background: url(../../Day10/img/bunting-flag.png);
    background-size: 200px;
}

.gradient section {
    height: 100vh;
    text-align: center;
    padding: 2rem;
}

.gradient, .nth {
    /* background-image: radial-gradient(circle at center, yellow, lime, salmon); */
    /* background-image: repeating-radial-gradient(circle, salmon, orange, salmon 20%); */
    /* try with multiple, opacity */
    background-color: lime;
    background-image: repeating-radial-gradient(circle, rgba(250, 128, 114, .5), rgba(255, 165, 0, .5) 20%),
                      repeating-radial-gradient(circle at top left, rgba(250, 128, 114, .5), rgba(255, 165, 0, .5) 20%),
                      repeating-radial-gradient(circle at bottom left, rgba(250, 128, 114, .5), rgba(255, 165, 0, .5) 20%),
                      repeating-radial-gradient(circle at bottom right, rgba(250, 128, 114, .5), rgba(255, 165, 0, .5) 20%),
                      repeating-radial-gradient(circle at top right, rgba(250, 128, 114, .5), rgba(255, 165, 0, .5) 20%);
                      
    /* background-image: repeating-radial-gradient(circle at center, rgba(250, 128, 114, .5), rgba(255, 165, 0, .5) 10%); */
}

.gradient img {
    mix-blend-mode: soft-light;
}

.nth section {
    padding: 2rem;
    text-align: center;
}

.nth section img:nth-child(3n+2) {
    mix-blend-mode: color-burn;
}

.nth section img:nth-child(4n+1) {
    mix-blend-mode: soft-light;
}