* {
    box-sizing: border-box;
}


:root {
    --darkest: #312d58;
    --dark: #5e3b74;
    --medium: #f17499;
    --medium-transparent: #f1749920;
    --light: #ffbb94;
    --lightest: #f5f0c6;
    --verthandi: #a4e3f1;
    --meri: #bca6ec;
    --vira: #d492f0;
    --raku: #f87b7b;
    --kamia: #c3f5e3;
    --aia: #5AD3E1;
    --kazuha: #ff685b;
    --yell: #ffd326;
    --tear: #40ffc0;
}

@font-face {
    font-family: Pretendard JP;
    src: url(/fonts/pretendard-jp.ttf);
}

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

body {
    background: linear-gradient(
    140deg,
    hsl(0deg 0% 100%) 0%,
    hsl(51deg 75% 99%) 4%,
    hsl(52deg 75% 98%) 8%,
    hsl(52deg 74% 97%) 13%,
    hsl(52deg 74% 96%) 17%,
    hsl(52deg 73% 95%) 21%,
    hsl(52deg 73% 94%) 25%,
    hsl(53deg 72% 92%) 29%,
    hsl(53deg 72% 91%) 33%,
    hsl(53deg 71% 90%) 37%,
    hsl(53deg 71% 89%) 42%,
    hsl(53deg 71% 88%) 46%,
    hsl(54deg 70% 87%) 50%,
    hsl(50deg 73% 86%) 54%,
    hsl(46deg 76% 85%) 58%,
    hsl(43deg 79% 84%) 63%,
    hsl(40deg 82% 83%) 67%,
    hsl(38deg 85% 82%) 71%,
    hsl(35deg 87% 82%) 75%,
    hsl(33deg 90% 81%) 79%,
    hsl(31deg 92% 80%) 83%,
    hsl(28deg 94% 80%) 87%,
    hsl(26deg 96% 80%) 92%,
    hsl(24deg 98% 79%) 96%,
    hsl(22deg 100% 79%) 100%
  );
    margin: 0;
    background-size: cover;
    font-family: Pretendard JP;
    font-size: 20px;
    color: var(--darkest);
}

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

div.header, div.footer {
    background: var(--darkest);
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    color: var(--lightest);
}

div.header button,div.footer button  {
    font-family: Outfit;
    font-size: 34px;
    font-weight: bolder;
    border: none;
    background: none;
    color: var(--lightest);
    cursor: pointer;
    transition: 0.15s ease;
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.header button a, div.footer button a {
    text-decoration: none;
    color: var(--lightest);
}

div.header button a:hover, div.footer button a:hover {
    transition: 0.15s ease;
}

div.header button:hover, div.footer button:hover {
    transform: scale(1.075);
}

.fa-heart {
    transform: rotate(-180deg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: Outfit;
    font-weight: bolder;
    margin-top: 2.5px;
 margin-bottom: 2.5px;
}

p {
    margin-top: 2.5px;
    margin-bottom: 2.5px;
}

div.content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

div.content-index {
    width: 100%;
    height: 750px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    text-align: center;
}

img.index {
    width: 800px;
}
img.index:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(0.25px, 0.25px) rotate(0deg); }
  10% { transform: translate(-0.25px, -0.5px) rotate(-0.25deg); }
  20% { transform: translate(-0.75px, 0px) rotate(0.25deg); }
  30% { transform: translate(0.75px, 0.5px) rotate(0deg); }
  40% { transform: translate(0.25px, -0.25px) rotate(0.25deg); }
  50% { transform: translate(-0.25px, 0.5px) rotate(-0.25deg); }
  60% { transform: translate(-0.75px, 0.25px) rotate(0deg); }
  70% { transform: translate(0.75px, 0.25px) rotate(-0.25deg); }
  80% { transform: translate(-0.25px, -0.25px) rotate(0.25deg); }
  90% { transform: translate(0.25px, 0.5px) rotate(0deg); }
  100% { transform: translate(0.25px, -0.5px) rotate(-0.25deg); }
}

