@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

@font-face {
    font-family: 'poppins';
    src: url('/fonts/Poppins-Regular.ttf') format('truetype');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', 'Poppins', sans-serif;
}

:root {
    --bg-color-blue: #BBD6FD;
    --accentLightTint-blue: #E2EEFF;
    --darkerColor-blue: #3569b2;
    --darkColor-blue: #4382EC;
    --textColorDark-blue: #1b3041;

    --bg-color-red: #FDBDBD;
    --accentLightTint-red: #ffe7e7;
    --darkerColor-red: #B23535;
    --darkColor-red: #EC4343;
    --textColorDark-red: #411B1B;

    --bg-color-yellow: #edea8c;
    --accentLightTint-yellow: #fff2c2;
    --darkerColor-yellow: #CCA243;
    --darkColor-yellow: #f4d837;
    --textColorDark-yellow: #5B5428;

    --bg-color-green: #C7E4C7;
    --accentLightTint-green: #E1F1E1;
    --darkerColor-green: #458245;
    --darkColor-green: #5CBA5C;
    --textColorDark-green: #1B411B;

    --bg-color-cyan: #9bffff;
    --accentLightTint-cyan: #d5ffff;
    --darkerColor-cyan: #5E9CA0;
    --darkColor-cyan: #00CED1;
    --textColorDark-cyan: #08354B;

    --bg-color-pink: #F9C8D6;
    --accentLightTint-pink: #FFEBF2;
    --darkerColor-pink: #B24B64;
    --darkColor-pink: #EC5E78;
    --textColorDark-pink: #411B28;

    --bg-color-orange: #FFD8B2;
    --accentLightTint-orange: #FFEDD5;
    --darkerColor-orange: #B26D3E;
    --darkColor-orange: #EC844D;
    --textColorDark-orange: #412B1E;

    --bg-color-purple: #DAC2E8;
    --accentLightTint-purple: #E9E2F3;
    --darkerColor-purple: #724B8F;
    --darkColor-purple: #9563B5;
    --textColorDark-purple: #2D1B3E;

    --bg-color-dark: #000000;
    --accentLightTint-dark: #323232;
    --darkerColor-dark: #ffffff;
    --darkColor-dark: #505050;
    --textColorDark-dark: #FFFFFF;

    --gap: 30px;
    --round: 30px;
}

.accentColor {
    fill: var(--darkColor-blue);
}

.bgLightTint {
    fill: var(--accentLightTint-blue);
    background-color: var(--accentLightTint-blue);
}

.lessDark {
    background-color: var(--bg-color-blue);
    fill: var(--bg-color-blue);
}

body {
    background-color: var(--bg-color-blue);
    color: var(--textColorDark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}

.centerDiv {
    display: grid;
    grid-template-columns: auto auto;
    width: fit-content;
    height: fit-content;
}

#clock {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    position: relative;
}

#clock svg {
    position: absolute;
    animation: clockAnm 1s;
}

@keyframes clockAnm {
    from {
        transform: rotate(40deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.clock .centerPoint {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.clock .centerPoint .sui {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color: var(--darkColor-blue);
    top: -90px;
    transform-origin: bottom;
    border-radius: 10px;
}

#hour {
    height: 80px;
    top: -70px;
    background-color: var(--darkerColor-blue);
    transform: rotate(90deg);
}

#hour::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 30px;
    background-color: var(--darkerColor-blue);
    bottom: -10px;
    border-radius: 100px;
}

#minute {
    z-index: 9 !important;
}

#minute::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 30px;
    background-color: var(--darkColor-blue);
    bottom: -10px;
    border-radius: 100px;
}

#second {
    background-color: #00000000;
}

#second::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--darkColor-blue);
    top: -28px;
    border-radius: 100%;
}

.ttteexxtt {
    position: absolute;
    bottom: 18px;
    left: 5px;
}

#userText {
    font-family: 'poppins';
    font-size: 1.4rem;
    margin-bottom: 10px;
}

#date {
    font-size: 1.4rem;
}

.leftDiv {
    transform: translateX(-100px);
}

.rightDiv {
    position: relative;
    width: 640px;
    transform: translateX(100px);
}

.rightDiv .topDiv {
    height: 180px;
    height: 196px;
    display: flex;
    justify-content: flex-end;
}

.rightDiv .topDiv .lrectangle {
    height: 100%;
    width: 100%;
    border-radius: var(--round);
    padding: 20px;
    position: relative;
}

#conditionText {
    font-size: 1.2rem;
    color: var(--textColorDark-blue);
}

.cconnt {
    width: calc(100% - 40px);
    bottom: 20px;
    height: fit-content;
    position: absolute;
    font-size: 1rem;
}

