html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


.containerdiv {
    float: left;
    position: relative;
}

.cornerimage {
    position: absolute;
    top: 66%;
    left: 30.5%;
}

.rW-img-btn {
    width: 7em;
    height: 7em;
}

.rW-top-margin {
    margin-top: 5em;
}

.custom-theme-switch .form-check-label::before,
.custom-theme-switch .form-check-label::after {
    content: none;
}

.custom-theme-switch .form-check-input {
    display: none;
}

.custom-theme-switch .form-check-label {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 34px;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .custom-theme-switch .form-check-label i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: opacity 0.3s;
        font-size: 1.25rem;
    }

    .custom-theme-switch .form-check-label .bi-sun-fill {
        left: 8px;
        color: #f39c12; /* Sun color */
        opacity: 0;
    }

    .custom-theme-switch .form-check-label .bi-moon-fill {
        right: 8px;
        color: #34495e; /* Moon color */
    }

/* Checked state */
.custom-theme-switch .form-check-input:checked + .form-check-label {
    background-color: var(--bs-dark);
}

    .custom-theme-switch .form-check-input:checked + .form-check-label::before {
        transform: translateX(26px);
    }

    .custom-theme-switch .form-check-input:checked + .form-check-label .bi-sun-fill {
        opacity: 1;
    }

    .custom-theme-switch .form-check-input:checked + .form-check-label .bi-moon-fill {
        opacity: 0;
    }

/* Thumb for the icons */
.custom-theme-switch .form-check-label::after {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--bs-body-color);
    border-radius: 50%;
    transition: transform 0.3s;
}

.custom-theme-switch .form-check-input:checked + .form-check-label::after {
    transform: translateX(26px);
    background-color: var(--bs-secondary);
}