/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
body {
    margin: 0;
    background-color: #0b1220;;
    color: #f3e7c8;

    font-family: Verdana, sans-serif;
    line-height: 1.8;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.header {
    text-align: center;
    padding: 36px 18px;

    background: #0f172a;
    border-bottom: 1px solid rgba(255, 209, 102, 0.15);
}
.header h1 {
    margin: 0;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 0.3px;
    color: #f3e7c8;
}
.header h2 {
    margin-top: 10px;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    color: rgba(243, 231, 200, 0.7);
}
p {
    max-width: 720px;
    margin: 18px auto;
    padding: 0 20px;
    font-family: Georgia, serif;
    font-style: normal;
    font-size: 16px;
    color: rgba(245, 235, 200, 0.85);
}
details p {
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: 10px;
    background:
    linear-gradient(
      to bottom,
      rgba(180,220,255,0.05),
      rgba(0,20,40,0.25));
    border:
      1px solid rgba(140,220,255,0.08);
    color: rgba(235,245,255,0.85);
    font-family: Georgia, serif;
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.2px;
    text-shadow:
      0 0 4px rgba(255,255,255,0.05);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.04);
}

.list {
    list-style: none;

    max-width: 760px;
    margin: 28px auto;
    padding: 0 20px;
}

.item-title {
    font-weight: 600;
    cursor: crosshair;
    color: #f3e7c8;
    letter-spacing: 1px;
    text-shadow:
      0 0 4px rgba(255,255,255,0.8),
     0 0 10px rgba(0,255,255,0.15);
   
    transition:
      color 0.15s ease,
      text-shadow 0.2s ease,
      transform 0.15s ease;
}
.item-title:hover {
  color: #ffffff;
  text-shadow:
    0 0 6px white,
    0 0 14px #7fe7ff,
    0 0 24px rgba(0,255,255,0.8);
    transform: translateX(2px);
}
a:link,
a:visited {
    color: rgba(255, 209, 102, 0.9);
    text-decoration: none;
}

a:hover {
    color: #ffe7a3;
    text-decoration: underline;
}
.btn-link {
    display: block;
    width: fit-content;

    margin: 40px auto 20px auto;

    padding: 12px 22px;

    border: 1px solid rgba(180,240,255,0.45);
    border-radius: 6px;

    background: linear-gradient(
        to bottom,
        rgba(180,240,255,0.25),
        rgba(0,80,120,0.35));
   
    color: #dffcff;
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 12px rgba(0,255,255,0.15);
  

    text-decoration: none;
    font-family: inherit;

    transition: all 0.15s ease;
}

.btn-link:hover {
    border-color: rgba(255, 209, 102, 0.5);
    transform: translateY(-1px);
}