.character {
    margin: auto;
    width: 1800px;
    background: var(--darkest);
    border: 9px double white;
    border-radius: 15px;
    display: grid;
    background: linear-gradient(
    180deg,
    hsl(246deg 32% 26%) 0%,
    hsl(247deg 32% 26%) 4%,
    hsl(248deg 32% 27%) 8%,
    hsl(250deg 32% 27%) 13%,
    hsl(251deg 32% 28%) 17%,
    hsl(252deg 32% 28%) 21%,
    hsl(254deg 32% 28%) 25%,
    hsl(255deg 32% 29%) 29%,
    hsl(256deg 32% 29%) 33%,
    hsl(258deg 32% 29%) 37%,
    hsl(259deg 32% 30%) 42%,
    hsl(260deg 32% 30%) 46%,
    hsl(262deg 32% 30%) 50%,
    hsl(263deg 32% 31%) 54%,
    hsl(264deg 33% 31%) 58%,
    hsl(265deg 33% 31%) 63%,
    hsl(267deg 33% 32%) 67%,
    hsl(268deg 33% 32%) 71%,
    hsl(269deg 33% 32%) 75%,
    hsl(270deg 33% 33%) 79%,
    hsl(272deg 33% 33%) 83%,
    hsl(273deg 33% 33%) 87%,
    hsl(274deg 33% 34%) 92%,
    hsl(276deg 33% 34%) 96%,
    hsl(277deg 33% 34%) 100%
  );
}

.name {
    width: 100%;
    background: white;
    padding: 20px;
}

.character-content {
    width: 100%;
    padding: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    gap: 50px;
    height: 1100px;
    animation: 0.75s ease fadeInAnimation;
      background-attachment: fixed;
    background-size: cover;
}

.character-img img {
    width: 1050px;
    position: relative;
     z-index: -1;
      right: -40px;
}

.character-img {
    height: 100%;
}

