{
    width: 100vw;
    height: 100vh;
   
    margin: 0;
    padding: 0;

    cursor: url(https://cdn.custom-cursor.com/db/11203/32/halloween-jack-o-lantern-pointer.png), pointer;
}

.glitch {
    position:relative;
    height:100vh;
    background-image:url('https://img.freepik.com/free-vector/happy-halloween-background-theme_52683-44522.jpg');
    background-size: cover;
    background-repeat: no-repeat;
  }
  .glitch:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-image:url('https://img.freepik.com/free-vector/happy-halloween-background-theme_52683-44522.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 7px 0;
    opacity: 0.6;
    z-index: 2;
  }
  .glitch:hover:before{
    animation: animate .5s infinite;
  }
  .glitch>p {
    font-size:10rem;
    color:#fff;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%);
    font-family: 'Kirang Haerang', cursive;
  }
  @keyframes animate{
    0% {
      background-position: 0 0;
      filter: hue-rotate(0deg);
    }
    10% {
      background-position: 4px 0;
    }
    20% {
      background-position: -4px 0;
    }
    30% {
      background-position: 12px 0;
    }
    40% {
      background-position: -16px 0;
    }
    50% {
      background-position: -24px 0;
    }
    50% {
      background-position: -52px 0;
    }
    60% {
      background-position: 0 22px;
    }
    70% {
      background-position: -40px -10px;
    }
     80% {
      background-position: -24px 0;
    }
      90% {
      background-position: -24px 0;
    }
     100% {
      background-position:  0 0;
       filter: hue-rotate(360deg);
    }
  }

.ryan {
    border-radius: 10px;

    cursor: pointer;

    transition: 0.5s;
    z-index: 4;
}

.ryan:hover {
    border: 0.5rem solid transparent;
    border-image:
        conic-gradient(from var(--angle),
            #d53e33 0deg 90deg,
            #fbb300 90deg 180deg,
            #377af5 180deg 270deg,
            #399953 270deg 360deg) 1;
    animation: rotate 6s infinite linear;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotate {
    to {
        --angle: 360deg;
    }
}

.ryan:hover {

    transform: translate(80px, 80px);
}

.ryan:last-child:hover {

    transform: translate(80px, 80px);
    
}

dt {
    font-size: large;
    font-weight: bold;
}

h1 {
    z-index: 4;
}

h2 {
    margin-bottom: 0.0em;
}

h3 {
    margin-top: 0.7em;
}

.table {
    margin-bottom: 0.7em;
    margin-top: 0.5em;
}

.margin-top-Xem {
    margin-top: 0.7em;
}

.title-word {
    animation: color-animation 4s linear infinite;
}

.title-word-1 {
    --color-1: #DF8453;
    --color-2: #3D8DAE;
    --color-3: #E4A9A8;
}

.title-word-2 {
    --color-1: #DBAD4A;
    --color-2: #ACCFCB;
    --color-3: #17494D;
}

.title-word-3 {
    --color-1: #ACCFCB;
    --color-2: #E4A9A8;
    --color-3: #ACCFCB;
}

.title-word-4 {
    --color-1: #3D8DAE;
    --color-2: #DF8453;
    --color-3: #E4A9A8;
}

@keyframes color-animation {
    0%    {color: var(--color-1)}
    32%   {color: var(--color-1)}
    33%   {color: var(--color-2)}
    65%   {color: var(--color-2)}
    66%   {color: var(--color-3)}
    99%   {color: var(--color-3)}
    100%  {color: var(--color-1)}
}

/* Here are just some visual styles. 🖌 */

.container {
    display: grid;
    place-items: center;
    text-align: center;
    height: 100vh
}

.title {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 1.5vw;
    text-transform: uppercase;
}