@font-face {
    font-family: "TreasureMap";
    src: url("fonts/TreasureMap.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    
  }
  

:root {
    --black: #0b0b0f;
    --beige: #f5f0e6;
    --crimson: #8b0000;
    --gold: #d4af37;
    --font-body: "Times New Roman", Times, serif;

    --text-primary: var(--beige);
    --text-accent: var(--crimson);

    --font-title: "TreasureMap", serif;
  }

body {
    background: var(--bg);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.5;
    font-family: var(--font-title);
    letter-spacing: normal;
  }

li {
    list-style: circle;
  }
  
  .list {
    list-style: square;
  }
  
  #msg {
    font-family: var(--font-title);
  }
  .light-theme {
    --bg:var(--beige);
    --text-primary:var(--black);
    --text-accent:var(--gold);
    --btnBg: var(--black);
    --btnFontColor: var(--crimson);
    --primaryBtnBg: var(--gold);
    --primaryBtnText: var(--black);
  }
  .dark-theme {
    --bg: var(--black);
    --text-primary:var(--beige);
    --text-accent: var(--crimson);
    --btnBg: var(--crimson);
    --btnFontColor: var(--beige);
    --primaryBtnBg: var(--crimson);
    --primaryBtnText: var(--beige);


  }
    .btn {
        position: absolute;
        top: 20px;
        right: 20px;
        height: 50px;
        width: 50px;
        border-radius: 50%;
        border: none;
        color: var(--btnFontColor);
        background-color: var(--btnBg);
        font-weight:700;
        cursor:pointer;
        transition: transform 0.4s ease;
        

      }
      .btn:hover{
        opacity: 0.85;
        transform:rotate(360deg);
      }
    
    h1 {
        font-family: var(--font-title);
        color: var(--text-accent);
        letter-spacing: normal;
        text-align: center;
      }

.addbtn{
  padding: 10x 18px;
  border-radius: 18px;
  background: var(--primaryBtnBg);
  color: var(--primaryBtnText);

  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.add-btn:hover{
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.controls input,
.controls select,
.controls button {
  font-family: var(--font-title);
  height: 50px;
  font-size: 15px;
  padding: 0 15px;  /* space in between the buttons*/
  border-radius: 25px; /* rounded corners */
  color: var(--text-accent);
 
}
.footer{
  margin-top: 20px;        /* space from content above */
  padding: 18px 20px;      /* space inside footer */

  border-top: 1px solid var(--text-accent); /* separator line */

  text-align: start;
  font-size: 0.9rem;
  opacity: 0.8;
}

.logo {
  font-size: 100px;
  display: block;
  text-align: center;
  
}
.subtitle {
  font-family: var(--font-title);
  text-align: center;
}