@import url('https://fonts.googleapis.com/css?family=Khand:200,300,400,500,600,700,800');

body {
    background: linear-gradient(225deg, #000000, #000000, #131313, #867200);
    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 98vh;
    font-family: 'Khand';
    /* NO transition for background */
    transition: color 0.8s ease; /* ONLY color fades */
}




body.light-mode::before {
    opacity: 0;
}

body.light-mode {
    background: #f0f0f0;
    color: black;
}



.brand {
    width: 30%;
    padding: 40px;
    text-align: center;
    
}

.brand .logo {
    width: 40%;
    margin-bottom: -5rem;
    
}

.brand h1 {
    font-size: 3rem;
    margin-bottom: 30px;
    font-weight: 800;
}

.brand h2 {
    font-weight: bold;
    font-size: 1rem;
}

.brand p {
    font-size: 1rem;
    margin: 10px 0;
    line-height: 1.5;
    font-weight: lighter;
}

.settings-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}

.settings-box {
    border-radius: 20px;
    height: 40%;
    width: 30%;
    background-color: #fff;
    color: #000;
    padding: 30px 60px 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 100px;
    margin-right: 100px;
    outline: solid 1px #867200;
}

.settings-box h2 {
    margin-bottom: 20%;
    font-size: 2.2rem;
    font-weight: bold;
}

.light-mode-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.switch-label {
    font-size: 1.2rem;
    color: rgb(0, 0, 0); /* default color */
    font-family: 'Khand';
    transition: color 0.8s ease; /* perfectly matching others */
}

/* Switch Outer */
.switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Slider Background */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #000000;
    transition: .8s;
    border-radius: 34px;
}

/* The Ball */
.slider:before {
    position: absolute;
    content: "🌙"; /* dark mode when OFF */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: rgb(83, 64, 16);
    transition: .8s, 0.6s transform ease, 0.6s rotate ease;
    border-radius: 50%;
}

/* Switch ON */
input:checked + .slider {
    background-color: #58a2df;
    
}

/* Ball moves + content changes when ON */
input:checked + .slider:before {
    transform: translateX(36px) rotate(360deg);
    content: "🌞"; /* light mode when ON */
    background-color: #96c6ee;
}

input:not(:checked) + .slider:before {
    transform: translateX(0px) rotate(-360deg);
}

/* 🖌 Label color changes to black when light mode */
input:checked ~ .switch-label,
input:checked + .slider + .switch-label {
    color: black;
}


.settings-section p {
    font-size: 1rem;
}

.settings-section p a {
    color: #A58F0B;
    text-decoration: none;
    font-weight: bold;
}

.settings-box button {

    background-color: #bc1212;
    border: none;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 30%;
    margin-bottom: 15%;
    color: white;
    font-weight: bold;
}
.settings-box button:hover {
    background-color: #6a0b0b;
}

/* LIGHT MODE SUPPORT */
body.light-mode {
    background-image: linear-gradient(225deg, #eeeeee, #e1e1e1, #eedd87, #c1a819 );
    
    color: black;
}

.settings-section.light-mode,
.settings-box.light-mode,
.brand.light-mode {
    
    color: black;
}

.brand.light-mode .logo {
    filter: brightness(110%);
    filter: contrast(120%);
}

.settings-section,
.settings-box,
.brand,
.switch-label,
button {
    transition: color 0.8s ease, border-color 0.8s ease;
}


.switch-label.light-mode {
    color: #000;
}

/* Phones (width <= 767px) */
@media (max-width: 767px) {
    .brand {
        display: none;
    }

    .settings-section {
        width: 100%;
        height: 100%;
        padding: 20px;
    }

    .switch {
        width: 90px;

    }

    .light-mode-toggle {
        width: 100%;
    }

}