.tilesContainer {
    height: 50px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.tilesContainer .tiles {
    background-color: #ffffff;
    border-radius: 22px;
    position: relative;
    height: 50px;
}

.tilesContainer .location {
    background-color: var(--darkColor-blue);
}

.tilesContainer .location .location_spn {
    color: #fff;
}

.tilesContainer .tiles .icon {
    height: 100%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tilesContainer .tiles span {
    position: absolute;
    top: 0;
    left: 46px;
    bottom: 0;
    margin: auto;
    color: var(--textColorDark-blue);
    height: fit-content;
}


.humidityBar {
    border-radius: 20px;
    height: 40px;
    width: 100%;
    margin-bottom: 20px;
    position: relative;
}

.humidityBar::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 40px;
    background: url("./svgs/humidity.svg") center center no-repeat;
    background-size: 66%;
    background-color: var(--darkColor-blue);
    right: 0;
    border-radius: 100%;
}

.humidityBar .thinLine {
    position: absolute;
    width: calc(100% - 60px);
    background-color: white;
    height: 6px;
    border-radius: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.humidityBar .slider {
    height: 100%;
    width: calc(10% - 60px);
    min-width: 42%;
    background-color: var(--darkColor-blue);
    border-radius: 100px;
    position: absolute;
    transition: width 1s;
}

#humidityLevel {
    color: #fff;
    width: fit-content;
    position: absolute;
    bottom: 0;
    top: 0;
    margin: auto;
    left: 20px;
    height: fit-content;
}

.rightDiv .topDiv .rAndakar {
    position: relative;
    height: 100%;
    aspect-ratio: 1/1;
    margin-left: var(--gap);
    animation: rAndAnm 1s;
}

@keyframes rAndAnm {
    from {
        transform: rotate(-45deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.rightDiv .topDiv .rAndakar .wInfo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateX(14px);
    width: 100px;
    height: 80%;
}

#temp {
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--darkerColor-blue);
    margin: auto;
    width: fit-content;
}

#wIcon {
    width: 80px;
    height: 80px;
    margin-top: -20px;
    margin-left: -40px;
}

.searchbar {
    margin-top: var(--gap);
    width: 100%;
    height: 60px;
    border-radius: var(--round);
    position: relative;
    outline: 2px solid #00000000;
    transition: outline 0.3s;
}

.searchbar.active {
    outline: 2px solid var(--darkColor-blue);
}

.searchbar .searchIcon {
    width: 30px;
    height: 30px;
    position: absolute;
    margin-top: 16px;
    margin-left: 16px;
}

#searchQ {
    display: block;
    position: absolute;
    height: 80%;
    width: calc(100% - 120px);
    top: 0;
    bottom: 0;
    margin: auto;
    margin-left: 20px;
    outline: none;
    border: none;
    background-color: #00000000;
    border-radius: 100px;
    padding: 0px 40px;
    font-size: 1rem;
}

#enterBtn {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 40px;
    border-radius: 100px;
    padding: 0px 26px;
    border: none;
    font-size: 1.1rem;
    background-color: var(--darkColor-blue);
    color: white;
    transition: all 0.3s;
}

#enterBtn:hover {
    background-color: var(--darkColor-blue);
    color: #fff;
    cursor: pointer;
}

#enterBtn:active {
    transform: scale(0.9);
}

.searchWithCont {
    margin-top: var(--gap);
    border-radius: var(--round);
    position: relative;
    display: flex;
    font-size: 1rem;
}

.searchWithCont .hint {
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    margin-right: 16px;
    border-radius: var(--round);
}

.searchWithCont .hint::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 100%;
    background-color: var(--accentLightTint-blue);
    border-radius: 3px;
    right: -20px;
}

.searchEnginesContainer {
    display: flex;
    flex-wrap: wrap;
}

.searchEnginesContainer .search-engine {
    border-radius: 20px;
    height: fit-content;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    margin-bottom: 20px;
    position: relative;
}

.searchEnginesContainer .search-engine svg {
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 100%;
    margin-left: 4px;

}

.searchEnginesContainer .search-engine label {
    margin: 0px 10px;
    margin-right: 16px;
}

.search-engine input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgb(255, 255, 255);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    outline: none;
    margin-right: 8px;
}

.search-engine input[type="radio"]:checked {
    background-color: var(--darkColor-blue);
}

.shortcutsContainer {
    display: flex;
    height: 50px;
    width: fit-content;
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--gap);
    margin: auto;
    gap: 10px;
}

.shortcutsContainer .shortcuts {
    position: relative;
    transition: all 0.3s ease-in-out;
}

.shortcutsContainer .shortcuts:hover {
    transform: translateY(-10px) scale(1.06);
    box-shadow: 0 5px 10px #ffffffc5;
    border-radius: 100px;
}

.shortcuts .shortcut-name {
    visibility: hidden;
    position: absolute;
    bottom: -30px;
    right: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    width: fit-content;
    text-align: center;
    color: var(--textColorDark-blue);
    opacity: 0;
    transition: all 0.3s;
    font-size: 1rem;
}

