@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

.prompt-thin {
    font-family: "Prompt", serif;
    font-weight: 100;
    font-style: normal;
}

.prompt-extralight {
    font-family: "Prompt", serif;
    font-weight: 200;
    font-style: normal;
}

.prompt-light {
    font-family: "Prompt", serif;
    font-weight: 300;
    font-style: normal;
}

.prompt-regular {
    font-family: "Prompt", serif;
    font-weight: 400;
    font-style: normal;
}

.prompt-medium {
    font-family: "Prompt", serif;
    font-weight: 500;
    font-style: normal;
}

.prompt-semibold {
    font-family: "Prompt", serif;
    font-weight: 600;
    font-style: normal;
}

.prompt-bold {
    font-family: "Prompt", serif;
    font-weight: 700;
    font-style: normal;
}

.prompt-extrabold {
    font-family: "Prompt", serif;
    font-weight: 800;
    font-style: normal;
}

.prompt-black {
    font-family: "Prompt", serif;
    font-weight: 900;
    font-style: normal;
}

.prompt-thin-italic {
    font-family: "Prompt", serif;
    font-weight: 100;
    font-style: italic;
}

.prompt-extralight-italic {
    font-family: "Prompt", serif;
    font-weight: 200;
    font-style: italic;
}

.prompt-light-italic {
    font-family: "Prompt", serif;
    font-weight: 300;
    font-style: italic;
}

.prompt-regular-italic {
    font-family: "Prompt", serif;
    font-weight: 400;
    font-style: italic;
}

.prompt-medium-italic {
    font-family: "Prompt", serif;
    font-weight: 500;
    font-style: italic;
}

.prompt-semibold-italic {
    font-family: "Prompt", serif;
    font-weight: 600;
    font-style: italic;
}

.prompt-bold-italic {
    font-family: "Prompt", serif;
    font-weight: 700;
    font-style: italic;
}

.prompt-extrabold-italic {
    font-family: "Prompt", serif;
    font-weight: 800;
    font-style: italic;
}

.prompt-black-italic {
    font-family: "Prompt", serif;
    font-weight: 900;
    font-style: italic;
}

:root {
    --CarColor1: #eba52a;
    --CarColor2: #fdea63;
    --CarColor3: #c779187d;
}

body {
    overflow: hidden;
    height: 1080px;
    width: 100%;
}

* {
    font-family: "Prompt", serif;
    font-weight: 400;
}

::-webkit-scrollbar {
    width: 0px;
}

.body-container {
    transition: all 0.3s linear;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80vh;
    height: 50vh;
    transform: translate(-50%, -50%);
}


