.theme-light {
    --color-backgroud: rgb(158, 158, 158);
    --color-backgroud2: rgb(209, 209, 209);
    --color-switch:rgb(34, 157, 56);
    --color-switch2:rgb(110, 255, 139);
    --color-nav:rgb(138, 138, 138);
    --color-text:rgb(114, 114, 114);
    --color-text2:rgb(0, 0, 0);
    --color-text-switch:rgb(255, 255, 255);
    --color-link: rgb(42, 123, 210);
  }

.theme-dark {
    --color-backgroud: rgb(47, 47, 47);
    --color-backgroud2: rgb(40, 40, 40);
    --color-switch:rgb(0, 221, 81);
    --color-switch2:rgb(4, 85, 29);
    --color-nav:rgb(52, 73, 94);
    --color-text:rgb(241, 241, 241);
    --color-text2:rgb(192, 192, 192);
    --color-text-switch:rgb(0, 0, 0);
    --color-link: rgb(38, 255, 0);
  }


body {
    font-family: Arial, sans-serif;
    background-color: var(--color-backgroud);
    text-align: center;
    padding: 20px;
    transition: all 0.4s ease-in-out;
}

.switch{
    border: none;
    border-radius: 10px;
    color: var(--color-text-switch);
    cursor: pointer;
    font-size: 15px;
    margin-right: 5px;
    outline: none;
    padding: 13px 20px;
    transition: all 0.4s ease-in-out;
    background-color: var(--color-switch);
}

.switch2{
    border: none;
    border-radius: 10px;
    color: var(--color-text-switch2);
    cursor: pointer;
    font-size: 15px;
    margin-right: 5px;
    outline: none;
    padding: 13px 20px;
    transition: all 0.4s ease-in-out;
    background-color: var(--color-switch2);
}

#app {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    background: var(--color-backgroud2);
    max-width: 600px;
    margin: auto;
    transition: all 0.4s ease-in-out;
}

h1 {
    color: #4CAF50;
}

a {
    color: var(--color-text);
}

i {
    color: var(--color-text);
}

p {
    color: var(--color-text2);
}



thead {
    color: var(--color-text);
}

tbody {
    color: var(--color-text);
    margin-left: 50px;
}