/* cyrillic-ext-italic */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/cyr-ext-italic.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic-italic */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/cyr-italic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari-italic */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/dev-italic.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* greek-ext-italic */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/gre-ext-italic.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek-italic */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/gre-italic.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese-italic */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/vie-italic.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext-italic */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/ltn-ext-italic.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin-italic */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/ltn-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/cyr-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/cyr.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/dev.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* greek-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/gre-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/gre.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/vie.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/ltn-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-display: swap;
  src: url(/elements/fonts/noto-sans/woff2/ltn.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Flex */
/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Flex';
  font-style: oblique 0deg 10deg;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url(/elements/fonts/roboto-flex/woff2/cyr-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Flex';
  font-style: oblique 0deg 10deg;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url(/elements/fonts/roboto-flex/woff2/cyr.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Roboto Flex';
  font-style: oblique 0deg 10deg;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url(/elements/fonts/roboto-flex/woff2/gre.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Flex';
  font-style: oblique 0deg 10deg;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url(/elements/fonts/roboto-flex/woff2/vie.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Flex';
  font-style: oblique 0deg 10deg;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url(/elements/fonts/roboto-flex/woff2/ltn-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Flex';
  font-style: oblique 0deg 10deg;
  font-weight: 100 1000;
  font-stretch: 25% 151%;
  font-display: swap;
  src: url(/elements/fonts/roboto-flex/woff2/ltn.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@keyframes bigger {
  0% {font-variation-settings: "wdth" 100, "wght" 700, "XTRA" 468;}
  2% {font-variation-settings: "wdth" 50, "wght" 100, "XTRA" 300;}
  4% {font-variation-settings: "wdth" 151, "wght" 1000, "XTRA" 603;}
  5% {font-variation-settings: "wdth" 93, "wght" 625, "XTRA" 430;}
  6% {font-variation-settings: "wdth" 100, "wght" 700, "XTRA" 468;}
  100% {font-variation-settings: "wdth" 100, "wght" 700, "XTRA" 468;}
}

:root {
  color-scheme: light dark;
  font-family: 'Noto Sans', sans-serif;
  font-weight: normal;
  --body-background: light-dark(lab(28.85 0 0 / 1),lab(5.15 0.38 0.13 / 1));
  --secondary-bkg-color: light-dark(lab(23.52 0 0 / 1),lab(12.39 0.72 -0.51 / 1));
  --bkg-color-3: light-dark(lab(18 0 0 / 1),lab(20 0.68 -0.48 / 1));
  --bkg-color-3-trans: light-dark(lab(82.05 0 0 / 0.2),lab(41.14 0 0 / 0.4));
  --primary-color: light-dark(lab(100 0 0 / 1),lab(88.17 0.16 0.61 / 1));
  --primary-hover: light-dark(lab(82.05 0 0 / 1),lab(73.73 0.17 0.63 / 1));
  --sec-color: light-dark(lab(90 0 0 / 1),lab(69.29 0.17 0.64 / 1));
  --biolink-color: light-dark(lab(100 0 0 / 1),lab(90.64 0.16 0.61 / 1));
  --highlight-color: light-dark(lab(29.21 -2.48 -3.63 / 1),lab(86.75 0.16 0.61 / 1));
  --highlight-color-sec: light-dark(lab(51.88 -2.12 -3.2 / 1),lab(69.29 0.17 0.64 / 1));
  --button-action: light-dark(lab(37.41 0 0 / 1),lab(28.48 0.2 0.75 / 1));
  --button-action-active: light-dark(lab(41.14 0 0 / 1),lab(23.13 0.21 0.78 / 1));
  --button-link: light-dark(lab(91.95 -0.16 -0.6 / 1),lab(21.31 0.21 0.79 / 1));
}

::selection {
  background-color: light-dark(lab(100 0 0 / 1),lab(88.17 0.16 0.61 / 1));
  color: light-dark(lab(28.85 0 0 / 1),lab(5.15 0.38 0.13 / 1));
}

h1 {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 700;
}

h2 {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 700;
}

h1 span {
  animation: bigger infinite;
  animation-duration: 15s;
  animation-timing-function: ease;
} 
h1 span:nth-child(2) {
  animation-delay: 35ms;
}
h1 span:nth-child(3) {
  animation-delay: 70ms;
}
h1 span:nth-child(4) {
  animation-delay: 105ms;
}
h1 span:nth-child(5) {
  animation-delay: 140ms;
}
h1 span:nth-child(6) {
  animation-delay: 175ms;
}
h1 span:nth-child(7) {
  animation-delay: 210ms;
}
h1 span:nth-child(8) {
  animation-delay: 245ms;
}
h1 span:nth-child(9) {
  animation-delay: 280ms;
}
h1 span:nth-child(10) {
  animation-delay: 315ms;
}
h1 span:nth-child(11) {
  animation-delay: 350ms;
}
h1 span:nth-child(12) {
  animation-delay: 385ms;
}
h1 span:nth-child(13) {
  animation-delay: 420ms;
}
h1 span:nth-child(14) {
  animation-delay: 455ms;
}
h1 span:nth-child(15) {
  animation-delay: 490ms;
}
h1 span:nth-child(16) {
  animation-delay: 525ms;
}
h1 span:nth-child(17) {
  animation-delay: 560ms;
}
h1 span:nth-child(18) {
  animation-delay: 595ms;
}
h1 span:nth-child(19) {
  animation-delay: 630ms;
}

h2 span {
  animation: bigger infinite;
  animation-duration: 15s;
  animation-timing-function: ease;
} 
h2 span:nth-child(1) {
  animation-delay: 7535ms;
}
h2 span:nth-child(2) {
  animation-delay: 7570ms;
}
h2 span:nth-child(3) {
  animation-delay: 7605ms;
}
h2 span:nth-child(4) {
  animation-delay: 7640ms;
}
h2 span:nth-child(5) {
  animation-delay: 7675ms;
}
h2 span:nth-child(6) {
  animation-delay: 7710ms;
}
h2 span:nth-child(7) {
  animation-delay: 7745ms;
}
h2 span:nth-child(8) {
  animation-delay: 7780ms;
}
h2 span:nth-child(9) {
  animation-delay: 7815ms;
}
h2 span:nth-child(10) {
  animation-delay: 7850ms;
}
h2 span:nth-child(11) {
  animation-delay: 7885ms;
}
h2 span:nth-child(12) {
  animation-delay: 7920ms;
}
h2 span:nth-child(13) {
  animation-delay: 7955ms;
}
h2 span:nth-child(14) {
  animation-delay: 7990ms;
}
h2 span:nth-child(15) {
  animation-delay: 8025ms;
}
h2 span:nth-child(16) {
  animation-delay: 8060ms;
}
h2 span:nth-child(17) {
  animation-delay: 8095ms;
}
h2 span:nth-child(18) {
  animation-delay: 8130ms;
}
h2 span:nth-child(19) {
  animation-delay: 8165ms;
}
h2 span:nth-child(20) {
  animation-delay: 8200ms;
}

body {
  background-color: var(--body-background);
  color: var(--primary-color);
}

.profile {
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 200px;
  height: 200px;
  margin-top: 50px;
}

.title-div {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 0px;
  line-height: 0px;
  margin-top: 16px;
}

h1 {
  font-size: 45px;
}

.title {
  font-size: 35px;
  color: var(--primary-color);
  margin-left: 40px;
  margin-right: 8px;
}

.email {
  fill: var(--primary-color);
  transform: scale(1);
  transition: fill 125ms linear, transform 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s;
}
.email:hover {
  fill: var(--primary-hover);
  transform: scale(1.2);
}

h2 {
  text-align: center;
  color: var(--primary-color);
  margin-top: 50px;
  font-size: 1.56rem;
}

.socials-title {
  margin-top: 30px;
}

#svg-t {
  stroke-dasharray: 4066.03076171875;
  stroke-dashoffset: 4066.03076171875;
  transition: stroke-dashoffset 1000ms ease-in;
  animation: draw-t 1000ms ease-in forwards;
}
@keyframes draw-t {
  to {
    stroke-dashoffset: 0;
  }
}
#svg-yler {
  stroke-dasharray: 2828.648193359375;
  stroke-dashoffset: 2828.648193359375;
  transition: stroke-dashoffset 1000ms ease-out;
  animation: draw-yler 1000ms ease-out forwards;
  animation-delay: 900ms;
}
@keyframes draw-yler {
  to {
    stroke-dashoffset: 0;
  }
}
#svg-m {
  stroke-dasharray: 5019.681640625;
  stroke-dashoffset: 5019.681640625;
  transition: stroke-dashoffset 1000ms ease-in;
  animation: draw-m 1000ms ease-in forwards;
  animation-delay: 2200ms;
}
@keyframes draw-m {
  to {
    stroke-dashoffset: 0;
  }
}
#svg-organ {
  stroke-dasharray: 3070.837646484375;
  stroke-dashoffset: 3070.837646484375;
  transition: stroke-dashoffset 1000ms ease-out;
  animation: draw-organ 1000ms ease-out forwards;
  animation-delay: 3100ms;
}
@keyframes draw-organ {
  to {
    stroke-dashoffset: 0;
  }
}

.social-button {
  cursor: pointer;
  max-width: 750px;
  width: 95%;
  display: flex;
  justify-content: center;
  text-decoration: none;
  color: var(--highlight-color);
  margin: auto;
  font-size: 1.06rem;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-bottom: 20px;
  background-color: var(--button-link);
  box-shadow: lab(0 0 0 / 0.24) 0px 2px 8px 0px;
  border-radius: 40px;
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, box-shadow 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s;
}
.social-button:hover {
  box-shadow: lab(0 0 0 / 0.24) 0px 4px 12px 0px;
  transform: scale(1.03);
}

.sub-footer {
  text-align: center;
  font-size: 0.88rem;
  margin-top: 60px;
  color: var(--primary-color);
}

.footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--primary-color);
}

.copyright {
  line-height: 0.31rem;
}

.privacy-policy {
  line-height: 0.63rem;
}

.footer1 {
  font-size: 0.75rem;
  color: var(--primary-color);
  text-align: center;
}

.footer2 {
  font-size: 0.75rem;
  color: var(--primary-color);
  text-align: center;
}

.w3c-img {
  margin-left: 10px;
  width: 88px;
  height: 31px;
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s;
}

.w3c-img:hover {
  transform: scale(1.07);
}

.collapsible {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 500;
  margin: auto;
  background-color: var(--button-action);
  color: var(--primary-color);
  cursor: pointer;
  border: none;
  font-size: 1rem;
  border-radius: 40px;
  max-width: 150px;
  padding: 12px;
  width: 95%;
  justify-content: center;
  display: flex;
  transform: scale(1);
  transition: background-color 175ms linear, transform 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s;
}

.collapsible:hover {
  transform: scale(1.05);
}

.active, .collapsible:active {
  background-color: var(--secondary-bkg-color);
}
.content {
  background-color: var(--secondary-bkg-color);
  border-radius: 30px;
  padding: 0 20px;
  line-height: 1.25;
  max-height: 0;
  color: var(--primary-color);
  margin: auto;
  overflow: hidden;
  margin-bottom: 10px;
  max-width: 650px;
  width: 85%;
  font-size: 1rem;
  text-wrap: pretty;
  text-align: left;
  transition: max-height 0.7s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s;
}

.content-link {
  text-decoration: underline solid transparent;
  font-weight: bold;
  color: var(--biolink-color);
  cursor: pointer;
  transition: color 150ms linear, text-decoration 150ms linear;
}

.content-link:hover {
  color: var(--primary-hover);
  text-decoration: underline solid currentColor;
}

.dark-btn {
  text-decoration: none;
  margin: auto;
  background-color: var(--button-action-active);
  color: var(--primary-color);
  cursor: pointer;
  font-size: 1rem;
  border-radius: 40px;
  margin-bottom: 10px;
  max-width: 125px;
  padding-top: 12px;
  padding-bottom: 12px;
  width: 95%;
  justify-content: center;
  display: flex;
  transform: scale(1);
  transition: transform 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s;
}

.dark-btn:hover {
  transform: scale(1.05);
}

.cnncl-usrnme {
  font-size: 1.06rem;
  font-weight: 200;
  color: var(--primary-color);
  justify-content: center;
  margin-top: -20px;
  margin-bottom: 15px;
  display: flex;
}

menu {
  padding: 0;
  list-style-type: none;
}

li {
  padding: 0;
  list-style-type: none;
}

.redirect-header {
  color: var(--primary-color);
  text-align: center;
  margin-top: 120px;
}

.redirect-help-txt {
  text-align: center;
  color: var(--primary-color);
  margin-top: 150px;
  margin-bottom: 20px;
  font-size: 1rem;
}

.header-404 {
  color: var(--primary-color);
  margin-top: 180px;
  text-align: center;
  font-size: 11.25rem;
  font-weight: normal;
}

.main-404 {
  color: var(--primary-color);
  font-size: 1.25rem;
  margin-top: 60px;
  text-align: center;
  margin-bottom: 20px;
}

.footer-links {
  padding: 0;
  display: flex;
  margin: auto;
  text-align: center;
  justify-content: center;
  list-style-type: none;
  width: 100%;
  margin-bottom: 15px;
  font-size: 0.75rem;
}

.footer-link {
  margin-right: 10px;
}

.footer-link:after {
  padding: 0;
  list-style-type: none;
  content: "";
  position: absolute;
  height: 10px;
  width: 1px;
  background-color: var(--primary-color);
  margin: 3px;
  margin-left: 4px;
  font-size: 0.75rem;
}
.footer-link:last-child:after {
  display: none;
}