.shortcuts:hover .shortcut-name {
    visibility: visible;
    opacity: 1;
}

.shortcutsContainer .shortcuts a {
    background-color: var(--accentLightTint-blue);
    border-radius: 100px;
    display: block;
    height: 50px;
    width: 50px;
    width: fit-content;
}

.shortcutsContainer .shortcuts a svg {
    height: 100%;
    width: 100%;
}

.aiToolsCont {
    height: 50px;
    width: fit-content;
    overflow-x: hidden;
    border-radius: 100px;
    position: absolute;
    left: var(--gap);
    bottom: var(--gap);
    margin: auto;
    display: flex;
}

.aiToolsCont .hangno {
    background-color: var(--accentLightTint-blue);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    border-radius: 100px;
    z-index: 2;
}

.aiToolsCont .hangno .icon {
    width: 26px;
    height: 26px;
    margin-right: 12px;
}

.aiToolsCont .hangno .label {
    font-size: 1rem;
    color: var(--textColorDark-blue);
    cursor: default;
}

.aiToolsCont .toolsCont {
    display: none;
    position: relative;
    margin-left: 30px;
    transition: all 500ms;
    gap: 0px;
    transform-origin: left;
    transform: scale(0.5) translateX(-70px);
    opacity: 0.2;
}

.aiToolsCont .toolsCont::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 6px;
    background-color: var(--accentLightTint-blue);
    border-radius: 6px;
    left: -18px;
}

.aiToolsCont .toolsCont a {
    background-color: var(--accentLightTint-blue);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 16px;
    border-radius: 100px;
    text-decoration: none;
    color: var(--textColorDark-blue);
    font-size: 1rem;
}

.aiToolsCont .toolsCont .tIcon {
    width: 26px;
    height: 26px;
    margin-right: 12px;
}

@media screen and (max-width: 1400px) {
    .leftDiv {
        transform: translateX(-50px);
    }

    .rightDiv {
        transform: translateX(50px);
    }
}

@media screen and (max-width: 1200px) {
    body {
        display: block;
    }

    .centerDiv {
        grid-template-columns: auto;
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        margin-top: var(--gap);


    }

    .leftDiv {
        transform: translateX(0px);
        margin-bottom: var(--gap);
    }

    .rightDiv {
        transform: translateX(0px);
    }

    .ttteexxtt {
        height: fit-content;
        width: fit-content;
        bottom: 0;
        top: 0;
        margin: auto;
        left: 300px;
        margin-left: var(--gap);

    }
}

.menuBar {
    background-color: #0000004f;
    backdrop-filter: blur(15px) saturate(170%);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.5s;
    overflow: hidden;
}

.menuBar .menuCont {
    position: absolute;
    right: 0;
    height: 100%;
    width: 400px;
    transition: all 0.5s;
    transform: translateX(100%);
    background-color: var(--accentLightTint-blue);
    border-bottom-left-radius: var(--round);
}

.menuBar .menuCont .topRounder {
    width: var(--round);
    height: var(--round);
    position: absolute;
    left: -30px;
}

.menuCont .topDiv {
    width: 100%;
    height: 140px;
    background-color: var(--bg-color-blue);
    position: relative;
}

.menuCont .topDiv::after {
    position: absolute;
    content: "";
    width: 100%;
    height: var(--gap);
    background-color: var(--accentLightTint-blue);
    border-top-left-radius: var(--round);
    border-top-right-radius: var(--round);
    bottom: 0;
}

.menuCont .topDiv h1 {
    font-size: 1.6rem;
    width: fit-content;
    height: fit-content;
    color: var(--textColorDark-blue);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: translateY(-50%);
}

.menuCont .optCont {
    width: 100%;
    height: calc(100% - 140px);
    padding: var(--gap);
    padding-top: 0px;
    transition: all 0.6s;
    transform: translateX(100%);
    opacity: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.menuCont .optCont::-webkit-scrollbar {
    width: 2px;
}

.menuCont .optCont::-webkit-scrollbar-track {
    background: transparent;
}

.menuCont .optCont::-webkit-scrollbar-thumb {
    background: var(--darkColor-blue);
    border-radius: 2px;
}

.menuCont .optCont {
    scrollbar-width: thin;
    scrollbar-color: var(--darkColor-blue) transparent;
}

.menuBar .optCont .tilesCont {
    width: 100%;
    height: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
}

.tilesCont .tiles {
    background-color: var(--darkColor-blue);
    border-radius: 20px;
    font-size: 1rem;
    color: var(--accentLightTint-blue);
    display: flex;
    align-items: center;
    text-decoration: none;
}

.tilesCont .tiles .icon {
    width: 24px;
    height: 24px;
    margin-left: 13px;
    margin-right: 13px;
}

.divider {
    height: 6px;
    width: 100px;
    background-color: #fff;
    border-radius: 3px;
    margin: 20px auto;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    display: none;
}

.toggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-color-blue);
    transition: 0.4s;
    border-radius: 34px;
}

