html,
body {
    background: #f5f5f5;
    font-family: 'Source Sans Pro', sans-serif;
}

html:has(.dark-mode),
body:has(.dark-mode),
.dark-mode,
.dark-mode .modal-content {
    background-image: linear-gradient(180deg, #060b1b, #08162c, #060b1b);
    background-attachment: fixed;
}

html:has(.light-mode),
body:has(.light-mode),
.light-mode,
.light-mode,
.light-mode .modal-content {
    background: #ededed;
}

html:has(.dark-mode),
body:has(.dark-mode),
.dark-mode,
.dark-mode * {
    color: white;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 56px;
    color: #397ead !important;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 40px;
    color: #397ead !important;
}

h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: lighter;
    font-size: 20px;
    color: #397ead !important;
}

.simple-card-container {
    position: relative;
    background: #f2f6ff;
    padding: 5px;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 10%) inset;
    margin-bottom: 10px;
    border-radius: 15px;
}

.simple-card-container .half {
    width: 50%;
    display: inline-block;
}

.simple-item-pool {
    border-radius: 5px;
    position: relative;
    background: rgba(255, 255, 255, 1);
    min-height: 60px;
}

.dark-mode .simple-card-container {
    background: rgba(0, 0, 0, 0.3);
}

.light-mode .simple-card-container {
    background: #cdc4c6;
}

.simple-card {
    padding: 10px 20px;
    background: white;
    border-radius: 15px;
    margin: 10px;
    display: flow-root;
}

.dark-mode .simple-card {
    background: rgba(0, 0, 0, 0.3);
}

.row > .col-12 > .simple-card,
.row > .col-11 > .simple-card,
.row > .col-10 > .simple-card,
.row > .col-9 > .simple-card,
.row > .col-8 > .simple-card,
.row > .col-7 > .simple-card,
.row > .col-6 > .simple-card,
.row > .col-5 > .simple-card,
.row > .col-4 > .simple-card,
.row > .col-3 > .simple-card,
.row > .col-2 > .simple-card,
.row > .col-1 > .simple-card {
    margin: 10px 0px;
}

.dark-mode .navbar-brand {
    /*    background: white;*/
    /*    border-radius: 100px;*/
    /*    overflow: hidden;*/
    padding-left: 10px;
    /*    box-shadow: 2px 2px 10px inset rgba(0, 0, 0, .6);*/
}

.dark-mode .navbar-brand img {
    background: none;
}

.dark-mode .nav-link:focus,
.dark-mode .nav-link:hover {
    color: #ccc;
}
.dark-mode input,
.dark-mode textarea,
.dark-mode select,
.dark-mode option {
    color: black;
}

.dark-mode ::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.dark-mode ::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.dark-mode .btn:hover {
    color: #ddd;
}

:focus-visible {
    outline: none;
}

.dark-mode .accordion-button,
.dark-mode .accordion-item {
    background: none;
    border: none;
}

.dark-mode .accordion-button {
    filter: brightness(255);
}