*{
  margin: 0%;
}

 @-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-fill-1 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.1s both;
          animation: animate-svg-fill-1 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.1s both;
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-fill-2 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s both;
          animation: animate-svg-fill-2 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.4s both;
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(0, 0, 0);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-fill-3 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.7s both;
          animation: animate-svg-fill-3 0.2s cubic-bezier(0.77, 0, 0.175, 1) 0.7s both;
}

#navCheeseSvg{
  cursor: pointer;
  width: 4%;
  min-width: 35px;
  padding: var(--menuLinkPadding, 1%);
  padding-left: 18%;
  fill: black;
}
/*
=====
DEPENDENCES
=====
*/

.r-link{
    display: var(--rLinkDisplay, inline-flex) !important;
  }
  
  .r-link[href]{
    color: var(--rLinkColor) !important;
    text-decoration: var(--rLinkTextDecoration, none) !important;
  }
  
  .r-list{
    align-items: center;
    padding-left: 3.5rem;
    margin-top: var(--rListMarginTop, 0) !important;
    margin-bottom: var(--rListMarginBottom, 0) !important;
    list-style: var(--rListListStyle, none) !important;
  }
  
  
  /*
  =====
  CORE STYLES
  =====
  */
  
  .menu{
    --rLinkColor: var(--menuLinkColor, currentColor);
  }
  
  .menu__link{
    display: var(--menuLinkDisplay, block);
  }
  
  /* 
  fading siblings
  */
  
  .menu:hover .menu__link:not(:hover){
    --rLinkColor: var(--menuLinkColorUnactive, rgba(22, 22, 22, .35));
  }
  
  /*
  =====
  PRESENTATION STYLES
  =====
  */
  
  .menu{
    background-color: var(--menuBackgroundColor, #f0f0f0);
    box-shadow: var(--menuBoxShadow, 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24));
  }
  
  .menu__list{
    display: flex;
  }
  
  .menu__link{
    padding: var(--menuLinkPadding, 1.5rem 2.5rem);
    font-weight: var(--lightFont,700);
    text-transform: uppercase;
  }

  .menu__light{
    --lightFont: 500;
    text-transform:none!important;
  }
  
  /* 
  =====
  TEXT UNDERLINED
  =====
  */
  
  .text-underlined{
    position: relative;
    overflow: hidden;
  
    will-change: color;
    transition: color .25s ease-out;  
  }
  
  .text-underlined::before, 
  .text-underlined::after{
    content: "";
    width: 0;
    height: 3px;
    background-color: var(--textUnderlinedLineColor, currentColor);
  
    will-change: width;
    transition: width .1s ease-out;
  
    position: absolute;
    bottom: 0;
  }
  
  .text-underlined::before{
    left: 50%;
    transform: translateX(-50%); 
  }
  
  .text-underlined::after{
    right: 50%;
    transform: translateX(50%); 
  }
  
  .text-underlined:hover::before, 
  .text-underlined:hover::after{
    width: 100%;
    transition-duration: .2s;
  }
  
  /*
  =====
  SETTINGS
  =====
  */
  
  .page__custom-settings{
    --menuBackgroundColor: #6c5ce7;
    --menuLinkColor: #fff;
    --menuLinkColorUnactive: #241c69;
    --menuLinkOutlineOffset: -.5rem; 
  }
  
  /*
  =====
  DEMO
  =====
  */
  
  body{
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
    margin: 0;
    min-height: 100vh;  
  }
  
  .page{
    box-sizing: border-box;
    max-width: 100%;
    margin-bottom: 4rem;
    align-items: center!important;
    /* margin: auto; */
  }

  .center{
    display: flex;
    justify-content: center;
    gap: 9rem;
    align-items: center!important;
  }
  
  .page__menu:nth-child(n+2){
    margin-top: 3rem;
  }
  
  .r-link{
      --uirLinkDisplay: var(--rLinkDisplay, inline-flex);
      --uirLinkTextColor: var(--rLinkTextColor);
      --uirLinkTextDecoration: var(--rLinkTextDecoration, none);
  
      display: var(--uirLinkDisplay) !important;
      color: var(--uirLinkTextColor) !important;
      text-decoration: var(--uirLinkTextDecoration) !important;
  }

  .r-link-Alter{
    --rLinkTextColor: white;
  }

  .margTop{
    margin-top: 5%;
  }

  .hero-headline {
    margin: 0 0 1rem;
    animation: fadeInUp 0.7s forwards;
    opacity: 0;
    flex: 1;
    font-size: 4rem;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(0);
    }
  
    100% {
      opacity: 1;
      transform: translateY(-18px);
    }
  }