<div class="body" id="body">
  <div class="page-title">
    <span>
      Patterns using Gradients
    </span>
  </div>
  <div class="wrapper">
    <div class="pattern close one">
      <div class="title">Buntings</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close two">
      <div class="title">Misty Fence</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close three">
      <div class="title">Evil Eye Charm</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close four">
      <div class="title">Mountain Range</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close five">
      <div class="title">Plain Old Kurti</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close six">
      <div class="title">Jets of cloud</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close seven">
      <div class="title">Chocolate Diamonds</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close eight">
      <div class="title">Waffles</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close nine">
      <div class="title">Black Bookmarks</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close ten">
      <div class="title">More Buntings</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close eleven">
      <div class="title">Table Cloth</div>
      <i class="icon fas fa-times"></i>
    </div>
    <div class="pattern close twelve">
      <div class="title">Dark Void</div>
      <i class="icon fas fa-times"></i>
    </div>

  </div>
</div>

/* VARIABLES -  START */
/* COLORS  */
$black: #000000;
$white: #ffffff;
/* DIMENSIONS */

/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
$theme-font: "Lato", sans-serif;
/* VARIABLES - END */
/* COMMONS - START */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
* {
  box-sizing: border-box;
  margin: 0;
}
/* COMMONS - END */
/* STYLES -  START */
.body {
  @extend .flex-center;
  .page-title {
    position: fixed;
    top: 0;
    left: 0;
    height: 35px;
    width: 100%;
    padding: 5px;
    font: 20px $theme-font;
    text-align: center;
    z-index: 10;
    background-color: white;
    span {
      background: linear-gradient(to right, royalblue, darkblue, black);
      -webkit-background-clip: text;
      color: transparent;
    }
  }
}
.wrapper {
  text-align: center;
  margin-top: 40px;

  .pattern {
    &.close {
      width: 180px;
      height: 180px;
      display: inline-block;
      border-radius: 90px;
      box-shadow: 5px 5px 5px #999;
    }
    margin: 10px;
    cursor: pointer;
    position: relative;
    overflow-y: auto;
    transition: border-radius 0.2s;
    &:hover .title {
      display: block;
    }
    &.fill {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 0;
      z-index: 15;
      overflow: hidden;
      margin: 0;
      .icon {
        display: block;
      }
      .title {
        display: none;
      }
    }

    .icon {
      color: black;
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 20px;
      display: none;
    }
    .title {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      font-family: $theme-font;
      padding-top: calc(50% - 12px);
      background: rgba(0, 0, 0, 0.5);
      border-radius: inherit;
      color: white;
    }
    &.one {
      background: linear-gradient(-45deg, white 50%, transparent 50%) 8px 0,
        linear-gradient(45deg, transparent 50%, pink 50%), white;

      background-size: 32px 32px;
    }
    &.two {
      background: linear-gradient(-45deg, plum 25%, transparent 50%, plum 25%)
          16px 0,
        linear-gradient(45deg, plum 25%, transparent 50%, plum 25%), black;
      background-size: 32px 128px;
    }
    &.three {
      background-color: white;
      background-image: radial-gradient(
        navy 4px,
        aqua 5px,
        transparent 12px,
        transparent 15px,
        darkblue 16px,
        darkblue 20px,
        transparent 21px,
        transparent 25px
      );
      background-size: 60px 60px;
    }
    &.four {
      background: linear-gradient(-45deg, white 50%, transparent 50%) 1px 0,
        linear-gradient(45deg, transparent 50%, rosybrown 50%),
        linear-gradient(135deg, white 50%, transparent 50%) 16px 0,
        linear-gradient(-135deg, transparent 50%, rosybrown 50%), white;

      background-size: 18px 54px;
    }
    &.five {
      background: linear-gradient(60deg, mintcream 50%, transparent 50%) 6px 0,
        linear-gradient(-60deg, transparent 50%, midnightblue 50%), mintcream;
      background-size: 32px 32px;
    }
    &.six {
      background: radial-gradient(circle, white 20px, skyblue 10px), skyblue;
      background-size: 25px 60px;
    }
    &.seven {
      background: radial-gradient(snow 16px, transparent 16px), chocolate;
      background-size: 30px 30px;
    }

    &.eight {
      background: linear-gradient(90deg, burlywood 46%, transparent 50%),
        linear-gradient(180deg, transparent 50%, burlywood 54%), bisque;

      background-size: 20px 20px;
    }
    &.nine {
      background: linear-gradient(0deg, white 15%, transparent 15%) 0 6px,
        linear-gradient(90deg, white 50%, transparent 50%) -10px 0,
        linear-gradient(120deg, black 50%, transparent 50%),
        linear-gradient(60deg, transparent 49%, black 50%), white;
      background-size: 40px 40px;
    }
    &.ten {
      background: linear-gradient(-60deg, seashell 50%, transparent 50%) 8px 0,
        linear-gradient(60deg, transparent 50%, PaleVioletRed 50%), seashell;
      background-size: 16px 32px;
    }
    &.eleven {
      background: linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.5) 20px,
          transparent 20px
        ),
        linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, 0.5) 50%) 20px
          20px,
        linear-gradient(0deg, rgba(0, 0, 0, 0.5) 50%, transparent 50%) 40px 0,
        linear-gradient(180deg, transparent 20px, rgba(0, 0, 0, 0.5) 20px) 40px
          0,
        floralwhite;
      background-size: 40px 40px;
    }
    &.twelve {
      background: linear-gradient(
          75deg,
          rgba(0, 0, 0, 0.4) 8px,
          transparent 10px
        ),
        linear-gradient(-75deg, rgba(0, 0, 0, 0.4) 8px, transparent 10px),
        linear-gradient(60deg, rgba(0, 0, 0, 0.6) 10px, transparent 10px),
        linear-gradient(-60deg, rgba(0, 0, 0, 0.6) 10px, transparent 10px),
        linear-gradient(45deg, black 8px, transparent 8px),
        linear-gradient(-45deg, black 8px, transparent 8px),
        linear-gradient(255deg, rgba(0, 0, 0, 0.4) 8px, transparent 10px),
        linear-gradient(-255deg, rgba(0, 0, 0, 0.4) 8px, transparent 10px),
        linear-gradient(240deg, rgba(0, 0, 0, 0.6) 10px, transparent 10px),
        linear-gradient(-240deg, rgba(0, 0, 0, 0.6) 10px, transparent 10px),
        linear-gradient(135deg, black 8px, transparent 8px),
        linear-gradient(-135deg, black 8px, transparent 8px), white;

      background-size: 90px 90px;
    }
  }
}
/* STYLES - END */

$(".pattern").click(function () {
  $(this).removeClass("close");
  $(this).addClass("fill");
  console.log($(window).width());
  if ($(window).width() < 650 || $(window).height() < 850) {
    $(window).scrollTop(0);

    $(".body").css({
      position: "fixed",
      top: `-${window.scrollY}px`
      // height: "100vh",
      // width: "100vw"
    });
  }
});

$(".icon").click(function (e) {
  e.stopPropagation();
  $parent = $(this).parent();
  $parent.removeClass("fill");
  $parent.addClass("close");
  if ($(window).width() <= 768 || $(window).height() < 850)
    $(".body").css({ position: "relative", top: "" });
});