/* https: //uiverse.io/Pradeepsaranbishnoi/strong-treefrog-90 */
.main-circle {
    width: 40rem;
    height: 40rem;
    border-radius: 100%;
    background: linear-gradient(40deg, #FF0080, #FF8C00 70%);
    position: absolute;
    z-index: 1;
    left: 50%;
    -webkit-transform: translate(-50%, -70%);
    -ms-transform: translate(-50%, -70%);
    transform: translate(-50%, -70%)
}

/* Phone */
.phone {
    position: relative;
    z-index: 2;
    width: 18rem;
    height: 17rem;
    border-radius: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}



/* Top */
.menu {
    /*   background-color: blue; */
    font-size: 80%;
    opacity: .4;
    padding: .8rem 1.8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* Middle */
.content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: auto;
    text-align: center;
    width: 70%;
    -webkit-transform: translateY(5%);
    -ms-transform: translateY(5%);
    transform: translateY(5%);
}

.circle {
    position: relative;
    border-radius: 100%;
    width: 8rem;
    height: 8rem;
    background: linear-gradient(40deg, #FF0080, #FF8C00 70%);
    margin: auto;
}

.crescent {
    position: absolute;
    border-radius: 100%;
    right: 0;
    width: 6rem;
    height: 6rem;
    background: white;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;
    -webkit-transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform .6s cubic-bezier(0.645, 0.045, 0.355, 1);
}

label,
.toggle {
    height: 2.8rem;
    border-radius: 100px;
}

label {
    width: 100%;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 100px;
    position: relative;
    margin: 1.8rem 0 4rem 0;
    cursor: pointer;
}

.toggle {
    position: absolute;
    width: 50%;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
    box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
    -webkit-transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.names {
    font-size: 90%;
    font-weight: bolder;
    color: black;
    width: 65%;
    margin-left: 17.5%;
    margin-top: 6.5%;
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dark {
    opacity: .5;
}

.mark {
    border-radius: 100px;
    background-color: black;
}

/* -------- Switch Styles ------------*/
[type="checkbox"] {
    display: none;
}

/* Toggle */
[type="checkbox"]:checked+.app .toggle {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    background-color: #34323D;
}

[type="checkbox"]:checked+.app .dark {
    opacity: 1;
    color: white;
}

[type="checkbox"]:checked+.app .light {
    opacity: 1;
    color: white;
}

/* Circle */
[type="checkbox"]:checked+.app .crescent {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    background: #26242E;
}

[type="checkbox"]:checked+.app .circle {
    background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}

[type="checkbox"]:checked+.app .main-circle {
    background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);
}


[type="checkbox"]:checked+.app .body {
    border-radius: 40px;
    ;
}

.menu {
    /*   background-color: blue; */
    font-size: 80%;
    opacity: .4;
    padding: .8rem 1.8rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/* :root {
    --hue: 223;
    --bg: hsl(var(--hue), 10%, 100%);
    --fg: hsl(var(--hue), 10%, 0%);
    --primary: hsl(var(--hue), 90%, 55%);
    --primaryT: hsla(var(--hue), 90%, 55%, 0);
    --transDur: 0.3s;
    font-size: calc(16px + (32 - 16) * (100vw - 320px) / (1280 - 320));
}

.theme {
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.theme__toggle {
    background-color: hsl(48, 90%, 85%);
    border-radius: 25% / 50%;
    box-shadow: 0 0 0 0.125em var(--primaryT);
    padding: 0.25em;
    width: 6em;
    height: 3em;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--transDur) ease-in-out, box-shadow 0.15s ease-in-out;
    position: relative;
    border: none;
}

.theme__toggle:before {
    background-color: hsl(48, 90%, 55%);
    border-radius: 50%;
    content: "";
    width: 2.5em;
    height: 2.5em;
    transition: background-color var(--transDur) ease-in-out, transform var(--transDur) ease-in-out;
    position: absolute;
    top: 0.25em;
    left: 0.25em;
}

.theme__toggle:checked {
    background-color: hsl(198, 90%, 15%);
}

.theme__toggle:checked:before {
    background-color: hsl(198, 90%, 55%);
    transform: translateX(3em);

}

.theme__icon-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5em;
}

.theme__icon {
    width: 1.5em;
    height: 1.5em;
    display: block;
}

.theme__icon svg {
    width: 100%;
    height: 100%;
}

@supports selector(:focus-visible) {
    .theme__toggle:focus {
        box-shadow: 0 0 0 0.125em var(--primaryT);
    }

    .theme__toggle:focus-visible {
        box-shadow: 0 0 0 0.125em var(--primary);
    }
} */