.raleway {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}


@keyframes hover-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}


@keyframes fadein {
    from {
        opacity: 0;
    }
}


  buttonhold a:hover {
      border-radius: 30%;
   animation: hover-pulse 0.8s ease infinite alternate;
  }
  
  @keyframes hover-shine {
  from { transform: translateX(-120%) skewX(-20deg); }
  to { transform: translateX(220%) skewX(-20deg); }
}

buttonhold a {
  position: relative;
  overflow: hidden;
}

buttonhold a:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}
  
  buttonhold a:hover::before {
    animation: hover-shine 1.5s ease infinite;
  }
  
 
        :root {
            --black: #26001F;
            --white: #f7fffc;
            --pink: #FF6A8F;
            --teal: #3fcc96;
        }


        .polka {
            background-image:
                radial-gradient(rgb(255, 106, 143, 0.5) 27.6%, transparent 27.6%),
                radial-gradient(rgb(255, 106, 143, 0.5) 27.6%, transparent 27.6%),
                radial-gradient(#ffffff 27.6%, transparent 27.6%),
                radial-gradient(#3fcc9650 27.6%, transparent 27.6%);
            background-position: 0px 0px, 0px 0px, -2.4px 2.4px, 21.6px 26.4px;
            background-size: 48px 48px;
            background-color: rgb(255, 255, 255);
        }

        body {
            width: 780px;
        margin-left: auto;
        background: var(--white);
        margin-right: auto;
        color: var(--black);
        border-radius: 40px;
        padding: 10px;
        }

        Scale {
            display: block;
            position: relative;
            aspect-ratio: 2.5 / 1;
        }

        main {
            display: block;
            
            width: 700px;
            border: 5px solid var(--black);
color: var(--black);
            padding: 10px;
            padding-bottom: 0px;
            background: var(--black);
            overflow: hidden;
            text-align: right;
            border-radius: 40px;
            margin-left: auto;
            margin-right: auto;
            aspect-ratio: 1.5 / 1;
            transition: 0.5s;
        }
        
        main:hover {
            border-radius: 10px;
        }
        
        img.me {
            width: 75%;
            margin-bottom: -5px;
            transition: .2s;
        }
        
        img.me:hover {
            filter: drop-shadow(-10px 4px 0px #3fcc96);
        }
        
        sitename {
            display: block;
            transform: scaley(.7);
            font-size:60px;
            font-family: "Raleway", sans-serif;
            text-align: center;
            margin-top: -10px;
            transition: 0.5s;
            position: relative;
            z-index: 5;
        }
        
        sitename:hover {
            transform: scaley(1);
            margin-top: 0px;
        }
        
        subtit {
            display: block;
            text-align: center;
            font-family: "Raleway", sans-serif;
            font-size: 25px;
            margin-top: -20px;
            color: var(--teal);
            transform: scaley(0.7);
        }
        
        subtit span {
            color: var(--pink);
        }
        
        buttonhold {
            display: block;
            text-align: center;
        }
        
        buttonhold a {
            display: inline-block;
            width: 100px;
            padding-top: 30px;
            padding-bottom: 30px;
            font-size: 20px;
            background: var(--pink);
            text-align: center;
            border-radius: 50%;
            color: var(--white);
            transition: .5s;
            font-family: "Raleway", sans-serif;
            font-weight: 900;
            text-decoration: none;
            margin-right: 2px;
            border: 3px solid var(--black);
           position: relative;
            
        
        }
        
        buttonhold a:nth-of-type(even) {
            background: var(--teal);
            top: 15px;
        }
        
        .copyr {
            display: block;

            margin-top: 20px;
            text-align: center;
            width: 100%;
            font-size: 12px;
            opacity: 0.5;
            font-family: "Raleway", sans-serif;
        }
        
        body {
  opacity: 0;
  transition: opacity 0.5s ease-in-out; /* Controls the speed of the fade */
}

/* 2. When the page is fully loaded, this class makes it visible */
body.page-loaded {
  opacity: 1;
}

/* 3. When navigating away, this class triggers the fade-out */
body.page-exiting {
  opacity: 0;
}