:root {
    --bg-color: #f1f1f1;
    --text-color: #000000;
    --nav-bg: #333;
    --nav-text: #f1f1f1;
    --gradient: linear-gradient(to right, #232526, #414345);
    --btn-bg: indigo;
    --btn-hover: rgb(57, 0, 98);
}

body.dark-mode {
    --bg-color: #1a1a1a;        /* Very dark card for Dark Mode */
    --text-color: #f1f1f1;      /* Keep text light */
    --nav-bg: #000;
    --gradient: linear-gradient(to right, #0f0c29, #302b63, #24243e);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}
body{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: large;
}
.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: var(--nav-bg);
}
.link{
    display: flex;
    gap: 2rem;
}
.link a, #logo a{
    text-decoration: none;
    cursor: pointer;
    color: var(--nav-text);
    transition: all 0.3s ease;
}
.link a:hover, #logo a:hover{
    color: var(--btn-hover);
    text-decoration: var(--btn-hover) underline;
}
#menu{
  display: none;
}
.container{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background:var(--gradient);
  padding:15px;
}

.items{
  width:100%;
  max-width:420px;
}

h2{
  text-align:center;
  margin-bottom:20px;
}

.card{
  background:var(--bg-color);
  color: var(--text-color);
  padding:20px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
}

.amount input{
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:6px;
  margin-top:5px;
}

.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px;
  gap:10px;
}

.box{
  flex:1;
}

.select-container{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #ccc;
  padding:6px;
  border-radius:6px;
}

select{
  width:100%;
  border:none;
  outline:none;
}

.swap{
  cursor:pointer;
  font-size:18px;
}

.msg{
  text-align:center;
  margin:20px 0;
  font-weight:bold;
}

button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:8px;
  background:indigo;
  color:white;
  font-size:16px;
  cursor:pointer;
}
footer {
    text-align: center;
    padding: 20px;
    background-color:  var(--nav-bg);
    color: #f1f1f1;
    font-size: 14px;
}
@media(max-width:500px){
  .row{
    flex-direction:column;
  }

  .swap{
    transform:rotate(90deg);
  }
}
@media(max-width:600px){
    .nav .link{
        display: none;
        flex-direction: column;
        gap: 1rem;
    }
    .nav .link.active{
      width: 100%;
      display: flex;
      position: absolute;
      padding: 0.8rem;
      top: 3rem;
      right: 0;
      background-color: #333;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .container.move{
    margin-top: 2rem;
    }
    #menu{
      display: block;
    }
}