← Back to Layouts
hazza's layout

Name: FriendRewind
Author: FriendRewind
Author: Hazza the Harrison !!
Category: Vintage
Created: October 30, 2026
my layout! (ivy's YOKO Ono layout coming soon)
See Layout
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"Indie Flower","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"https://friendrewind.com/uploads/gallery/35890/img_6ae48f92662160.16499530.webp","pageBgMode":"cover","heroImageUrl":"https://friendrewind.com/uploads/gallery/35890/img_6ae48cf6609479.81095648.webp","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#ffa200","navBgImage":"","navBgMode":"cover","navLinkColor":"#f0c57a","navLinkHover":"#ffd666","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":0,"contactHeaderBg":"#ff7b00","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":0,"contactBorderRadius":0,"contactBoxAnimation":"","interestsHeaderBg":"#ff8800","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":0,"interestsBorderRadius":0,"contentBoxAnimation":"","textBody":"#c48e31","textHeading":"#9e7b2e","textLink":"#ff7300","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":true,"moduleImages":{"contact":"https://friendrewind.com/uploads/gallery/35890/img_6ae48f92662160.16499530.webp","urlInfo":"https://friendrewind.com/uploads/gallery/35890/img_6ae48f968cfe26.26090921.webp","tableSection":"https://friendrewind.com/uploads/gallery/35890/img_6ae48db3e2e8a0.25721310.webp","tunes":"https://friendrewind.com/uploads/gallery/35890/img_6ae48f8b700050.50961050.webp","blogPreview":"https://friendrewind.com/uploads/gallery/35890/img_6ae48caff12570.53515642.webp","blurbs":"https://friendrewind.com/uploads/gallery/35890/img_6ae48b2ee9ceb1.48892124.webp","friends":"https://friendrewind.com/uploads/gallery/35890/img_6ae48fe6a95115.52499673.webp","Comments Background":"https://friendrewind.com/uploads/gallery/35890/img_6ae48fe27753e7.03295227.webp","comments":"https://friendrewind.com/uploads/gallery/35890/img_6ae48fe27753e7.03295227.webp"}} */
/* Generated by FriendRewind.com Visual Builder */

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower:wght@400;700&display=swap');

body, body.profile-page {
  background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae48f92662160.16499530.webp") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  color: #c48e31 !important;
  font-family: 'Indie Flower', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page {
    background-attachment: fixed !important;
  }
}

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://friendrewind.com/uploads/gallery/35890/img_6ae48cf6609479.81095648.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

.myspace-header .top-nav {
  background: #ffa200;
}

.myspace-header .main-nav-wrapper {
  background: #ffa200;
}

.myspace-header .main-nav li a {
  color: #f0c57a;
}

.myspace-header .main-nav li a:hover {
  color: #ffd666;
}

.blurbs, .module, .profileInfo, .table-section {
    background-color: #ffffff !important;
    border-radius: 0px !important;
  }

.contact {
    border: 0px solid #ff7b00 !important;
    border-radius: 0px !important;
  }

.contact .heading {
    background-color: #ff7b00 !important;
    color: #ffffff !important;
  }

.table-section, .friends, .blurbs, .module, .profileInfo {
    border: 0px solid #ff8800 !important;
    border-radius: 0px !important;
  }

.table-section .heading, .friends .heading, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading {
    background-color: #ff8800 !important;
    color: #ffffff !important;
  }

.profile, .table-section, .module, .blurbs, .section, .profileInfo, .friend-space, .badges-section, .url-info, .contact, .interests {
  color: #c48e31 !important;
}

h1, h2, h3, h4, h5, h6, .table-section h4, .module h4, .blurbs h4, .section h4 {
  color: #9e7b2e !important;
  text-shadow: 0 0 2px #000000 !important;
}

a, .profile a, .table-section a, .module a { color: #ff7300 !important; }

.contact {
  background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae48f92662160.16499530.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.url-info {
  background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae48f968cfe26.26090921.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.table-section {
  background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae48db3e2e8a0.25721310.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.tunes {
  background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae48f8b700050.50961050.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.blog-preview {
  background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae48caff12570.53515642.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.blurbs {
  background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae48b2ee9ceb1.48892124.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.friends {
  background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae48fe6a95115.52499673.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#comments, .comments-table td {
  background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae48fe27753e7.03295227.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>

<style>
/* FLYING BIRDS */

.bird-sky {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.css-bird {
  position: absolute !important;
  left: -70px;
  top: var(--top);

  width: 25px;
  height: 8px;

  background: #554f59;
  border-radius: 70% 55% 55% 70%;

  opacity: .55;

  transform: scale(var(--size));

  animation:
    bird-fly var(--speed) linear var(--delay) infinite;
}

/* tail */
.css-bird::before {
  content: "";
  position: absolute;

  left: -6px;
  top: 1px;

  width: 10px;
  height: 7px;

  background: #554f59;

  clip-path: polygon(
    100% 50%,
    0 0,
    25% 50%,
    0 100%
  );
}

/* beak */
.css-bird::after {
  content: "";
  position: absolute;

  right: -6px;
  top: 2px;

  width: 7px;
  height: 5px;

  background: #554f59;

  clip-path: polygon(
    0 0,
    100% 50%,
    0 100%
  );
}

/* wing */
.css-bird i {
  position: absolute;

  left: 8px;
  top: -5px;

  width: 15px;
  height: 10px;

  background: #554f59;

  border-radius: 100% 10% 100% 20%;

  transform-origin: left bottom;

  animation: bird-wing .55s ease-in-out infinite alternate;
}

/* birds cross the screen */
@keyframes bird-fly {
  0% {
    left: -70px;
  }

  100% {
    left: calc(100vw + 70px);
  }
}

/* wings flap */
@keyframes bird-wing {
  from {
    transform: rotate(-25deg);
  }

  to {
    transform: rotate(30deg);
  }
}
</style><div class="bird-sky">
  <span class="css-bird" style="--top:8%; --size:.55; --speed:24s; --delay:-4s;"></span>
  <span class="css-bird" style="--top:14%; --size:.8; --speed:31s; --delay:-18s;"></span>
  <span class="css-bird" style="--top:21%; --size:.45; --speed:27s; --delay:-9s;"></span>
  <span class="css-bird" style="--top:29%; --size:1; --speed:35s; --delay:-25s;"></span>
  <span class="css-bird" style="--top:37%; --size:.65; --speed:22s; --delay:-14s;"></span>
  <span class="css-bird" style="--top:46%; --size:.4; --speed:30s; --delay:-6s;"></span>
  <span class="css-bird" style="--top:54%; --size:.75; --speed:38s; --delay:-29s;"></span>
  <span class="css-bird" style="--top:63%; --size:.5; --speed:26s; --delay:-20s;"></span>
  <span class="css-bird" style="--top:71%; --size:.9; --speed:33s; --delay:-11s;"></span>
  <span class="css-bird" style="--top:80%; --size:.45; --speed:29s; --delay:-23s;"></span>
  <span class="css-bird" style="--top:88%; --size:.7; --speed:36s; --delay:-16s;"></span>
  <span class="css-bird" style="--top:94%; --size:.35; --speed:25s; --delay:-2s;"></span>
</div><style>
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae493659182a2.69833945.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  z-index: 999999;
  pointer-events: none;

  animation: loadingScreen 1s ease forwards;
}

@keyframes loadingScreen {
  0% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
</style>
<style>
/* PROFILE PICTURE CORNER STICKER */

.profile-pic {
    position: relative !important;
    overflow: visible !important;
}

/* decorative image */
.profile-pic::after {
    content: "" !important;

    position: absolute !important;

    /* move sticker around here */
    right: -12px !important;
    bottom: -10px !important;

    /* sticker size */
    width: 48px !important;
    height: 48px !important;

    background-image: url("https://friendrewind.com/uploads/gallery/35890/img_6ae48b7cc0ef24.97402113.webp") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    z-index: 999 !important;
    pointer-events: none !important;
}

.profile-pic::after {
    transition: transform 0.25s ease !important;
}

.profile-pic:hover::after {
    transform: rotate(12deg) scale(1.15) !important;
}
</style>
<style>
.online {
  visibility: hidden !important;
}

.online img {
  content: url("https://friendrewind.com/uploads/gallery/35890/img_6ae492cbcfa871.67331225.gif") !important;
  visibility: visible !important;

  display: block !important;
  width: 70px !important;
  height: auto !important;
  margin: 6px auto !important;
}
</style>
<style>* {
  cursor: url('https://cdn.cursors-4u.net/previews/tiny-skull-crossbones-69fe6d68-32.webp') 32 32, auto !important;
}
</style>
<style>
.logo .nav-logo {
  content: url('https://friendrewind.com/uploads/gallery/35890/img_6ae4a1fcf32257.43665670.webp');
  width: 180px;
  height: auto;
}
</style>
<style>
.profile .friends .person img {
  clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
  animation: spin 7s infinite linear;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}
</style>
<style>
.profile #comments,
.profile .friends#comments {
  max-height: 100px !important;
  overflow: hidden !important;
  transition: max-height .4s ease !important;
}

.profile #comments:hover,
.profile .friends#comments:hover {
  max-height: 600px !important;
  overflow-y: auto !important;
}
</style>
<style>
.profile .friends:not(#comments) {
  max-height: 85px !important;
  overflow: hidden !important;
  transition: max-height .4s ease !important;
}

.profile .friends:not(#comments):hover {
  max-height: 420px !important;
  overflow-y: auto !important;
}
</style>
<style>


#profile-playlist-container,
#profile-playlist-mount {
  overflow: visible !important;
}

/* ==========================================
   TURNTABLE BASE
   ========================================== */

#profile-playlist-container .profile-playlist-widget {
  --deck: #e8e1d5;
  --wood: #956d50;
  --ink: #272a2c;
  --paper: #f3eee5;
  --rust: #ac6548;

  position: relative !important;
  isolation: isolate !important;

  box-sizing: border-box !important;

  width: 250px !important;
  max-width: 100% !important;

  margin: 13px 0 18px 3px !important;
  padding: 12px 13px 17px !important;

  border: 2px solid #3a3632 !important;
  border-radius: 9px !important;

  overflow: visible !important;
  transform: none !important;

  background:
    linear-gradient(
      to bottom,
      transparent 0 199px,
      #9b8e7d 199px 200px,
      #cec4b7 200px 205px,
      transparent 205px
    ),
    linear-gradient(
      135deg,
      #f0e9dc,
      #d9d0c2
    ) !important;

  box-shadow:
    inset 0 0 0 5px var(--wood),
    inset 0 0 0 7px rgba(58,45,37,.35),
    3px 5px 0 #5a4134,
    7px 11px 15px rgba(0,0,0,.20)
    !important;
}

/* ==========================================
   VINYL RECORD + METAL PLATTER
   ========================================== */

#profile-playlist-container
.profile-playlist-widget::before {

  content: "" !important;

  position: absolute !important;

  top: 20px !important;
  left: 15px !important;

  width: 172px !important;
  height: 172px !important;

  box-sizing: border-box !important;

  border: 5px solid #35383c !important;
  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      #17191c 0 2px,
      #d5c6a8 2.5px 4px,
      var(--rust) 4.5px 20px,
      #dbbf9d 20.5px 22px,
      #161619 22.5px 27px,
      transparent 27.5px
    ),
    conic-gradient(
      from 25deg,
      rgba(255,255,255,.09) 0 12deg,
      transparent 12deg 115deg,
      rgba(255,255,255,.06) 115deg 122deg,
      transparent 122deg 360deg
    ),
    repeating-radial-gradient(
      circle,
      #111215 0 3px,
      #292a2d 3.5px 4.5px,
      #121317 5px 7px
    ) !important;

  box-shadow:
    0 0 0 2px #838788,
    0 0 0 5px #3e4143,
    2px 5px 8px rgba(0,0,0,.22)
    !important;

  z-index: 1 !important;
  pointer-events: none !important;

  transform: none !important;
  animation: none !important;
}

/* ==========================================
   INVISIBLE HEADING / TOP DECK SPACE
   ========================================== */

#profile-playlist-container
.profile-playlist-widget h3,

#profile-playlist-container
.profile-playlist-widget .pp-header h3 {

  position: relative !important;
  display: block !important;

  width: 100% !important;
  height: 190px !important;

  box-sizing: border-box !important;

  margin: 0 0 8px !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;
  color: transparent !important;

  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;

  z-index: 3 !important;
  pointer-events: none !important;
}

/* ==========================================
   SILVER TONEARM
   ========================================== */

#profile-playlist-container
.profile-playlist-widget h3::before {

  content: "" !important;

  position: absolute !important;

  top: 13px !important;
  right: 10px !important;

  width: 20px !important;
  height: 116px !important;

  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;

  background:
    radial-gradient(
      circle at 50% 10px,
      #373b3d 0 3px,
      #d9dcd9 3.5px 7px,
      #51575a 7.5px 10px,
      transparent 10.5px
    ),
    linear-gradient(
      90deg,
      #45494b,
      #cbd0cd 34%,
      #f8f6ed 55%,
      #777d7e
    ) center 18px / 7px 75px no-repeat,
    linear-gradient(
      90deg,
      #25282a,
      #858b8d 55%,
      #313436
    ) center 90px / 14px 14px no-repeat,
    linear-gradient(
      #242426,
      #242426
    ) center 103px / 2px 8px no-repeat
    !important;

  box-shadow: none !important;

  z-index: 5 !important;
  pointer-events: none !important;

  transform-origin: 50% 10px !important;
  transform: rotate(-9deg) !important;

  transition:
    transform .65s cubic-bezier(.2,.72,.25,1)
    !important;
}

/* ==========================================
   ROTARY SPEED / POWER DIAL
   ========================================== */

#profile-playlist-container
.profile-playlist-widget h3::after {

  content: "" !important;

  position: absolute !important;

  top: 143px !important;
  right: 6px !important;

  width: 29px !important;
  height: 29px !important;

  padding: 0 !important;

  border: 2px solid #4b4b4a !important;
  border-radius: 50% !important;

  background:
    radial-gradient(
      circle at 50% 24%,
      #a75b43 0 2px,
      transparent 2.5px
    ),
    radial-gradient(
      circle,
      #d1d2d0 0 9px,
      #888b8a 10px 12px,
      #36393a 13px 100%
    ) !important;

  box-shadow:
    1px 3px 3px rgba(0,0,0,.2) !important;

  z-index: 3 !important;
  pointer-events: none !important;

  transform: rotate(-32deg) !important;
  transition: transform .65s ease !important;
}

/* ==========================================
   RECESSED SONG LIST PANEL
   ========================================== */

#profile-playlist-container
.profile-playlist-widget ul {

  position: relative !important;
  z-index: 3 !important;

  box-sizing: border-box !important;

  width: 100% !important;
  height: 116px !important;
  max-height: 116px !important;

  margin: 0 !important;
  padding: 5px !important;

  list-style: none !important;

  border: 3px solid #3b3d3d !important;
  border-radius: 5px !important;

  background: #d9d2c5 !important;

  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.26),
    inset 0 0 0 2px rgba(255,255,255,.14),
    0 1px 0 #fff7e8
    !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  scrollbar-width: thin !important;
  scrollbar-color: #80786e #d9d2c5 !important;

  transform: none !important;
}

/* ==========================================
   SPEAKER GRILLE / MESH OVERLAY
   ========================================== */

#profile-playlist-container
.profile-playlist-widget ul::after {

  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  border-radius: 2px !important;

  background:
    repeating-linear-gradient(
      45deg,
      rgba(45,45,45,.11) 0 1px,
      rgba(255,255,255,.04) 1px 3px,
      transparent 3px 6px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(45,45,45,.09) 0 1px,
      rgba(255,255,255,.03) 1px 3px,
      transparent 3px 6px
    ),
    linear-gradient(
      to bottom,
      rgba(255,255,255,.08),
      rgba(0,0,0,.03)
    ) !important;

  box-shadow:
    inset 0 0 10px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.18)
    !important;

  pointer-events: none !important;
  z-index: 4 !important;
}

/* ==========================================
   SONG ROWS
   ========================================== */

#profile-playlist-container
.profile-playlist-widget li {

  position: relative !important;
  z-index: 1 !important;

  box-sizing: border-box !important;

  margin: 1px 0 !important;
  padding: 5px 5px !important;

  border: 0 !important;
  border-bottom: 1px solid #beb4a5 !important;
  border-radius: 2px !important;

  background: rgba(243,238,229,.82) !important;
  color: var(--ink) !important;

  transform: none !important;
  box-shadow: none !important;

  transition: background .2s ease !important;
}

/* Song hover */

#profile-playlist-container
.profile-playlist-widget li:hover {

  background: rgba(213,226,228,.9) !important;
  transform: none !important;
}

/* Currently playing */

#profile-playlist-container
.profile-playlist-widget li.current {

  background: rgba(230,207,186,.92) !important;
  border-left: 3px solid var(--rust) !important;
}

/* ==========================================
   SONG TITLES
   ========================================== */

#profile-playlist-container
.profile-playlist-widget .song-info,

#profile-playlist-container
.profile-playlist-widget .song-info a {

  color: var(--ink) !important;

  font: bold 10px/1.25 Arial, sans-serif !important;

  text-decoration: none !important;
  text-shadow: none !important;
}

/* ==========================================
   ARTIST NAMES
   ========================================== */

#profile-playlist-container
.profile-playlist-widget .song-artist,

#profile-playlist-container
.profile-playlist-widget .song-artist a {

  color: #777066 !important;

  font: 9px/1.2 Arial, sans-serif !important;

  text-decoration: none !important;
  text-shadow: none !important;
}

/* ==========================================
   EXISTING SONG CONTROLS
   ========================================== */

#profile-playlist-container
.profile-playlist-widget .pp-drag,

#profile-playlist-container
.profile-playlist-widget button {

  color: #715b51 !important;
}

/* Equalizer */

#profile-playlist-container
.profile-playlist-widget .pp-equalizer span {

  background: var(--rust) !important;
}

/* Empty playlist message */

#profile-playlist-container
.profile-playlist-widget .profile-playlist-empty {

  color: #71695f !important;
  font: italic 10px/1.3 Arial, sans-serif !important;
}

/* Remove old dividers */

#profile-playlist-container
.profile-playlist-widget hr {

  display: none !important;
}

/* ==========================================
   HOVER: START THE TURNTABLE
   ========================================== */

#profile-playlist-container
.profile-playlist-widget:hover {

  transform: none !important;
  filter: none !important;
}

#profile-playlist-container
.profile-playlist-widget:hover::before {

  transform: none !important;
  animation: mini-turntable-spin 2.4s linear infinite !important;
}

#profile-playlist-container
.profile-playlist-widget:hover h3::before {

  transform: rotate(35deg) !important;
}

#profile-playlist-container
.profile-playlist-widget:hover h3::after {

  transform: rotate(50deg) !important;
}

/* ==========================================
   RECORD ROTATION
   ========================================== */

@keyframes mini-turntable-spin {

  from {
    rotate: 0deg;
  }

  to {
    rotate: 360deg;
  }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  #profile-playlist-container
  .profile-playlist-widget::before,

  #profile-playlist-container
  .profile-playlist-widget h3::before,

  #profile-playlist-container
  .profile-playlist-widget h3::after,

  #profile-playlist-container
  .profile-playlist-widget li {

    animation: none !important;
    transition: none !important;
  }

  #profile-playlist-container
  .profile-playlist-widget:hover::before {

    animation: none !important;
  }
}
</style>
<style>
/* FLOATING CLOUDS */

.cloud-sky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;

  width: 100vw !important;
  height: 190px !important;

  overflow: hidden !important;
  pointer-events: none !important;

  z-index: 0 !important;
}

.css-cloud {
  position: absolute;

  left: -160px;
  top: var(--top);

  width: 100px;
  height: 32px;

  background: rgba(255, 255, 255, .75);

  border-radius: 50px;

  transform: scale(var(--size));

  animation:
    cloud-float var(--speed) linear var(--delay) infinite;
}

/* left cloud puff */
.css-cloud::before {
  content: "";

  position: absolute;

  width: 45px;
  height: 45px;

  left: 18px;
  bottom: 10px;

  background: rgba(255, 255, 255, .75);

  border-radius: 50%;
}

/* right cloud puff */
.css-cloud::after {
  content: "";

  position: absolute;

  width: 55px;
  height: 55px;

  right: 13px;
  bottom: 7px;

  background: rgba(255, 255, 255, .75);

  border-radius: 50%;
}

@keyframes cloud-float {
  from {
    left: -160px;
  }

  to {
    left: calc(100vw + 160px);
  }
}
</style><div class="cloud-sky">
  <span class="css-cloud" style="--top:18px; --size:.65; --speed:45s; --delay:-8s;"></span>

  <span class="css-cloud" style="--top:55px; --size:1; --speed:60s; --delay:-35s;"></span>

  <span class="css-cloud" style="--top:105px; --size:.5; --speed:38s; --delay:-17s;"></span>

  <span class="css-cloud" style="--top:35px; --size:.8; --speed:52s; --delay:-42s;"></span>

  <span class="css-cloud" style="--top:125px; --size:.4; --speed:44s; --delay:-25s;"></span>
</div>