:root {
    --bgColor: #ed2390;
    --bgColor2: #ed2390;
    --accentColor: #ed2390;
    --accentColor2: #ffffff;
    font-family: "novecento sans book", sans-serif;
    --font-style: normal;
    --delay: .3s;
	color-scheme: light;
	prefers-color-scheme: light;
}



body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--accentColor) ;
    opacity: 0;
    animation: 1s ease-out var(--delay) 1 transitionAnimation; /* duration/timing-function/delay/iterations/name */
    animation-fill-mode: forwards;
    background-repeat: no-repeat;
    background-size: cover;
    overflow-y: hidden;
    overflow-x: hidden;
}
#top {
    padding-top: 3vh;
    padding-bottom: 3vh;

}

#logo img {
    position: relative;
    height: 25vh;
    display: block;
    margin: 10px auto 0px ;
    border-radius: 50%;
    padding-bottom: 5px;
}

#socialtag {
    text-align: center;
    color: var(--accentColor2) ;
    font-size: 20pxpx;
    display: block;
    margin: 0px auto 0px ;
    width: 100%;
    font-family: "adlam-display", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size:x-large;
    padding-top: 10px;
    padding-bottom: 10px;
}

#title {
    color: var(--accentColor2) ;
    font-weight: 400;
    font-size: small;
    line-height: 1;
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    
}

#links {
    display: flex ;
    flex-direction: column ;
    position: relative ;
    align-items: center ; /* Center each link within the #links container */
  }
  
  .link {
    display: flex ;
    align-items: center ;
    width: 90% ;
    height: 60% ;
    min-height: 40px;
    max-height: 50px;
    justify-content: center;
    text-decoration: none;
    color: var(--accentColor) ; 
    background-color: #ffffff ; 
    border: solid var(--accentColor2) 2px ;
    border-radius: 10px ; 
    margin: 4px 0 ;
    position: relative ;
    /* Remove height constraints to allow flexibility */
  }
  
  .link i {
    position: absolute;
    left: 10px; /* Adjust as needed to position the icon */
    font-size: 30px;
  }
  
  .link span {
    font-size: 15px;
    text-align: center;
  }


  @media (max-height:580px)   {
    body {
      overflow-y: scroll;
    }
  }

  /*@media only screen and (orientation: landscape)  {
    body {
      overflow-y: scroll;
      background-color: aqua;
    }
  }*/

  /* --------------  FORCE DARK COLOR FIX  -------------- */ 

@media (prefers-color-scheme: dark) {
  body {
  background-color: #ed2390 ;
  }
  .link {
    color: var(--accentColor); 
    background-color: #ffffff ; 
  }
}

@media (min-width: 500px) {
  .link {
    width: 500px; /* Applies this width when the screen is 500px or wider */
  }
}

  @media (hover: hover) {
    .link:hover  {
      background-color: var(--accentColor);
      color:#ffffff;
    }
    .linktreefonts:hover  {
      background-color: var(--accentColor);
      color:#ffffff;
  }
  }
  

  
  .link:active {
    background-color: var(--accentColor1);
    color: var(--accentColor2);
  }
  
  #hashtag {
    position: relative;
    color: var(--accentColor2);
    font-size: 1rem;
    display: block;
    font-family: var(--font);
    width: 100%;
    padding-top: 10px;
    text-align: center;
  
    /*  animation   */
    background: linear-gradient(90deg, var(--bgColor), var(--accentColor2) , var(--bgColor));
    background-repeat: no-repeat;
    background-size: 80%;
    animation: animate 6s linear var(--delay) infinite;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: rgba(255, 255, 255, 0);
  }

/*-------------------------animations-----------------------*/
@keyframes transitionAnimation {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animate {
    0% {
      background-position: -500%;
    }
    100% {
      background-position: 500%;
    }
}

@keyframes animStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
}


@media (prefers-color-scheme: dark) {
.header_color .header_bg { background-color: #ffffff;
}
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
  }