*{margin:0 1rem;padding:0;box-sizing:border-box;min-: 640px;}
body{font-family: "Roboto", sans-serif;font-weight: 100;font-size: 5rem;;background: #222;color: white;padding: 1rem;line-height: 1.2;}
/* code{background-color: seagreen;color: khaki;padding: 1rem;font-size: 4rem;line-height: 2;margin: 2rem 0;display: block;text-align: center;} */
img{margin:2rem;max-width: 90%;min-width: auto;transform: rotate(4deg);}
h1,h2,h3{margin: 50vh 0 10vh;max-height: 100vh;}
section{margin: 0;padding: 1rem;}
p{margin-bottom: 10rem;filter: blur(8px) invert(1);}
ul{margin-bottom: 100px;}
li{transform: rotate(-4deg);background: linear-gradient(80deg,darkred,crimson,red);}
table{margin: 5rem 0;}
td{width: 10%;font-size: 3rem;padding: 0;opacity: 2;height: auto;filter: invert(1);}
tr td:hover{opacity: 1;filter: blur(0) invert(0);transform: scale(1.01); cursor: pointer;}
td div.click{width: 100%;height: 100%;}
img:hover,p:hover{filter: blur(0) invert(0);cursor: pointer;}

@keyframes pulse {
    /*   Outward Pulse */
      25% {
        -webkit-transform: scale(1.01);
        -ms-transform: scale(1.01);
        transform: scale(1.01);
      }
    /*   Inward Pulse */
      75% {
        -webkit-transform: scale(0.98);
        -ms-transform: scale(0.98);
        transform: scale(0.98);
      }
    }
    
     code:hover {
      -webkit-animation-name: pulse;
      animation-name: pulse;
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
      -webkit-animation-iteration-count: 10;
      animation-iteration-count: 10; 
    }  


    
    .container .box
    {
      position: relative;
      max-width: 960px;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 40px auto;
      transition: 0.5s;
    }
    
    .container .box::before
    {
      content:' ';
      position: absolute;
      top: 0;
      left: 50px;
      width: 50%;
      height: 100%;
      text-decoration: none;
      background: #fff;
      border-radius: 8px;
      transform: skewX(15deg);
      transition: 0.5s;
    }
    
    .container .box::after
    {
      content:'';
      position: absolute;
      top: 0;
      left: 50;
      width: 50%;
      height: 100%;
      background: #fff;
      border-radius: 8px;
      transform: skewX(15deg);
      transition: 0.5s;
      /* filter: blur(30px); */
    }
    td .container .box::after, td .container .box::before
    {
      transform: skewX(-15deg);
    }
    
    .container .box:hover:before,
    .container .box:hover:after
    {
      transform: skewX(0deg);
      left: 20px;
      width: calc(100% - 90px);
      letter-spacing: 20px;
    }
    
    .container .box:nth-child(1):before,
    .container .box:nth-child(1):after
    {
      background: linear-gradient(315deg, #ffbc00, #ff0058)
    }
    
    .container .box:nth-child(2):before,
    .container .box:nth-child(2):after
    {
      background: linear-gradient(315deg, #03a9f4, #ff0058)
    }
    
    .container .box:nth-child(3):before,
    .container .box:nth-child(3):after
    {
      background: linear-gradient(315deg, #4dff03, #00d0ff)
    }
    
    .container .box span
    {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
      pointer-events: none;
      letter-spacing: 20px;
    }
    
    .container .box span::before
    {
      content:'';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      opacity: 0;
      transition: 0.1s;  
      animation: animate 2s ease-in-out infinite;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08)
    }
    
    .container .box:hover span::before
    {
      top: -50px;
      left: 50px;
      width: 100px;
      height: 100px;
      opacity: 1;
    }
    
    .container .box span::after
    {
      content:'';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);
      /* backdrop-filter: blur(10px); */
      opacity: 0;
      transition: 0.5s;
      animation: animate 2s ease-in-out infinite;
      box-shadow: 0 5px 15px rgba(0,0,0,0.08);
      animation-delay: -1s;
    }
    
    .container .box:hover span:after
    {
      bottom: -50px;
      right: 50px;
      width: 100px;
      height: 100px;
      opacity: 1;
    }
    
    @keyframes animate
    {
      0%, 100%
      {
        transform: translateY(10px);
      }
      
      50%
      {
        transform: translate(-10px);
      }
    }
    
    .container .box .content
    {
      position: relative;
      left: 0;
      /* padding: 20px 40px; */
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      z-index: 1;
      transform: 0.5s;
      color: #fff;
      letter-spacing: 4px;
      filter: blur(8px);
    }

    td .container .box .content {filter: blur(0);}
    
    .container .box:hover .content
    {
      left: -25px;
      padding: 60px 40px;
      letter-spacing: 0;
      filter: blur(0);
    }
    
    .container .box .content h2
    {
      font-size: 2em;
      color: #fff;
      margin-bottom: 10px;
    }
    
    .container .box .content p
    {
      font-size: 1.1em;
      margin-bottom: 10px;
      line-height: 1.4em;
    }
    
    .container .box .content a
    {
      display: inline-block;
      font-size: 1.1em;
      color: #111;
      background: #fff;
      padding: 10px;
      border-radius: 4px;
      text-decoration: none;
      font-weight: 700;
      margin-top: 5px;
    }
    
    .container .box .content a:hover
    {
      background: #ffcf4d;
      border: 1px solid rgba(255, 0, 88, 0.4);
      box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
    }