.saltbread { position: absolute; width: 700px; height: 400px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .roll1 { position: absolute; width: 300px; height: 300px; top: 50%; left: 20%; background-image: radial-gradient(#f9bb7b, #AC6D0E); border-radius: 50%; animation: breath 1s infinite alternate; } .roll4 { position: absolute; width: 300px; height: 350px; top: 50%; left: 60%; background-image: radial-gradient(#F3B75D, #B3781F); border-radius: 40%; z-index: 2; animation: breath 1.3s infinite alternate; } .roll3 { position: absolute; width: 300px; height: 400px; right: 200px; top: 50%; left: 50%; background-image: radial-gradient(#F6CE92, #DB962F); border-radius: 40%; z-index: 3; animation: breath 1.2s infinite alternate; } .roll2 { position: absolute; width: 300px; height: 350px; top: 50%; right: 20%; background-image: radial-gradient(#F3B75D, #B3781F); z-index: 1; border-radius: 40%; animation: breath 1.1s infinite alternate; } .roll5 { position: absolute; width: 300px; height: 300px; top: 50%; left: 550px; background-image: radial-gradient(#f9bb7b, #AC6D0E); border-radius: 50%; animation: breath 1.4s infinite alternate; z-index: 1; .salt1 { position: absolute; width: 10px; height: 10px; top: 200px; left: 270px; border-radius: 40%; background-image: radial-gradient(white,#D3D1C7); z-index: 3; } .salt2 { position: absolute; width: 10px; height: 10px; top: 170px; left: 350px; border-radius: 40%; background-image: radial-gradient(white,#D3D1C7); z-index: 3; } .salt3 { position: absolute; width: 10px; height: 10px; top: 210px; left: 400px; border-radius: 40%; background-image: radial-gradient(white,#D3D1C7); z-index: 3; } .salt4 { position: absolute; width: 10px; height: 10px; top: 220px; left: 330px; border-radius: 40%; background-image: radial-gradient(white,#D3D1C7); z-index: 3; }