.toggle:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--accentLightTint-blue);
    transition: 0.4s;
    border-radius: 50%;

}

input:checked+.toggle {
    background-color: var(--darkColor-blue);
}

input:checked+.toggle:before {
    transform: translateX(26px);
}

.toggleTextsCont {
}

.toggleTextsCont .ttcont {
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.unflex {
    display: block !important;
}

.ttcont input {
    width: 100%;
    margin-top: 6px;
    height: 30px;
    border-radius: 10px;
    border: none;
    outline: none;
    padding: 0px 11px;
}

.ttcont .texts .bigText {
    font-size: 1.2rem;
    color: var(--textColorDark-blue);
}

.ttcont .texts .infoText {
    font-size: 0.9rem;
    color: var(--textColorDark-blue);
    opacity: 0.86;
    margin-top: -3px;
}

.bottomer {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.bottomer a {
    text-decoration: none;
    color: var(--darkColor-blue);
    font-size: 1rem;
}

.bottomer button {
    border: none;
    color: #fff;
    background-color: var(--darkColor-blue);
    padding: 6px 20px;
    font-size: 1rem;
    border-radius: 100px;
    cursor: pointer;
}

.themingStuff {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    gap: var(--gap);
}

.languageSelector {
    background-color: var(--accentLightTint-blue);
    background-color: #ffffffe8;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    height: fit-content;
    width: 80%;
    border: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: 80%;
    padding: 10px;
    border-radius: 26px;


}

.colorsContainer {
    background-color: var(--accentLightTint-blue);
    background-color: #ffffffe8;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    height: fit-content;
    width: fit-content;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: auto;
    grid-gap: 10px;
    width: fit-content;
    padding: 10px;
    border-radius: 26px;


}

.colorsContainer input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    height: 36px;
    width: 36px;
    border-radius: 18px;
    outline: none;
    cursor: pointer;
}

.colorsContainer input[value="blue"] {
    background-color: #4382EC;
}

.colorsContainer input[value="yellow"] {
    background-color: #f3f05a;
}

.colorsContainer input[value="red"] {
    background-color: #f91d1d;
}

.colorsContainer input[value="green"] {
    background-color: #17a638;
}

.colorsContainer input[value="cyan"] {
    background-color: #2acdf5;
}

.colorsContainer input[value="orange"] {
    background-color: orange;
}

.colorsContainer input[value="purple"] {
    background-color: #b830de;
}

.colorsContainer input[value="pink"] {
    background-color: #e41b9e;
}

.colorsContainer input[value="dark"] {
    background-color: #282828;
}

.colorsContainer input[type="radio"]:checked::after {
    position: absolute;
    content: "";
    width: 36px;
    height: 36px;
    background: url("./svgs/tick.svg") center center no-repeat;
    background-size: 74%;
}

.themingStuff .btn {
    background-color: #ffffffe8;
    height: 100%;
    aspect-ratio: 1/1;
    right: 0;
    border-radius: 100%;
    z-index: 2;
    cursor: pointer;
}

.languageIcon {
    background-color: #ffffffe8;
    height: 100%;
    aspect-ratio: 1/1;
    right: 0;
    border-radius: 100%;
    z-index: 2;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

#darkTheme {
    grid-column: span 2;
    width: 82px;
}


#menuButton {
    position: absolute;
    right: var(--gap);
    bottom: var(--gap);
    width: 50px;
    height: 50px;
    background-color: var(--accentLightTint-blue);
    border-radius: 100%;
    cursor: pointer;
}

#menuButton::after {
    position: absolute;
    content: "";
    width: 62%;
    height: 62%;
    border-radius: 100%;
    border: 4px solid var(--darkColor-blue);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#menuButton::before {
    position: absolute;
    content: "";
    width: 40%;
    height: 40%;
    border-radius: 100%;
    background-color: var(--darkColor-blue);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#menuCloseButton {
    bottom: var(--gap);
    width: 42px;
    max-width: 100%;
    background-color: var(--bg-color-blue);
    color: var(--textColorDark-blue);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border-radius: 100px;
    overflow: hidden;
    transition: all 0.4s;
    cursor: pointer;
    margin-top: 69px;
}

#menuCloseButton:hover {
    width: 105px;
    background-color: #fff;
}

#menuCloseButton:hover::after {
    content: "Close";
    padding-right: 12px;
}



#menuCloseButton .icon {
    background-color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 100px;
}

#menuCloseButton .icon:hover {
    transition: all 0.2s;
    transform: rotate(90deg);
}