* {
    box-sizing: border-box;
  }
  
  html{
    background-color: #F0C4B9;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    padding:1vw;
  }
  
  h1{
    color:rgb(0, 0, 0);
    margin:30px auto;
    width:50%;
    text-align:center;
    padding:20px;
    text-transform:uppercase;
    font-size:3vw;
    letter-spacing:5px;
    border-top:1px solid;
    border-bottom:1px solid;
  }
  
  .contentBox{
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  
  .buttonBox{
    margin: 0 20px 40px;
    position:relative;
    max-width: 200px;
    min-width: 150px;
    flex: 20%;
  }
  
  button{
    width:100%;
    height:80px;
    position:relative;
    background:rgba(255, 255, 255, .27);
    text-transform:uppercase;
    color:rgb(8, 8, 8);
    font-weight:700;
    letter-spacing:1px;
    border:none;
    font-size:15px;
    outline:none;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    cursor: pointer;
  }
  
  
  /* FIRST BUTTON */
  
  .border{
      position:absolute;
      background:none;
      transition:all .5s ease-in-out;
  }
  
  #first>.border:nth-of-type(1){
    top:0;
    left:0;
    border-left:1px solid rgb(12, 12, 12);
    border-top:1px solid rgb(14, 13, 13);
    width:30px;
    height:30px;
  }
  
  #first>.border:nth-of-type(2){
    bottom:0;
    right:0;
    border-right:1px solid rgb(10, 10, 10);
    border-bottom:1px solid rgb(12, 12, 12);
    width:30px;
    height:30px;
  }
  
  #first:hover .border{
    width:102%;
    height:105%;
  }
  
  
  /* SECOND BUTTON */
  
  
  #second>.border:nth-of-type(1){
    top:0;
    left:50%;
    width:0;
    border-top:1px solid rgb(8, 8, 8);
    transition:width .5s ease-in-out, transform 1s ease-in-out;
  }
  
  #second>.border:nth-of-type(2){
    bottom:0;
    left:50%;
    width:0;
    border-bottom:1px solid rgb(7, 7, 7);
    transition:width .5s ease-in-out, transform 1s ease-in-out;
  }
  
  #second:hover .border{
    transform:translate(-50%, 0);
    width:100%;
    transition:width .8s ease-in-out, transform .3s ease-in-out;
  }
  
  /* THIRD BUTTON */
  
  #third>.border:nth-of-type(1){
    top:0;
    left:0;
    border-top:1px solid rgb(10, 10, 10);
    width:100%;
    height:100%;
  }
  
  #third>.border:nth-of-type(2){
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    border-bottom:1px solid rgb(12, 12, 12);
  }
  
  #third>.border:nth-of-type(3){
    left:0;
    top:0;
    height:100%;
    width:100%;
    border-left:1px solid rgb(12, 12, 12);
  }
  
  #third>.border:nth-of-type(4){
    top:0;
    right:0;
    height:100%;
    width:100%;
    border-right:1px solid rgb(12, 12, 12);
  }
  
  #third:hover .border:nth-of-type(1){
    transform:translate(0, 99%);
  }
  
  #third:hover .border:nth-of-type(2){
    transform:translate(0, -99%);
  }
  
  #third:hover .border:nth-of-type(3){
    transform:translate(99%, 0);
  }
  
  #third:hover .border:nth-of-type(4){
    transform:translate(-99%, 0);
  }
  
  /* FOURTH BUTTON */
  
  #fourth>.border:nth-of-type(1){
    top:0;
    left:0;
    width:0;
    height:0;
    border-top:1px solid rgb(8, 8, 8);
  }
  
  #fourth>.border:nth-of-type(2){
    top:0;
    right:0;
    width:10px;
    height:0;
    border-right:1px solid rgb(8, 8, 8);
  }
  
  #fourth>.border:nth-of-type(3){
    bottom:0;
    right:0;
    width:0;
    height:0;
    border-bottom:1px solid rgb(8, 8, 8);
  }
  
  #fourth>.border:nth-of-type(4){
    bottom:0;
    left:0;
    width:0;
    height:0;
    border-left:1px solid rgb(10, 10, 10);
  }
  
  #fourth:hover .border:nth-of-type(1){
    width:100%;
  }
  
  #fourth:hover .border:nth-of-type(2){
    height:80px;
  }
  
  #fourth:hover .border:nth-of-type(3){
    width:100%;
  }
  
  #fourth:hover .border:nth-of-type(4){
    height:80px;
  }
  
  
  /* FIFTH BUTTON */
  
  #fifth{
    overflow:hidden;
    border: 1px solid rgba(255, 255, 255, 0);
    transition:all .2s ease-in-out;
  }
  
  #fifth:before{
    content:" ";
    display:block;
    width:200px;
    height:80px;
    background:rgba(255, 255, 255, .4);
    position:absolute;
    top:-10px;
    left:-200px;
    transform:rotate(-45deg);
    transition:all .2s ease-in-out;  
  }
  
  #fifth:hover:before{
    margin-left:300%;
  }
  
  #fifth:hover {
    border: 1px solid rgba(255, 255, 255, 1);
  }
  
  
  /* SIXTH BUTTON */
  
  #sixth{
    overflow:hidden;
  }
  
  #sixth>button{
    z-index:1;
    transition:color .5s ease;
  }
  
  #sixth .border{
    z-index:0;
    background:white;
    width:30px;
    height:30px;
    transform:rotate(45deg);
  }
  
  #sixth>.border:nth-of-type(1){
    top:-35px;
    left:-30px; 
  }
  
  #sixth>.border:nth-of-type(2){
    top:-35px;
    right:-30px;
  }
  
  #sixth>.border:nth-of-type(3){
    bottom:-35px;
    left:-30px;
  }
  
  #sixth>.border:nth-of-type(4){
    bottom:-35px;
    right:-30px;
  }
  
  #sixth:hover .border{
    transform:scale(15.7) rotate(45deg);
  }
  
  #sixth:hover button{
    color:#ff9292;
    transition:color 2s ease;
  }
  
  
  /* SEVENTH BUTTON */
  
  #seventh>button{
    border:1px solid rgba(255, 255, 255, 0);
    transition:all .5s ease-in-out;
  }
  
  #seventh:hover button{
    border:1px solid white;
    font-size:20px;
  }
  
  
  /* EIGHTH BUTTON */
  
  #eighth>button{
    transition: all .18s ease-in-out;
  }
  
  #eighth:hover button{
    text-shadow:
      0 0 30px rgba(255,255,255, 1),
      0 0 60px rgba(255, 255, 255, .8),
      0 0 75px rgba(255, 255, 255, .6),
      0 0 80px rgba(255, 255, 255, .4),
      0 0 77px rgba(255, 255, 255, .5),
      0 0 78px rgba(255, 255, 255, .4),
      0 0 79px rgba(255, 255, 255, .3),
      0 0 80px rgba(255, 255, 255, .2),
      0 0 120px rgba(255, 255, 255, .1);
  }
  
  
  /* NINTH HOVER */
  
  #ninth>button{
    transition:all .5s ease-in-out;
  }
  
  #ninth:hover button{
    background:white;
    color:#ff9292;
  }
  
  
  /* TENTH BUTTON */
  
  #tenth>button{
    letter-spacing:0;
  }
  
  #tenth span{
    letter-spacing:0;
    display:inline-block;
    position:relative;
    width:8px;
    transition:all .5s ease-in-out;
  }
  
  #tenth span:nth-of-type(4){
    width:5px;
  }
  
  #tenth span:nth-of-type(6){
    width:1px;
  }
  
  #tenth span:nth-of-type(8){
    width:4px;
  }
  
  #tenth:hover span:nth-of-type(1){
    animation:h .5s;
  }
  
  #tenth:hover span:nth-of-type(2){
    animation:o .5s;
  }
  
  #tenth:hover span:nth-of-type(3){
    animation:v .5s;
  }
  
  #tenth:hover span:nth-of-type(4){
    animation:e .5s;
  }
  
  #tenth:hover span:nth-of-type(5){
    animation:r .5s;
  }
  
  #tenth:hover span:nth-of-type(7){
    animation:t .5s;
  }
  
  #tenth:hover span:nth-of-type(8){
    animation:e .5s;
  }
  
  #tenth:hover span:nth-of-type(9){
    animation:n .5s;
  }
  
  @keyframes h{
    0%{transform:translate(0, 0);}
    50%{transform:translate(50px, 5px);}
    75%{transform:translate(5px, 5px);}
    80%{transform:translate(0, 0);}
    100%{transform:translate(0, 0);}
  }
  
  @keyframes o{
    0%{transform:translate(0, 0);}
    25%{transform:translate(-4px, 0);}
    50%{transform:translate(3px, 4px);}
    80%{transform:translate(0, 0);}
    100%{transform:translate(0, 0);}
  }
  
  @keyframes v{
    0%{transform:translate(0, 0);}
    20%{transform:rotate(360deg);}
    50%{transform:scale(2);}
    80%{transform:translate(0, 0);}
    100%{transform:translate(0, 0);}
  }
  
  @keyframes e{
    0%{transform:translate(0, 0);}
    20%{transform:translate(-10px, -2px);}
    80%{transform:translate(0, 0);}
    100%{transform:translate(0, 0);}
  }
  
  @keyframes r{
    0%{transform:translate(0, 0);}
    20%{transform:translate(0, 10px);}
    80%{transform:translate(0, 32px);}
    100%{transform:translate(0, 0);}
  }
  
  @keyframes t{
    0%{transform:translate(0, 0);}
    20%{transform:translate(0, -10px);}
    40%{transform:translate(0, 0);}
    60%{transform:translate(0, -10px);}
    80%{transform:translate(0, 0);}
    100%{transform:translate(0, 0);}
  }
  
  @keyframes n{
    0%{transform:translate(0, 0);}
    50%{transform:skewY(50deg);}
    80%{transform:translate(0, 0);}
    100%{transform:translate(0, 0);}
  }
  
  
  @media(max-width: 1200px) {
    #content-box {
      width: 100%; 
    }
  }