/* This is the main style file
  style.css*/

html, body {
    height: 100%;
    margin: 0;
  }
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0);
  }
  
  .card {
    height: 180px;
    width: 300px; 
    padding: 20px;
    background: linear-gradient(to bottom, #f39d12ad , yellow 30%);
    box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.1);
    border-radius: 2px; 
  }
  .badge-border {
    position: absolute;
    width: 55px;
    height: 65px;
    margin-top: -20px;
    background-color: rgb(248, 181, 11);
    clip-path: polygon(
        0% 0%, 
        100% 0%, 
        100% 100%, 
        50% 80%, 
        0% 100%
    );
    z-index: 1;
}

.badge {
    position: relative;
    height: 60px;
    width: 50px;
    top: 0.1px;
    left: 2.5px;
    right: 2.5px;
    bottom: 0;
    background-color: yellow;
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% 100%,
        50% 80%,
        0% 100%
    );
}
.logo {
  position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 60px;
    z-index: 2;
}
.text {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Permanent Marker", cursive;
  font-weight: 300;
  font-style: normal;
  margin-top: -10px;
}
.text h1  {
  font-size: 25px;
  margin-top: -30px;
}
.text h2  {
  font-size: 20px;
}
.num1 {
  transform: translate(0px, 30px) rotate(-40deg);
}
.num2 {
  transform: translate(0px, 28px) rotate(-35deg);
}
.num3 {
  transform: translate(0px, 26px) rotate(-30deg);
}
.num4 {
  transform: translate(0px, 24px) rotate(-25deg);
}
.num5 {
  transform: translate(0px, 22px) rotate(-20deg);
}
.num6 {
  transform: translate(0px, 20px) rotate(-15deg);
}
.num7 {
  transform: translate(0px, 18px) rotate(-10deg);
}
.num8 {
  transform: translate(0px, 16px) rotate(0deg);
}
.num9 {
  transform: translate(0px, 18px) rotate(10deg);
}
.num10 {
  transform: translate(0px, 20px) rotate(15deg);
}
.num11 {
  transform: translate(0px, 22px) rotate(20deg);
}
.num12 {
  transform: translate(0px, 24px) rotate(25deg);
}
.num13 {
  transform: translate(0px, 26px) rotate(30deg);
}
.num14 {
  transform: translate(0px, 28px) rotate(35deg);
}
span {display: inline-block; margin: 1px;}

.footer {
  font-family: arial black;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  margin-top: 170px;
}