* {
    box-sizing: border-box;
}

@font-face {
    font-family: Inter;
    src: url(/fonts/Inter.ttf);
}

:root {
    --darkest: #312d58;
    --dark: #5e3b74;
    --medium: #f17499;
    --medium-transparent: #f1749920;
    --light: #f5f0c6;
    --lightest: #ffffff;
}

body {
    background: var(--darkest);
    font-size: 17px;
    font-family: MS PGothic, Inter;
    color: var(--darkest);
    text-align: center;
}

@font-face {
    font-family: Lexend;
    src: url(/fonts/lexend.ttf);
}

h1 {
    font-family: Lexend;
    color: var(--dark);
}

.main {
    width: 100%; 
    display: flex;
    align-items: center;
    justify-content: center;
}


p, h1, h2, h3, h4, h5, h6 {
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    width: fit-content;
}

p {
    font-family: MS PGothic, Inter;
    width: 100%;
}

h2, h3, h4, h5, h6, button {
    font-family: Lexend;
}

h1, h2, h3, h4, h5, h6 {
color: var(--dark);
}

h2 {
    font-size: 20px;
}

.voicebanks {
    display: flex; 
    width: 100%;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.bio img {
    max-width: 400px;
    margin: auto;
    display: block;
    filter: drop-shadow(5px 5px 0 var(--medium));
    animation: 1.25s ease slideInImg, 1.25s ease fadeInAnimationImg;
}

ul {
    margin-top:5px;
    margin-bottom:5px;
    font-family: MS PGothic, Inter;
    width: 100%;
}

.icon {
    border-radius: 15px;
    width: 250px;
    transition: 0.3s ease;
}

.icon:hover {
    transform-origin: 50% 0;
    transform: rotate(-2.5deg);
    transition: 0.3s ease;
        filter: drop-shadow(0 0 10px var(--medium)) drop-shadow(0 0 10px var(--lightest));

}

.voicebank-link {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.bio {
    display: flex;
    gap: 15px;
    flex-direction: row;
    align-items: center;
    animation: 1.25s ease slideInImg, 1.25s ease fadeInAnimationImg;
    }

@keyframes slideInImg {
    0% {
        transform: translateX(-65%);
      }
    20% {
      transform: translateX(-65%);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes fadeInAnimationImg {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


h2, h3, h4, h5, h6 {
    color: var(--lightest);
    padding: 10px;
    background: var(--medium);
    border-radius: 15px;
    text-align: center;
}

.video-container {
    background: var(--medium);
    padding: 10px;
    border-radius: 15px;
}

.float img {
    float: left;
}

.description {
    background: var(--medium);
    color: var(--lightest);
    width: 400px;
    padding: 10px;
    background: linear-gradient(
        225deg,
        hsl(342deg 82% 70%) 0%,
        hsl(341deg 76% 68%) 12%,
        hsl(339deg 70% 67%) 18%,
        hsl(337deg 65% 65%) 22%,
        hsl(336deg 60% 63%) 26%,
        hsl(334deg 56% 61%) 29%,
        hsl(332deg 52% 60%) 33%,
        hsl(330deg 48% 58%) 36%,
        hsl(328deg 45% 56%) 39%,
        hsl(326deg 41% 55%) 42%,
        hsl(324deg 38% 53%) 44%,
        hsl(322deg 36% 51%) 47%,
        hsl(319deg 33% 50%) 50%,
        hsl(317deg 33% 48%) 53%,
        hsl(314deg 32% 46%) 56%,
        hsl(311deg 32% 45%) 58%,
        hsl(308deg 31% 43%) 61%,
        hsl(305deg 30% 41%) 64%,
        hsl(301deg 30% 40%) 67%,
        hsl(297deg 30% 39%) 71%,
        hsl(293deg 30% 38%) 74%,
        hsl(289deg 31% 37%) 78%,
        hsl(285deg 32% 36%) 82%,
        hsl(281deg 32% 35%) 88%,
        hsl(277deg 33% 34%) 100%
      );
      border-radius: 15px;
      height: fit-content;

}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 900px;
    gap: 15px;
    border: 3px solid var(--medium);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 5px 5px 10px var(--dark);
    margin: auto;
    background: repeating-linear-gradient( -45deg, var(--medium-transparent), var(--medium-transparent) 1px, #e5e5f700 1px, #e5e5f700 5px), linear-gradient(
        135deg,
        hsl(54deg 70% 87%) 0%,
        hsl(54deg 70% 87%) 12%,
        hsl(53deg 71% 88%) 18%,
        hsl(53deg 71% 89%) 22%,
        hsl(53deg 71% 89%) 26%,
        hsl(53deg 71% 90%) 29%,
        hsl(53deg 71% 90%) 33%,
        hsl(53deg 72% 91%) 36%,
        hsl(53deg 72% 91%) 39%,
        hsl(53deg 72% 92%) 42%,
        hsl(53deg 72% 92%) 44%,
        hsl(53deg 73% 93%) 47%,
        hsl(52deg 73% 94%) 50%,
        hsl(52deg 73% 94%) 53%,
        hsl(52deg 73% 95%) 56%,
        hsl(52deg 73% 95%) 58%,
        hsl(52deg 74% 96%) 61%,
        hsl(52deg 74% 96%) 64%,
        hsl(52deg 74% 97%) 67%,
        hsl(52deg 74% 97%) 71%,
        hsl(52deg 75% 98%) 74%,
        hsl(52deg 75% 98%) 78%,
        hsl(51deg 75% 99%) 82%,
        hsl(51deg 75% 99%) 88%,
        hsl(0deg 0% 100%) 100%
      );
}

button {
    width: 165px;
    height: 50px;
    font-size: 20px;
    color: var(--dark);
    border-radius: 15px;
    font-weight: bold;
    border: 3px var(--dark) solid;
}

button:hover {
    cursor: pointer;
}

  .liquid {
    background: linear-gradient(var(--medium) 0 0) no-repeat calc(200% - var(--p, 0%))
      100% / 200% var(--p, 0.2em);
    transition: 0.3s var(--t, 0s) ease,
      background-position 0.3s calc(0.3s - var(--t, 0s));
      
  }
  
  .liquid:hover {
    --p: 100%;
    --t: 0.3s;
    color: var(--lightest);
    border: 3px var(--medium) solid;
  }  

.active {
    background: var(--medium);
    color: var(--lightest);
    border: 3px var(--medium) solid;
}

.header {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    margin: auto;
}

.primary {
    display: flex;
    flex-direction: column;
    gap: 6.5px;
    margin: auto;
}

.list-container {
    width: fit-content;
    margin: auto;
}
.tilty {
    text-align: center;
    margin-right: 10px;
    font-size:1.5em;
    animation: tilt 1s infinite alternate;
    filter: drop-shadow(1px 1px var(--light)) drop-shadow(-1px 1px var(--light)) drop-shadow(1px -1px var(--light)) drop-shadow(-1px -1px var(--light))
    drop-shadow(1px 1px var(--medium)) drop-shadow(-1px 1px var(--medium)) drop-shadow(1px -1px var(--medium)) drop-shadow(-1px -1px var(--medium));
    }

    
    @keyframes tilt {
    from { transform: rotate(2deg); }
    to { transform: rotate(-2deg); }
    }
    
    
    @-webkit-keyframes tilt {
    from { transform: rotate(2deg); }
    to { transform: rotate(-2deg); }
    }
    

::selection {
    background: var(--darkest);
    color: var(--lightest)
}

.description a {
    position: relative;
    color: var(--lightest);
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s ease;
  }
  
.description a:hover {
    color: var(--lightest);
    transition: 0.3s ease;
    text-shadow: 0 0 5.5px var(--medium);
  }
  
  .description a::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1.5px;
    bottom: 0;
    left: 0;
    background-color: var(--lightest);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  
  .description a:hover::before {
    transform: scaleX(1);
  }
  
  p a, ul a {
    position: relative;
    color: var(--darkest);
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s ease;
  }
  
p a:hover, ul a:hover {
    color: var(--darkest);
    text-shadow: 0 0 5.5px var(--medium);
    transition: 0.3s ease;
  }
  
  p a::before, ul a::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 1.5px;
    bottom: 0;
    left: 0;
    background-color: var(--darkest);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  
  p a:hover::before, ul a:hover::before {
    transform: scaleX(1);
  }
  
span.drive {
    color: var(--medium);
}