header {
	text-align: center;
}
aside {
	padding: 20px;
	border: 40px;
}
nav {
	color: black;
	letter-spacing: 150px;
	text-align: center;
}
article {
	background-color: black;
}
body {
	background-color: black;
	color: white;
}
.glow-button {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: black;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  outline: none; 
  box-shadow: 0 0 5px rgba(0, 169, 244, 0.5); 
  transition: box-shadow 0.3s ease-in-out, transform 0.3s; 
}

.glow-button:hover {
  box-shadow: 0 0 50px 10px rgba(0, 169, 244, 0.8);
  transform: scale(1.05);
}

.glow-button:active {
  transform: scale(0.95);
}
hr {
	box-shadow: 0 0 10px 2px rgba(0, 169, 244, 0.8);
}
.glow-buton {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: black;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  outline: none; 
  box-shadow: 0 0 5px rgba(255, 255, 0, 0.5); 
  transition: box-shadow 0.3s ease-in-out, transform 0.3s; 
}

.glow-buton:hover {
  box-shadow: 0 0 50px 10px rgba(255, 255, 0, 0.8);
  transform: scale(1.05);
}

.glow-buton:active {
  transform: scale(0.95);
}
h2 {
	text-align: center;
}
p {
	text-align: center;
}
#graident {
  background-image: images/;
}
body::-webkit-scrollbar  {
	display: none;
}
.fade-hover {
  opacity: 0.7;
  transition: opacity 0.5s ease;
}

.fade-hover:hover {
  opacity: 1.0;
}




:root {
      --bg: #FFFFFF;
      --bg-shade-200: #000000;
      --bg-shade-outline: #FFFFFF;

      --font-color: #FFFFFF;

      --spacing-32: 2rem;
      --sapcing-24: 1.5rem;
      --spacing-16: 1rem;
      --spacing-1: 0.063rem;

      --universal-transition: all 0.5s ease-in-out;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
	ul {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-16);
      list-style: none;
    }

    /* svg */
    circle-expand {
      --svg-length: 1.5rem;

      display: flex;

      svg {
        width: var(--svg-length);
        height: var(--svg-length);

        circle {
          stroke-dasharray: var(--circle-length);
          stroke-dashoffset: 0;
          transition: var(--universal-transition);
        }

        path:nth-of-type(2) {
          stroke-dasharray: var(--top-length);
          stroke-dashoffset: 0;
          transition: var(--universal-transition);
        }

        path:nth-of-type(3) {
          stroke-dasharray: var(--bottom-length);
          stroke-dashoffset: 0;
          transition: var(--universal-transition);
        }
      }
    }

    summary[expanded] {
      circle-expand {
        svg {
          circle {
            stroke-dashoffset: var(--circle-length);
          }

          path:nth-of-type(2) {
            stroke-dashoffset: var(--top-length);
          }

          path:nth-of-type(3) {
            stroke-dashoffset: var(--bottom-length);
          }
        }
      }
    }

    details {
      position: relative;
      border: var(--spacing-1) solid var(--bg-shade-outline);
      padding: clamp(1.5rem, calc(1.5rem + ((1vw - 0.28125rem) * 0.8081)), 2rem);
      border-radius: var(--sapcing-24);
      transition: var(--universal-transition);

      details-content {
        display: block;
        overflow: hidden;
        height: 0;
        transition: var(--universal-transition);
      }

      &:has(summary[expanded]) {
        background-color: var(--bg-shade-200);
        border-color: var(--bg-shade-200);

        p {
          opacity: 1;
        }
      }

      p {
        opacity: 0;
        line-height: 1.5;
        margin-block: var(--sapcing-24);
        transition: var(--universal-transition);
      }
    }

    summary {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-32);
      list-style: none;
      cursor: pointer;
      transition: var(--universal-transition);

      /* avoid Windows insertion caret */
      caret-color: transparent;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    summary::marker {
      content: '';
    }