.switch {
    position: absolute;
    width: 5vh;
    height: 2.2vh;
    bottom: 1vh;
    left: 1vh;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #101010;
    box-shadow: inset 0vh 0vh 0vh 0.1vh #313131;
    -webkit-transition: .1s;
    transition: .1s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.2vh;
    width: 2vh;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    background-color: white;
    filter: drop-shadow(0vh 0vh 0.1vh #ffffff6b);
    -webkit-transition: .1s;
    transition: .1s;
}

input:checked+.slider {
    filter: drop-shadow(0vh 0vh 0.4vh #fdea63);
    background: linear-gradient(225deg, #fdea63, #eba52a);
    box-shadow: inset #fdea63 0vh 0vh 0vh 0.1vh;
}

input:checked+.slider:before {
    top: 50%;
    left: 70%;
    z-index: 2000;
}

.slider.round {
    border-radius: 0.2vh;
}

.slider.round:before {
    border-radius: 0.1vh;
}

.boxlight-Main {
    position: absolute;
    right: 0vh;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #121111;
    box-shadow: 0vh 0vh 0vh 0.15vh #313131;
    border-radius: 1vh;
}

.boxlight-Main::Before {
    content: '';
    position: absolute;
    left: -3vh;
    top: -3vh;
    width: 16vh;
    height: 16vh;
    background: var(--CarColor1);
    border-radius: 23vh;
    filter: blur(14vh);
}

.boxlight1 {
    position: absolute;
    left: 1.7vh;
    top: 38vh;
    width: 0.1vh;
    height: 7vh;
    background: var(--CarColor2);
    z-index: 20000000;
}

.boxlight2 {
    position: absolute;
    right: 1.8vh;
    top: 14vh;
    width: 0.1vh;
    height: 6vh;
    background: var(--CarColor2);
    z-index: 20000000;
}

.boxlight3 {
    position: absolute;
    left: 1.7vh;
    top: 10vh;
    width: 0.1vh;
    height: 2vh;
    background: var(--CarColor2);
    z-index: 20000000;
}

.boxlight4 {
    position: absolute;
    right: 1.8vh;
    top: 22vh;
    width: 0.1vh;
    height: 4vh;
    background: var(--CarColor2);
    z-index: 20000000;
}

.Box-Menu-X1,
.Box-Menu-X2,
.Box-Menu-X3 {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

.Header {
    position: absolute;
    right: 1.8vh;
    top: 1.8vh;
    width: 76.5vh;
    height: 4.5vh;
}

.Box-Menu-X2 {}

.TEXT-SXDFF {
    position: absolute;
    left: 0.5vh;
    top: 0vh;
    height: 4.5vh;
    width: 42vh;
    line-height: 4.7vh;
    color: white;
    font-size: 4.5vh;
    font-weight: 600;
    letter-spacing: 0.05vh;
    background: -webkit-linear-gradient(45deg, var(--CarColor1), #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.Box-Showlist {
    position: absolute;
    right: 0vh;
    top: 0vh;
    width: 32.6vh;
    height: 4.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1.1vh;
}

.BoxShowX {
    position: relative;
    width: 4.5vh;
    height: 4.5vh;
    background: #101010;
    box-shadow: inset 0vh 0vh 0vh 0.1vh #313131;
    border-radius: 0.6vh;
}

img.iconX {
    position: absolute;
    width: 3vh;
    height: 3vh;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.BoxShowX:hover {
    background: linear-gradient(225deg, #fdea6385, #eba52a85);
    box-shadow: inset var(--CarColor2) 0vh 0vh 0vh 0.1vh;
}

.Menu-list-A {
    position: absolute;
    left: 1.7vh;
    top: 7.8vh;
    width: 72.5vh;
    height: 36vh;
    padding: 2vh;
    box-shadow: inset rgb(49, 49, 49) 0vh 0vh 0vh 0.1vh;
    background: rgb(16, 16, 16);
    border-radius: 0.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5vh;
}

.MenuX1 {
    position: relative;
    width: 40vh;
    height: 11vh;
    border-radius: 0.5vh;
    background: linear-gradient(225deg, #fdea6300 0%, #eba52a14 100%);
    box-shadow: inset #eba52a24 0vh 0vh 0vh 0.1vh;
    transition: all 0.5s linear;
    overflow: hidden;
}

.MenuX2 {
    position: relative;
    width: 31vh;
    height: 11vh;
    border-radius: 0.5vh;
    background: linear-gradient(225deg, #fdea6300 0%, #eba52a14 100%);
    box-shadow: inset #eba52a24 0vh 0vh 0vh 0.1vh;
    transition: all 0.5s linear;
    overflow: hidden;
}

.MenuX3 {
    position: relative;
    width: 28vh;
    height: 11vh;
    border-radius: 0.5vh;
    background: linear-gradient(225deg, #fdea6300 0%, #eba52a14 100%);
    box-shadow: inset #eba52a24 0vh 0vh 0vh 0.1vh;
    transition: all 0.5s linear;
    overflow: hidden;
}

.MenuX4 {
    position: relative;
    width: 20.7vh;
    height: 11vh;
    border-radius: 0.5vh;
    background: linear-gradient(225deg, #fdea6300 0%, #eba52a14 100%);
    box-shadow: inset #eba52a24 0vh 0vh 0vh 0.1vh;
    transition: all 0.5s linear;
    overflow: hidden;
}

.MenuX5 {
    position: relative;
    width: 23.1vh;
    height: 11vh;
    border-radius: 0.5vh;
    background: linear-gradient(225deg, #fdea6300 0%, #eba52a14 100%);
    box-shadow: inset #eba52a24 0vh 0vh 0vh 0.1vh;
    transition: all 0.5s linear;
    overflow: hidden;
}

.MenuX1:hover,
.MenuX2:hover,
.MenuX3:hover,
.MenuX4:hover,
.MenuX5:hover,
.MenuX6:hover,
.MenuX7:hover,
.MenuX8:hover {
    background: linear-gradient(45deg, #fdea6300 0%, #eba52a45 100%);
    box-shadow: inset var(--CarColor1) 0vh 0vh 0vh 0.1vh;
    transition: all 0.5s linear;
}

.Menu-list-B {
    position: absolute;
    left: 1.7vh;
    top: 7.8vh;
    width: 72.5vh;
    height: 36vh;
    padding: 2vh;
    box-shadow: inset rgb(49, 49, 49) 0vh 0vh 0vh 0.1vh;
    background: rgb(16, 16, 16);
    border-radius: 0.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5vh;
}

.MenuX6 {
    position: relative;
    width: 35.5vh;
    height: 7.9vh;
    border-radius: 0.5vh;
    background: linear-gradient(225deg, #fdea6300 0%, #eba52a14 100%);
    box-shadow: inset #eba52a24 0vh 0vh 0vh 0.1vh;
    transition: all 0.5s linear;
    overflow: hidden;
}

img.Box-Img6 {
    position: absolute;
    left: 80%;
    top: 50%;
    width: 8vh;
    height: 8vh;
    transform: translate(-50%, -50%);
    filter: blur(1vh);
}

img.Box-Img5 {
    position: absolute;
    left: 80%;
    top: 50%;
    width: 15vh;
    height: 15vh;
    transform: translate(-50%, -50%);
    opacity: 0.2;
}

img.Box-Img7 {
    position: absolute;
    left: 80%;
    top: 50%;
    width: 8vh;
    height: 8vh;
    transform: translate(-50%, -50%);
}

.TextX1 {
    position: absolute;
    left: 1vh;
    top: 1vh;
    height: 2.5vh;
    width: 35vh;
    line-height: 2.5vh;
    color: white;
    font-size: 2.5vh;
    font-weight: 600;
    letter-spacing: 0.05vh;
    background: -webkit-linear-gradient(45deg, var(--CarColor1), #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.TextX2 {
    position: absolute;
    top: 4vh;
    left: 1vh;
    font-size: 1.5vh;
    color: white;
}

.Menu-list-C {
    position: absolute;
    left: 1.7vh;
    top: 7.8vh;
    width: 33.5vh;
    height: 36vh;
    padding: 2vh;
    box-shadow: inset rgb(49, 49, 49) 0vh 0vh 0vh 0.1vh;
    background: rgb(16, 16, 16);
    border-radius: 0.5vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5vh;
}

.Menu-list-CC {
    position: absolute;
    right: 1.7vh;
    top: 7.8vh;
    width: 33.5vh;
    height: 36vh;
    padding: 2vh;
    box-shadow: inset rgb(49, 49, 49) 0vh 0vh 0vh 0.1vh;
    background: rgb(16, 16, 16);
    border-radius: 0.5vh;
}

.MenuX8 {
    position: relative;
    width: 10vh;
    height: 10vh;
    border-radius: 0.5vh;
    background: linear-gradient(225deg, #fdea6300 0%, #eba52a14 100%);
    box-shadow: inset #eba52a24 0vh 0vh 0vh 0.1vh;
    transition: all 0.5s linear;
    overflow: hidden;
}

.Time-list,
.Weather-list {
    position: absolute;
    left: 2.2vh;
    top: 2.2vh;
    height: 35vh;
    width: 33vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5vh;
    overflow: hidden scroll;
}

.TextX7 {
    position: absolute;
    bottom: 0.5vh;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 1.2vh;
}

img.Box-Img8 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11vh;
    height: 11vh;
    transform: translate(-50%, -50%);
    opacity: 0.15;
}

img.Box-Img9 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7vh;
    height: 7vh;
    transform: translate(-50%, -50%);
    filter: blur(1vh);
}

img.Box-Img10 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8vh;
    height: 8vh;
    transform: translate(-50%, -50%);
}

img.Box-Img0 {
    position: absolute;
    left: 75%;
    top: 50%;
    width: 20vh;
    height: 20vh;
    transform: translate(-50%, -50%);
    opacity: 0.2;
}

img.Box-Img1 {
    position: absolute;
    left: 75%;
    top: 50%;
    width: 10vh;
    height: 10vh;
    transform: translate(-50%, -50%);
    filter: blur(1vh);
}

img.Box-Img2 {
    position: absolute;
    left: 75%;
    top: 50%;
    width: 10vh;
    height: 10vh;
    transform: translate(-50%, -50%);
}

.LightXww {
    position: absolute;
    right: -0.35vh;
    top: -0.35vh;
    width: 1vh;
    height: 1vh;
    background: red;
    border-radius: 5vh;
}

.TextXX1 {
    position: absolute;
    left: 1vh;
    top: 1vh;
    height: 2.5vh;
    width: 35vh;
    line-height: 2.5vh;
    color: white;
    font-size: 2.5vh;
    font-weight: 600;
    letter-spacing: 0.05vh;
    background: -webkit-linear-gradient(45deg, var(--CarColor1), #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.TextXX2 {
    position: absolute;
    top: 4.5vh;
    left: 7vh;
    font-size: 1.5vh;
    color: white;
}

.SSswitchX {
    position: absolute;
    width: 5vh;
    height: 2.2vh;
    bottom: 0vh;
    left: 13vh;
}

.TextXX3 {
    position: absolute;
    top: 4.5vh;
    left: 20vh;
    font-size: 1.5vh;
    color: white;
}

.Box-Img77 {
    position: absolute;
    left: 85%;
    top: 50%;
    width: 5vh;
    height: 5vh;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-color: #838383;
    border-radius: 0.2vh;
}

.Box-Img66 {
    position: absolute;
    left: 85%;
    top: 50%;
    width: 10vh;
    height: 10vh;
    transform: translate(-50%, -50%);
    background-size: cover;
    background-color: #494949;
    border-radius: 0.2vh;
    filter: blur(1vh);
}

.Box-Img55 {
    position: absolute;
    left: 85%;
    top: 50%;
    width: 14vh;
    height: 14vh;
    transform: translate(-50%, -50%);
    opacity: 0.2;
    background-size: cover;
    background-color: #838383;
    border-radius: 0.2vh;
}