body{
    margin: 0 20px;
    color: #333;
    background-color: #EEEDF1;
}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

header{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    h2{
      font-weight: 400;
    }
}
/* Device: desktop */
@media screen and (min-width: 700px){
  main{
    height: 100vh;
  }
  .list{
    flex-direction: row;
  }

  .text-hovered{
    font-size: 48px;
    display: none;
    opacity: 0;
    transition: opacity 250ms ease-in-out;
  }

  .square{
    --box-shadow-size: 0px 74px 74px -74px;
    flex-direction: column;
    justify-content: center;
    width: 200px;
    height: 200px;
    gap: 0;
    padding: 0;
    border-radius: 5px;

    &:hover{
      box-shadow: none;
  
      .text-hovered{
        display: block;
        opacity: 1;
        animation: tada; 
        animation-duration: 1s; 
      }

      .img{
        display: none;
      }
      
      .top{
        transition-delay: 0s;
        transform: scaleX(1);
      }
      
      .right{
        transition-delay: var(--border-animation-duration);
        transform: scaleY(1);
      }
      
      .bottom{
        transition-delay: var(--border-animation-duration)*2;
        transform: scaleX(1);
      }
      
      .left{
        transition-delay: var(--border-animation-duration)*3;
        transform: scaleY(1);
      }
    }
  }
  :is(.dsm):hover{
      background-color: var(--dsm-color-lighten);
  }
  :is(.drive):hover{
    background-color: var(--drive-color-lighten);
  }
  :is(.photo):hover{
    background-color: var(--photo-color-lighten);
  }
  :is(.file):hover{
    background-color: var(--file-color-lighten);
  }
  :is(.plex):hover{
    background-color: var(--plex-color-lighten);
  }

  .border{
    display: block;

    &.top,
    &.bottom{
      transform: scaleX(0);
    }
  
    &.left,
    &.right{
      transform: scaleY(0);
    }
  }
}
/* Device: mobile */
@media screen and (max-width: 700px) and (orientation: portrait){
  main{
    height: 100svh;
  }
  .list{
    flex-direction: column;
  }
  .text-hovered{
    font-size: 32px;
  }
  .square{
    --box-shadow-size: 0 15px 15px -15px;
    height: initial;
    justify-content: flex-start;
    width: 60vw;
    flex-direction: row;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
  }
  .border{
    display: none;
  }
}

.list{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    gap: 20px;
    padding: 0;
    margin: 0;

    li{
        font-family: Helvetica;
    }
}

.square{
    --box-shadow-color: rgb(55 38 166 / 90%);
    --border-animation-duration: 0.125s;
    --border-width: 4px;
    --border-color: #0074DB;

    --dsm-color-rgba:5 127 235 / 90%;
    --dsm-color: #057FEB;
    --dsm-color-lighten: #60b3fc;
    --drive-color-rgba: 30 185 199 / 90%;
    --drive-color: #1EB9C7;
    --drive-color-lighten: #6cdfe9;
    --photo-color: #FF6F61;
    --photo-color-rgba: 255 111 97 / 90%;
    --photo-color-lighten: #ffa9a0;
    --file-color-rgba:0 116 219 / 90%;
    --file-color: #0074DB;
    --file-color-lighten: #6dbbff;
    --plex-color-rgba:229 160 13 / 90%;
    --plex-color: #e5a00d;
    --plex-color-lighten: #f8d280;
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
  background-color: white;
  text-decoration: none;
  box-shadow: var(--box-shadow-size) var(--box-shadow-color);
  transition: box-shadow 0.2s ease-in-out;
  cursor: pointer;

  .text-hovered{
    color: #333;
  }
}

:is(.dsm){
  --box-shadow-color: rgb(var(--dsm-color-rgba));
  .border{
    --border-color: var(--dsm-color);
  }
  .text-hovered{
    color: var(--dsm-color);
  }
  .img::before{
    content: url('img/dsm.png');
  }
} 


:is(.drive){
  --box-shadow-color: rgb(var(--drive-color-rgba));
  .border{
    --border-color: var(--drive-color);
  }
  .text-hovered{
    color: var(--drive-color);
  }
  .img::before{
    content: url('img/drive.png');
  }
}


:is(.photo){
  --box-shadow-color: rgb(var(--photo-color-rgba));
  .border{
    --border-color: var(--photo-color);
  }
  .text-hovered{
    color: var(--photo-color);
  }
  .img::before{
    content: url('img/photos.png');
  }
}

:is(.file){
  --box-shadow-color: rgb(var(--file-color-rgba));
  .border{
    --border-color: var(--file-color);
  }
  .text-hovered{
    color: var(--file-color);
  }
  .img::before{
    content: url('img/file.png');
  }
}

:is(.plex){
  --box-shadow-color: rgb(var(--plex-color-rgba));
  .border{
    --border-color: var(--plex-color);
  }
  .text-hovered{
    color: var(--plex-color);
  }
  .img::before{
    content: url('img/plex.png');
  }
}

.border{
  position: absolute;
  background-color: var(--border-color);
  transition: transform var(--border-animation-duration) linear;

  &.top,
  &.bottom{
    width: 100%;
    height: var(--border-width);
  }

  &.left,
  &.right{
    width: var(--border-width);
    height: 100%;
  }

  &.top{
    top: 0;
    left: 0;
    transition-delay: var(--border-animation-duration)*3;
    transform-origin: top left;
  }

  &.right{
    top: 0;
    right: 0;
    transition-delay: var(--border-animation-duration)*2;
    transform-origin: top left;
  }

  &.bottom{
    bottom: 0;
    right: 0;
    transition-delay: var(--border-animation-duration);
    transform-origin: top right;
  }

  &.left{
    top: 0;
    left: 0;
    transform-origin: bottom left;
  }
}
  

@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}
@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}