@import url("https://fonts.googleapis.com/css?family=Raleway:400");

* {
  box-sizing: border-box;
}


@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}



p {
  margin: 0;
}

:root {
  --d: 1500ms;
  --d2: 900ms;
  
  --angle: 90deg;
  --gradX: 100%;
  --gradY: 50%;
  --gradY2: 90%;
  --c1: #f08336;
  --c2: rgba(168, 239, 255, 0);
  --c3: rgba(168, 239, 255, 0);
}

.wrapper {
  min-width: min(40rem, 100%);
}

.box {
  font-size: 3vw;
 margin: 10px;
  border: 5px solid;
  padding: 1vw!important;
  border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
  animation: borderRotate var(--d) linear 3  forwards;
}

.box:nth-child(1):hover{
    animation: borderRotate var(--d2) linear infinite forwards;
    
}
.titulo{

  
  padding: 0px;
}
.box2 {
  font-size: 3vw;
 margin: 10px;
  border: 5px solid;
  padding: 3vw;
  border-image: conic-gradient(from var(--angle), var(--c3), var(--c1) 0.1turn, var(--c1) 0.0turn, var(--c3) 0.25turn) 30;
  animation: borderRotate var(--d2) linear 2  ;
}

.box:nth-child(2) {
  border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
  animation: borderRadial var(--d) linear 3 forwards;
}
.box:nth-child(2):hover{
    animation: borderRadial var(--d2) linear infinite forwards;
}

@keyframes borderRotate {
  100% {
    --angle: 420deg;
  }
}

@keyframes borderRadial {
  20% {
    --gradX: 100%;
    --gradY: 50%;
  }
  40% {
    --gradX: 100%;
    --gradY: 100%;
  }
  60% {
    --gradX: 50%;
    --gradY: 100%;
  }
  80% {
    --gradX: 0%;
    --gradY: 50%;
  }
  100% {
    --gradX: 50%;
    --gradY: 0%;
  }
}