@import url('https://fonts.googleapis.com/css2?family=AR+One+Sans:wght@500&family=Instrument+Serif&family=Mohave&family=Poppins:wght@300;400;600&family=Roboto:wght@900&family=Ubuntu:ital,wght@0,300;0,400;0,500;1,500&display=swap');

* {
    margin: 0em;
    padding: 0em;
    box-sizing: border-box;
    font-family: 'AR One Sans', sans-serif;
}

body {
    background-color: rgb(14, 13, 13);
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
.box {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    height: auto;
    color: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #292727;
    padding: 2em;
    width: 90%;
    max-width: 400px;
    margin-left: 2.3em;
}

.box img {
    width:38%;
}

.box img:hover {
    transform: scale(1.1);
    transition: all 0.5 ease-in-out;
}

.link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}
 .clr{
    color: yellow;
 }
.rec {
    width: 100%;
    max-width: 300px;
    margin-top: 1em;
    padding: 0.5em 4em;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: rgba(149, 157, 165, 0.2);
    cursor: pointer;
    border: 2px solid #3498db;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    font-weight: bold;
}
  .link a{
     text-decoration: none;
     width: 100%;
    max-width: 300px;
  }
.rec:hover {
    background-color: #063396;
    transition: all 0.5s ease-in-out;
    border: 2px solid #e6ebee;
    color: rgb(155, 231, 14);
    border-radius: 15px;
}

@media only screen and (max-width: 600px) {
    .box {
        width: 80%;
    }
}

@media only screen and (max-width: 400px) {
    .rec {
        max-width: 200px;
    }
}


@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;
  }
  
  :root {
      --d: 2500ms;
      --angle: 90deg;
      --gradX: 100%;
      --gradY: 50%;
      --c1: rgb(41 181 126);
      --c2: rgba(168, 239, 255, 0.1);
  }
  
 
  
  .box {
     
      border: 0.35rem solid;
      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 infinite forwards;
  }
  
  .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 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%;
      }
  }