.character-sect {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.character-sect h1 {
    border: 3px solid var(--light);
    width: fit-content;
    padding: 10px;
    background: var(--darkest);
    border-radius: 15px;
}

.character-info {
    height: fit-content;
    color: var(--darkest);
    background-color: white;
opacity: 1;
 z-index: 1;
 position: relative;
 right: 200px;
background-image: radial-gradient(var(--light) 1.35px, white 1.35px);
background-size: 27px 27px;
    width: 1000px;
    padding: 20px;
    flex-shrink: 0;
    border-radius: 15px;
    border: black solid 3px;
    display: flex;
    flex-direction: column;
    gap: 10px;
        justify-content: center;
    align-items: center;
}

.character-info p {
    width: 100%;
    font-size: 20px;
}

.tab {
    width: 1800px;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: auto;
}

.tab button {
    border-radius: 15px;
    border: none;
    padding: 10px;
    background: var(--darkest);
    cursor: pointer;
    height: fit-content;
    width: fit-content;
    transition: 0.15s ease;
}

.tab button:hover {
    background: var(--dark);
    transition: 0.15s ease;
    transform: scale(1.075);
}

.tab button img {
    border-radius: 10px;
    vertical-align: middle;
}

.tab button.active {
    background: var(--dark);
}

.tabcontent {
    display: none;
}

.img-verthandi {
    filter: drop-shadow(2px 2px 0 var(--verthandi)) drop-shadow(2px -2px 0 var(--verthandi)) drop-shadow(-2px 2px 0 var(--verthandi)) drop-shadow(-2px -2px 0 var(--verthandi));
}

.name-verthandi {
    filter: drop-shadow(1px 1px 0 var(--verthandi)) drop-shadow(1px -1px 0 var(--verthandi)) drop-shadow(-1px 1px 0 var(--verthandi)) drop-shadow(-1px -1px 0 var(--verthandi));
}

.sect-verthandi h1 {
    color: var(--verthandi);
    border-color: var(--verthandi);
}

.sect-verthandi h1 .fa-solid, .sect-verthandi h1 .fa-regular {
    color: var(--verthandi);
    margin-right: 10px;
}

.sect-verthandi p .fa-solid, .sect-verthandi p .fa-regular {
    margin-right: 5px;
    filter: drop-shadow(1px 1px 0 var(--verthandi)) drop-shadow(1px -1px 0 var(--verthandi)) drop-shadow(-1px 1px 0 var(--verthandi)) drop-shadow(-1px -1px 0 var(--verthandi));
}

.info-verthandi {
    background-image: radial-gradient(var(--verthandi) 1.35px, white 1.35px);
}

.sect-verthandi a {
    font-weight: bolder;

    color: var(--darkest);
    transition: 0.15s ease;
}

 .sect-verthandi a:hover {
    filter: drop-shadow(1px 1px 0 var(--verthandi)) drop-shadow(1px -1px 0 var(--verthandi)) drop-shadow(-1px 1px 0 var(--verthandi)) drop-shadow(-1px -1px 0 var(--verthandi));
    transition: 0.15s ease;
 }

  .sect-verthandi p b {
    background: var(--verthandi);
 }

 .sect-verthandi p::selection, .sect-verthandi p i::selection, .sect-verthandi p a::selection,.sect-verthandi h1::selection  {
    background: var(--verthandi);
    color: var(--darkest);
 }

 .sect-verthandi p b::selection {
        color: var(--verthandi);
    background: var(--darkest);
 }
 
 .img-meri {
    filter: drop-shadow(2px 2px 0 var(--meri)) drop-shadow(2px -2px 0 var(--meri)) drop-shadow(-2px 2px 0 var(--meri)) drop-shadow(-2px -2px 0 var(--meri));
}

.name-meri {
    filter: drop-shadow(1px 1px 0 var(--meri)) drop-shadow(1px -1px 0 var(--meri)) drop-shadow(-1px 1px 0 var(--meri)) drop-shadow(-1px -1px 0 var(--meri));
}

.sect-meri h1 {
    color: var(--meri);
    border-color: var(--meri);
}

.sect-meri h1 .fa-solid, .sect-meri h1 .fa-regular {
    color: var(--meri);
    margin-right: 10px;
}

.sect-meri p .fa-solid, .sect-meri p .fa-regular {
    margin-right: 5px;
    filter: drop-shadow(1px 1px 0 var(--meri)) drop-shadow(1px -1px 0 var(--meri)) drop-shadow(-1px 1px 0 var(--meri)) drop-shadow(-1px -1px 0 var(--meri));
}

.info-meri {
    background-image: radial-gradient(var(--meri) 1.35px, white 1.35px);
}

.sect-meri a {
    font-weight: bolder;

    color: var(--darkest);
    transition: 0.15s ease;
}

 .sect-meri a:hover {
    filter: drop-shadow(1px 1px 0 var(--meri)) drop-shadow(1px -1px 0 var(--meri)) drop-shadow(-1px 1px 0 var(--meri)) drop-shadow(-1px -1px 0 var(--meri));
    transition: 0.15s ease;
 }

 .sect-meri p b {
    background: var(--meri);
 }

  .sect-meri p::selection, .sect-meri p i::selection, .sect-meri p a::selection,.sect-meri h1::selection  {
    background: var(--meri);
    color: var(--darkest);
 }

 .sect-meri p b::selection {
        color: var(--meri);
    background: var(--darkest);
 }

 .img-vira {
    filter: drop-shadow(2px 2px 0 var(--vira)) drop-shadow(2px -2px 0 var(--vira)) drop-shadow(-2px 2px 0 var(--vira)) drop-shadow(-2px -2px 0 var(--vira));
}

.name-vira {
    filter: drop-shadow(1px 1px 0 var(--vira)) drop-shadow(1px -1px 0 var(--vira)) drop-shadow(-1px 1px 0 var(--vira)) drop-shadow(-1px -1px 0 var(--vira));
}

.sect-vira h1 {
    color: var(--vira);
    border-color: var(--vira);
}

.sect-vira h1 .fa-solid, .sect-vira h1 .fa-regular {
    color: var(--vira);
    margin-right: 10px;
}

.sect-vira p .fa-solid, .sect-vira p .fa-regular {
    margin-right: 5px;
    filter: drop-shadow(1px 1px 0 var(--vira)) drop-shadow(1px -1px 0 var(--vira)) drop-shadow(-1px 1px 0 var(--vira)) drop-shadow(-1px -1px 0 var(--vira));
}

.info-vira {
    background-image: radial-gradient(var(--vira) 1.35px, white 1.35px);
}

.sect-vira a {
    font-weight: bolder;

    color: var(--darkest);
    transition: 0.15s ease;
}

 .sect-vira a:hover {
    filter: drop-shadow(1px 1px 0 var(--vira)) drop-shadow(1px -1px 0 var(--vira)) drop-shadow(-1px 1px 0 var(--vira)) drop-shadow(-1px -1px 0 var(--vira));
    transition: 0.15s ease;
 }

 .sect-vira p b {
    background: var(--vira);
 }

  .sect-vira p::selection, .sect-vira p i::selection, .sect-vira p a::selection,.sect-vira h1::selection  {
    background: var(--vira);
    color: var(--darkest);
 }

 .sect-vira p b::selection {
        color: var(--vira);
    background: var(--darkest);
 }

  .img-raku {
    filter: drop-shadow(2px 2px 0 var(--raku)) drop-shadow(2px -2px 0 var(--raku)) drop-shadow(-2px 2px 0 var(--raku)) drop-shadow(-2px -2px 0 var(--raku));
}

.name-raku {
    filter: drop-shadow(1px 1px 0 var(--raku)) drop-shadow(1px -1px 0 var(--raku)) drop-shadow(-1px 1px 0 var(--raku)) drop-shadow(-1px -1px 0 var(--raku));
}

.sect-raku h1 {
    color: var(--raku);
    border-color: var(--raku);
}

.sect-raku h1 .fa-solid, .sect-raku h1 .fa-regular {
    color: var(--raku);
    margin-right: 10px;
}

.sect-raku p .fa-solid, .sect-raku p .fa-regular {
    margin-right: 5px;
    filter: drop-shadow(1px 1px 0 var(--raku)) drop-shadow(1px -1px 0 var(--raku)) drop-shadow(-1px 1px 0 var(--raku)) drop-shadow(-1px -1px 0 var(--raku));
}

.info-raku {
    background-image: radial-gradient(var(--raku) 1.35px, white 1.35px);
}

.sect-raku a {
    font-weight: bolder;

    color: var(--darkest);
    transition: 0.15s ease;
}

 .sect-raku a:hover {
    filter: drop-shadow(1px 1px 0 var(--raku)) drop-shadow(1px -1px 0 var(--raku)) drop-shadow(-1px 1px 0 var(--raku)) drop-shadow(-1px -1px 0 var(--raku));
    transition: 0.15s ease;
 }

 .sect-raku p b {
    background: var(--raku);
 }

  .sect-raku p::selection, .sect-raku p i::selection, .sect-raku p a::selection,.sect-raku h1::selection  {
    background: var(--raku);
    color: var(--darkest);
 }

 .sect-raku p b::selection {
        color: var(--raku);
    background: var(--darkest);
 }

   .img-kamia {
    filter: drop-shadow(2px 2px 0 var(--kamia)) drop-shadow(2px -2px 0 var(--kamia)) drop-shadow(-2px 2px 0 var(--kamia)) drop-shadow(-2px -2px 0 var(--kamia));
}

.name-kamia {
    filter: drop-shadow(1px 1px 0 var(--kamia)) drop-shadow(1px -1px 0 var(--kamia)) drop-shadow(-1px 1px 0 var(--kamia)) drop-shadow(-1px -1px 0 var(--kamia));
}

.sect-kamia h1 {
    color: var(--kamia);
    border-color: var(--kamia);
}

.sect-kamia h1 .fa-solid, .sect-kamia h1 .fa-regular {
    color: var(--kamia);
    margin-right: 10px;
}

.sect-kamia p .fa-solid, .sect-kamia p .fa-regular {
    margin-right: 5px;
    filter: drop-shadow(1px 1px 0 var(--kamia)) drop-shadow(1px -1px 0 var(--kamia)) drop-shadow(-1px 1px 0 var(--kamia)) drop-shadow(-1px -1px 0 var(--kamia));
}

.info-kamia {
    background-image: radial-gradient(var(--kamia) 1.35px, white 1.35px);
}

.sect-kamia a {
    font-weight: bolder;

    color: var(--darkest);
    transition: 0.15s ease;
}

 .sect-kamia a:hover {
    filter: drop-shadow(1px 1px 0 var(--kamia)) drop-shadow(1px -1px 0 var(--kamia)) drop-shadow(-1px 1px 0 var(--kamia)) drop-shadow(-1px -1px 0 var(--kamia));
    transition: 0.15s ease;
 }

 .sect-kamia p b {
    background: var(--kamia);
 }

  .sect-kamia p::selection, .sect-kamia p i::selection, .sect-kamia p a::selection,.sect-kamia h1::selection  {
    background: var(--kamia);
    color: var(--darkest);
 }

 .sect-kamia p b::selection {
        color: var(--kamia);
    background: var(--darkest);
 }

   .img-aia {
    filter: drop-shadow(2px 2px 0 var(--aia)) drop-shadow(2px -2px 0 var(--aia)) drop-shadow(-2px 2px 0 var(--aia)) drop-shadow(-2px -2px 0 var(--aia));
}

.name-aia {
    filter: drop-shadow(1px 1px 0 var(--aia)) drop-shadow(1px -1px 0 var(--aia)) drop-shadow(-1px 1px 0 var(--aia)) drop-shadow(-1px -1px 0 var(--aia));
}

.sect-aia h1 {
    color: var(--aia);
    border-color: var(--aia);
}

.sect-aia h1 .fa-solid, .sect-aia h1 .fa-regular {
    color: var(--aia);
    margin-right: 10px;
}

.sect-aia p .fa-solid, .sect-aia p .fa-regular {
    margin-right: 5px;
    filter: drop-shadow(1px 1px 0 var(--aia)) drop-shadow(1px -1px 0 var(--aia)) drop-shadow(-1px 1px 0 var(--aia)) drop-shadow(-1px -1px 0 var(--aia));
}

.info-aia {
    background-image: radial-gradient(var(--aia) 1.35px, white 1.35px);
}

.sect-aia a {
    font-weight: bolder;

    color: var(--darkest);
    transition: 0.15s ease;
}

 .sect-aia a:hover {
    filter: drop-shadow(1px 1px 0 var(--aia)) drop-shadow(1px -1px 0 var(--aia)) drop-shadow(-1px 1px 0 var(--aia)) drop-shadow(-1px -1px 0 var(--aia));
    transition: 0.15s ease;
 }

 .sect-aia p b {
    background: var(--aia);
 }

  .sect-aia p::selection, .sect-aia p i::selection, .sect-aia p a::selection,.sect-aia h1::selection  {
    background: var(--aia);
    color: var(--darkest);
 }

 .sect-aia p b::selection {
        color: var(--aia);
    background: var(--darkest);
 }

   .img-kazuha {
    filter: drop-shadow(2px 2px 0 var(--kazuha)) drop-shadow(2px -2px 0 var(--kazuha)) drop-shadow(-2px 2px 0 var(--kazuha)) drop-shadow(-2px -2px 0 var(--kazuha));
}

.name-kazuha {
    filter: drop-shadow(1px 1px 0 var(--kazuha)) drop-shadow(1px -1px 0 var(--kazuha)) drop-shadow(-1px 1px 0 var(--kazuha)) drop-shadow(-1px -1px 0 var(--kazuha));
}

.sect-kazuha h1 {
    color: var(--kazuha);
    border-color: var(--kazuha);
}

.sect-kazuha h1 .fa-solid, .sect-kazuha h1 .fa-regular {
    color: var(--kazuha);
    margin-right: 10px;
}

.sect-kazuha p .fa-solid, .sect-kazuha p .fa-regular {
    margin-right: 5px;
    filter: drop-shadow(1px 1px 0 var(--kazuha)) drop-shadow(1px -1px 0 var(--kazuha)) drop-shadow(-1px 1px 0 var(--kazuha)) drop-shadow(-1px -1px 0 var(--kazuha));
}

.info-kazuha {
    background-image: radial-gradient(var(--kazuha) 1.35px, white 1.35px);
}

.sect-kazuha a {
    font-weight: bolder;

    color: var(--darkest);
    transition: 0.15s ease;
}

 .sect-kazuha a:hover {
    filter: drop-shadow(1px 1px 0 var(--kazuha)) drop-shadow(1px -1px 0 var(--kazuha)) drop-shadow(-1px 1px 0 var(--kazuha)) drop-shadow(-1px -1px 0 var(--kazuha));
    transition: 0.15s ease;
 }

 .sect-kazuha p b {
    background: var(--kazuha);
 }

  .sect-kazuha p::selection, .sect-kazuha p i::selection, .sect-kazuha p a::selection,.sect-kazuha h1::selection  {
    background: var(--kazuha);
    color: var(--darkest);
 }

 .sect-kazuha p b::selection {
        color: var(--kazuha);
    background: var(--darkest);
 }

   .img-yell {
    filter: drop-shadow(2px 2px 0 var(--yell)) drop-shadow(2px -2px 0 var(--yell)) drop-shadow(-2px 2px 0 var(--yell)) drop-shadow(-2px -2px 0 var(--yell));
}

.name-yell {
    filter: drop-shadow(1px 1px 0 var(--yell)) drop-shadow(1px -1px 0 var(--yell)) drop-shadow(-1px 1px 0 var(--yell)) drop-shadow(-1px -1px 0 var(--yell));
}

.sect-yell h1 {
    color: var(--yell);
    border-color: var(--yell);
}

.sect-yell h1 .fa-solid, .sect-yell h1 .fa-regular {
    color: var(--yell);
    margin-right: 10px;
}

.sect-yell p .fa-solid, .sect-yell p .fa-regular {
    margin-right: 5px;
    filter: drop-shadow(1px 1px 0 var(--yell)) drop-shadow(1px -1px 0 var(--yell)) drop-shadow(-1px 1px 0 var(--yell)) drop-shadow(-1px -1px 0 var(--yell));
}

.info-yell {
    background-image: radial-gradient(var(--yell) 1.35px, white 1.35px);
}

.sect-yell a {
    font-weight: bolder;

    color: var(--darkest);
    transition: 0.15s ease;
}

 .sect-yell a:hover {
    filter: drop-shadow(1px 1px 0 var(--yell)) drop-shadow(1px -1px 0 var(--yell)) drop-shadow(-1px 1px 0 var(--yell)) drop-shadow(-1px -1px 0 var(--yell));
    transition: 0.15s ease;
 }

 .sect-yell p b {
    background: var(--yell);
 }

  .sect-yell p::selection, .sect-yell p i::selection, .sect-yell p a::selection,.sect-yell h1::selection  {
    background: var(--yell);
    color: var(--darkest);
 }

 .sect-yell p b::selection {
        color: var(--yell);
    background: var(--darkest);
 }

   .img-tear {
    filter: drop-shadow(2px 2px 0 var(--tear)) drop-shadow(2px -2px 0 var(--tear)) drop-shadow(-2px 2px 0 var(--tear)) drop-shadow(-2px -2px 0 var(--tear));
}

.name-tear {
    filter: drop-shadow(1px 1px 0 var(--tear)) drop-shadow(1px -1px 0 var(--tear)) drop-shadow(-1px 1px 0 var(--tear)) drop-shadow(-1px -1px 0 var(--tear));
}

.sect-tear h1 {
    color: var(--tear);
    border-color: var(--tear);
}

.sect-tear h1 .fa-solid, .sect-tear h1 .fa-regular {
    color: var(--tear);
    margin-right: 10px;
}

.sect-tear p .fa-solid, .sect-tear p .fa-regular {
    margin-right: 5px;
    filter: drop-shadow(1px 1px 0 var(--tear)) drop-shadow(1px -1px 0 var(--tear)) drop-shadow(-1px 1px 0 var(--tear)) drop-shadow(-1px -1px 0 var(--tear));
}

.info-tear {
    background-image: radial-gradient(var(--tear) 1.35px, white 1.35px);
}

.sect-tear a {
    font-weight: bolder;

    color: var(--darkest);
    transition: 0.15s ease;
}

 .sect-tear a:hover {
    filter: drop-shadow(1px 1px 0 var(--tear)) drop-shadow(1px -1px 0 var(--tear)) drop-shadow(-1px 1px 0 var(--tear)) drop-shadow(-1px -1px 0 var(--tear));
    transition: 0.15s ease;
 }

 .sect-tear p b {
    background: var(--tear);
 }

  .sect-tear p::selection, .sect-tear p i::selection, .sect-tear p a::selection,.sect-tear h1::selection  {
    background: var(--tear);
    color: var(--darkest);
 }

 .sect-tear p b::selection {
        color: var(--tear);
    background: var(--darkest);
 }
 
img.icon {
    width: 100px;
}

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

 @media only screen and (max-width: 1440px) {
div.header button,div.footer button  {
    font-size: 25px;
}

div.header h1, div.footer h1  {
    font-size: 25px;
}

 .character, .tab {
   width: 1200px;
 }

 .character-img img {
    width: 850px;
    position: relative;
     z-index: -1;
      right: 40px;
}

.character-info {
    width: 700px;
    right: 250px;
}
 }

 @media only screen and (max-width: 1200px) {
div.header button,div.footer button  {
    font-size: 20px;
}

div.header h1, div.footer h1  {
    font-size: 20px;
}

 .character, .tab {
   width: 1000px;
 }

 
 .character p {
   font-size: 17.5px;
 }

 .character-img img {
    width: 850px;
    position: relative;
     z-index: -1;
      right: -20px;
}

 .img-kamia img {
right: 100px;
}

.character-info {
    width: 600px;
    right: 300px;
}
 }