/*DARK-THEME*/

:root {
    --background: #121212;
    --fontcolor: #C9D1D9;
  }

body {
    color: var(--fontcolor);
    background-color: var(--background);
}

.header {
    color: var(--fontcolor);
    background-color: #161a1d;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    color: var(--fontcolor);
    background-color: rgb(33, 38, 45, .3);
    border-color: rgb(65, 75, 88, .5);
}

.button:hover,
button:hover,
.button:focus,
button:focus {
    color: rgb(51, 195, 240, 1);
    background-color: rgb(65, 75, 88, .35);
    border-color: rgb(51, 195, 240, 1);
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
    background-color: rgb(51, 195, 240, .2);
    border-color: rgb(51, 195, 240, .5);
    color: var(--fontcolor);
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
    background-color: rgb(51, 195, 240, .25);
    border-color: rgb(51, 195, 240, 1);
    color: rgb(51, 195, 240, 1); }

.button.button-primary-negative,
button.button-primary-negative {
    background-color: rgb(216, 0, 50, .2);
    border-color: rgb(216, 0, 50, .5);
    color: var(--fontcolor);
}
.button.button-primary-negative:hover,
button.button-primary-negative:hover,
.button.button-primary-negative:focus,
button.button-primary-negative:focus {
    background-color: rgb(216, 0, 50, .25);
    border-color: rgb(216, 0, 50, 1);
    color: rgb(216, 0, 50, 1);
}


.button.button-primary-positive,
button.button-primary-positive {
    background-color: rgb(141, 203, 26, .2);
    border-color: rgb(141, 203, 26, .5);
    color: var(--fontcolor);
}
.button.button-primary-positive:hover,
button.button-primary-positive:hover {
    background-color: rgb(141, 203, 26, .25);
    border-color: rgb(141, 203, 26, 1);
    color: rgb(141, 203, 26, 1);
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    background-color: var(--background);
    border-color: rgb(65, 75, 88, .5);
    color: var(--fontcolor);
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  background-color: var(--background);
  color: var(--fontcolor); 
}

.icon-basic {
    filter: invert(96%) sepia(2%) saturate(1760%) hue-rotate(179deg) brightness(85%) contrast(100%);
}

.logo {
    filter: invert(96%) sepia(2%) saturate(1760%) hue-rotate(179deg) brightness(85%) contrast(100%);
}

.modal {
    background-color: #161a1d;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
}

.card {
    box-shadow: 0 -2px 10px 4px #0d0d0d;
  }