body{
  background-image: url("../../content/images/photo-1535418126925-0bfb3a0ee0d7.jpeg");
  background-color: black;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 100vw;
  height: 20vw;
  transition: flex 0.3s ease, height 0.3s ease;
}

.box {
  flex: 1;
  border: 0.5px solid black;
  padding: 20px;
  transition: flex 0.3s ease, height 0.3s ease;
  align-items: center;
  justify-content: center;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: black;
  text-align: center;
  display: flex;
  background-color: white;
}

.box:hover{
  flex: 0 0 40vw;
  animation: randomBorder 1s infinite alternate;
  background-color: transparent;
  color: white;
}

.container:hover{
  height: 40vh;
}

@keyframes randomBorder {
  0% {
    border-top: 10px solid lime;
    border-right: 30px dashed cyan;
    border-bottom: 45px dotted yellow;
    border-left: 60px double magenta;
  }
  10% {
    border-top: 20px dotted orange;
    border-right: 50px solid fuchsia;
    border-bottom: 55px dashed aqua;
    border-left: 70px groove pink;
  }
  20% {
    border-top: 30px double chartreuse;
    border-right: 65px inset red;
    border-bottom: 70px outset blue;
    border-left: 85px ridge turquoise;
  }
  30% {
    border-top: 45px groove violet;
    border-right: 75px ridge yellow;
    border-bottom: 80px solid limegreen;
    border-left: 95px dashed coral;
  }
  40% {
    border-top: 60px outset orange;
    border-right: 85px dotted green;
    border-bottom: 90px inset hotpink;
    border-left: 100px double indigo;
  }
  50% {
    border-top: 75px dashed gold;
    border-right: 100px solid brightblue;
    border-bottom: 85px ridge purple;
    border-left: 50px groove crimson;
  }
  60% {
    border-top: 90px inset lime;
    border-right: 65px outset magenta;
    border-bottom: 75px double teal;
    border-left: 30px solid yellow;
  }
  70% {
    border-top: 100px ridge red;
    border-right: 40px dashed pink;
    border-bottom: 55px dotted turquoise;
    border-left: 20px inset chartreuse;
  }
  80% {
    border-top: 85px solid brightgreen;
    border-right: 30px double violet;
    border-bottom: 40px groove orange;
    border-left: 75px dashed skyblue;
  }
  90% {
    border-top: 50px outset limegreen;
    border-right: 45px ridge peach;
    border-bottom: 30px solid lavender;
    border-left: 90px dotted magenta;
  }
  100% {
    border-top: 9px double cyan;
    border-right: 70px dashed green;
    border-bottom: 50px inset coral;
    border-left: 100px ridge lemon;
  }
}