.container
  div.card.card-1
    h2 Basic
    h3 $0
      span /mo.
    p Suitable for beginners 
    ul
      li.aval 2GB storage
      li.aval 10 accounts 
      li.aval 50GB Bandwidth
      li.unaval 24/7 support
    button.select Choose this plan
  div.card.card-2.hot-badge
    h2 Standard
    h3 $49
      span /mo.
    p Suitable for freelancers
    ul
      li.aval 20GB storage
      li.aval 20 accounts 
      li.aval 500GB Bandwidth
      li.unaval 24/7 support
    button.select Choose this plan
  div.card.card-3
    h2 Premium
    h3 $99
      span /mo.
    p Suitable for businesses
    ul
      li.aval 100GB storage
      li.aval 100 accounts 
      li.aval 500GB Bandwidth
      li.aval 24/7 support
    button.select Choose this plan


a.creator-link(href="https://www.kantorweb.com/" target="_blank") KantorWeb.com

$clr-r-d: #000000;
$clr-r-l: #C44536;
$clr-l: #EDDDD4;
$clr-pur: #781940;
$clr-g-d: #283D3B;
$clr-g-l: #197278;


*{
  box-sizing:border-box;  
}

body{
  background: $clr-r-d;
  font-family: 'Libre Baskerville', serif;
}

.container{
  margin:0 auto;
  text-align:center;
  white-space: nowrap;
}

.card{
  display:inline-block;
  position:relative;
  background: $clr-l;
  color: $clr-g-d;
  width:300px;
  height:450px;
  border-radius: 20px;
  overflow:hidden;
  margin: 0 auto;
  text-align:center;
  box-shadow:0 11px 26px 1px #0000004a, inset 0 -16px 90px #C4453640;
  
  h2 {
    margin: 0;
    width: 100%;
    font-size: 30px;
    background: $clr-r-l;
    padding: 20px 0;
    color: $clr-l;
    box-shadow:inset 0px 5px 4px -4px #ecddd461;
  }
  
  h3{
    margin:20px 0;
    font-size:60px;
    text-shadow: 3px 2px 2px #283d3b38;
    span{
      font-size:20px;
    } 
  } 

  
  p{
    font-style:italic;
    margin:0 0 30px 0;
  }
  
  ul{
    text-align:left;
    padding:0 50px;
    margin:0;
    li{
      display:block;
      
      &:not(:last-child){
        margin-bottom:10px;
      }
      
      &.aval::before{
        font-family: "Font Awesome 5 Free";
        content: "\f00c";
        font-weight: 900;
        font-size:20px;
        color:$clr-g-l;
        width:40px;
        display:inline-block;
      }      
      &.unaval::before{
        font-family: "Font Awesome 5 Free";
        content: "\f00d";
        font-weight: 900;
        font-size:20px;
        color: $clr-r-l;
        width:40px;
        display:inline-block;
      }
    }
  }
  
  .select{
    cursor:pointer;
    margin-top:20px;
    padding:10px 20px;
    border:none;
    font-weight:700;
    background: #3e3e3e;
    color:#efefef;
    font-size:15px;
    font-family:inherit;
    box-shadow: 0 8px 18px 4px #283d3b4d;
    
    &::before{
        font-family: "Font Awesome 5 Free";
        content: "\f07a";
        font-weight: 900;
        margin-right:15px;
    }
  }
  
  &-1, &-3{
    position:relative;
    transform:scale(.9);
  }
  &-1{
    left:40px;
    margin-left:-60px;
    z-index:0;
    h2{
      background:$clr-g-l;
    }
  }  
  &-2{
    z-index:1;
  }  
  &-3{
    left:-40px;    
    margin-right:-60px;
    z-index:0;
    h2{
      background:$clr-pur;
    }
  }
}

.hot-badge::after {
    content: 'HOT';
    position: absolute;
    background: linear-gradient(to right, #ffd400, #ffbc00);
    padding: 5px 54px;
    box-shadow: 0 0 5px 3px #715e006e;
    top: 17px;
    right: -46px;
    color: #5d4d00;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.creator-link{
  &:link, &:visited{
    text-decoration: none;
    color: #d8d8d8;
    background: #2d2d2d;
    text-shadow: 0 1px 3px black;
    position: fixed;
    bottom: 40px;
    right: -54px;
    padding: 5px 0px;
    margin: 0 auto;
    width: 230px;
    text-align: center;
    display: block;
    font-size: 20px;
    font-family: 'Nunito', sans-serif;
    margin-top: 50px;
    transform: rotateZ(-45deg);  
    z-index:10;
    transition:150ms;
  }
  &:hover{
    background: #56251f;
    color: white;
  }
}
// Made by Zvi Kantor