body {
    font-family: "Pirata One", system-ui, Helvetica, sans-serif ;
    text-align: center;
  
    max-width: 600px;
    margin: 0 auto;
    
    cursor:url("https://cdn.custom-cursor.com/db/cursor/pointer_1660.png"), auto !important;
  
    background: linear-gradient(lightpink, peachpuff);
    min-height: 100vh;
  
    background-color: peachpuff;
    color: white;
    }
           /* overall site */

    
  

  
        /* divs*/    
        
         /*  this goes in the body
    
          <div class="example">
          
          </div>  */
          
           /* home menu */
                  .homemenu {
  display: flex;

    
}

          
          /* grid layout */

        
                    /* grid layout */
                    
                  .grid-container {
                  display: grid;
                  
                  grid-template-columns: repeat(3, 1fr); /* 3 equal structural columns */
                  gap: 20px;
                  place-items: center;
                                      }
                   /* grid layout */   
                
                
                
                 /* divider line */
                 
                    .line {
                    background-color: pink;
                    color: black;
                    font-family:monospace;
                    text-align: center;
                      border: 2px dashed white;
                      padding: 0px;
                      margin: 40px 0;
                      } 
    
                 /* divider line */
                 
                 
                 /* text frame */
                 
                 .frame {
                  background-color: none;
                  color: crimson;
                  text-align: justify;
                    border: 2px dashed white;
                    padding: 20px;
                    margin: 20px 0;
                    }
                  /* text frame */
                  
  
                  /* gradient text */
                  
                  /* example <h2 class="gradient-text"> text here </h2> */
                  .gradient-text {
                  font-size: 20px;
                  font-family: "Pirata One", system-ui;
                  background: linear-gradient(#ff007f, #7f00ff);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                        }
                
                 /* gradient text */
    

/* layout grid*/

/* html insert 
        <div class="grid-container-">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main-content">
    <p style="font-family: 'Arial', sans-serif; font-size: 24px; font-weight: bold; color: #333; text-shadow: 2px 2px 5px rgba(0,0,0,0.3);">
      This paragraph has a custom inline font and shadow.
    </p>
  </main>
  <footer class="footer">Footer</footer>
</div> */
/* 
body {
  margin: 200px;
  height: 100vh;
}
/* Define the grid layout */
.grid-container- {
  display: grid;
  height: 80vh;
  padding: 10px;
  gap: 15px;
  grid-template-columns: 300px 1200px; /* Sidebar width and remaining space */
  grid-template-rows: 200px 500px 70px; /* Header, Content, and Footer heights */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

/* Assign elements to grid areas */
.header {
  grid-area: header;
  background-color: pink;
  color: white;
    display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: pink;
  color: white;
    display: flex;
  justify-content: center;
  align-items: center;
}

.main-content {
  grid-area: main;
  background-color: #f8fafc;
  padding: 20px;
    display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  grid-area: footer;
  background-color: pink;
  color: white;
  text-align: center;
    display: flex;
  justify-content: center;
  align-items: center;
}
/* layout grid */
                       
                /* custom scroll bar */
                
                /* Chrome, Safari, New Edge, Opera */
                    body::-webkit-scrollbar {
                      width: 10px;  
                      height: 10px; 
                    }
                    
                    body::-webkit-scrollbar-track {
                      background: #ffe0ee;
                      border-radius: 5px;
                    }
                    
                    body::-webkit-scrollbar-thumb {
                      background: #ffbf94;
                      border-radius: 5px;
                      border: 3px solid #ffe0ee; 
                    }
                    
                    body::-webkit-scrollbar-thumb:hover {
                      background: #efd9cc;
                    }
                    
                    body::-webkit-scrollbar-thumb:active {
                      background: #f0cdad;
                    }
                    
                    
                    html {
                      scrollbar-width: thin;
                      scrollbar-color: #ffbf94 #ffe0ee;
                    }
                    
                /* custom scroll bar */
                
                 /* fonts */
    
    .shrikhand-regular {
  font-family: "Shrikhand", serif;
  font-weight: 400;
  font-style: normal;
}
.badeen-display-regular {
  font-family: "Badeen Display", system-ui;
  font-weight: 400;
  font-style: normal;
}
.special-elite-regular {
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
}

.grenze-<uniquifier> {
  font-family: "Grenze", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.germania-one-regular {
  font-family: "Germania One", system-ui;
  font-weight: 400;
  font-style: normal;
}
.la-belle-aurore-regular {
  font-family: "La Belle Aurore", cursive;
  font-weight: 400;
  font-style: normal;
}
.pirata-one-regular {
  font-family: "Pirata One", system-ui;
  font-weight: 400;
  font-style: normal; }
                
        /* text style */
        
         .header-text {
           font-size: 60px; 
           text-shadow: 3px 3px 0px rgba(0,0,0,0.9); }
        
        p {
          font-size: 25px
        } 
        
        /* links */

        
        a {
            color: crimson;
            text-decoration: none; }
        
        /* links */
        
        
        
       


/* spin aniimation */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.hover-spin {
  /* Smoothly transition back to 0deg when the mouse leaves */
  transition: transform 0.5s ease; 
}

/* Triggers the full animation loop only while hovering */
.hover-spin:hover {
  animation: spin 2s linear infinite;
}
    /* spin animation */