style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Borel&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 {
    /* 🔵🔵🔵 */
    /* ⚠️ Please don't change the color value for this one (if ? then you have to change all colorCode in JavaScript file too */
    --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;

    /*Peela*/
    --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;

    /* Cyan */
    --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;

    /* Dark Kaala */
    --bg-color-dark: #505050;
    --accentLightTint-dark: #818181;
    --darkerColor-dark: #010208;
    --darkColor-dark: #434343;
    --textColorDark-dark: #010208;

    /* Global variables */
    --gap: 30px;
    --round: 30px;

    /* Shortcut bar */
    --max-shortcut-bar-width: 60vw;
    --shortcut-bar-gap-and-padding: 10px;
    --shortcut-size: 50px;
    --always-show-dock-background: 0;
}
.resultBox {
    max-height: 250px;
    overflow-y: auto;
   
    position: absolute;
    top: 1;
    left: 0;
    width: 100%;
    border-radius: var(--round);

    padding: 10px;
    scrollbar-width: none; /* For Firefox */

    /* Initially hidden */
    opacity: 0;
    z-index: -1000;
    transform: translateY(-70px);
    transition: opacity 0.5s ease, transform 0.5s ease, z-index 0.5s ease; 
    pointer-events: none; 
}

.resultBox::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Edge */
}

/* Visible state: when you want the result box to appear */
.resultBox.show {
    opacity: 1;
    visibility: visible; 
    transform: translateY(0); 
    z-index: 1000;
    pointer-events: all;
}

.resultItem {
    padding: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--textColorDark-blue);
}

.resultItem:hover {
   background-color: var(--darkColor-blue);
   border-radius: 15px;
   color: #fff;
}
.spacer {
    height: 50px; /* Adjust this value to create space */
}

/* Theme */
/* ⚫🟣🔵🔴🟡🟢🟠⚪ */

.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);
}

/* ⚫🟣🟡🔵🔴🟠⚪🟢 */

html {
    height: 100%;
    width: 100%;
    margin: 0;
}

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

.centerDiv {
    display: grid;
    grid-template-columns: auto auto;
    width: fit-content;
    height: fit-content;
    /* background-color: #17a638; */
    /* always leave enough space for the shortcuts bar at the bottom */
    padding-bottom: calc(var(--shortcut-size) + var(--gap) * 2);
}

/* ____________Clock_____________________---- */
#digitalClock {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    position: relative;
}
#analogClock {
    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);
    transition: transform 1.50s;
}

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

#minute {
    z-index: 9 !important;
    transition: transform 1.50s;
}

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

#second {
    background-color: #00000000;
    transition: transform 1s;
}

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

/* ---------------------- */
.ttteexxtt {
    position: absolute;
    /* background-color: yellow; */
    bottom: 18px;
    /*Because search engines has margin-bottom 20px*/
    left: 5px;
}

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

#date {
    font-size: 1.4rem;
}

.digidate{
    fill:var(--textColorDark-blue);
}

.amPm{
    fill:var(--textColorDark-blue);
}

.digiclock {
    text-anchor:middle;
    fill: var(--darkColor-blue);
    font-size: 8rem;
    font-weight: lighter;
    /* background-color: yellow; */
    margin: auto;
    width: fit-content;
}

#digihours {
    fill: var(--darkerColor-blue);
}

#digicolon {
    animation: blink 1s infinite;
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* __________end of clock___________________ */
.leftDiv {
    /* padding-right: 100px; */
    transform: translateX(-100px);
    /* background-color: rgba(102, 51, 153, 0.404); */
    /* height: fit-content; */
}

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

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

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

#conditionText {
    font-size: 1.2rem;
    color: var(--textColorDark-blue);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 372px; 
}

.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-size: 66%;
    background: var(--darkColor-blue) url("./svgs/humidity.svg") no-repeat center center;
    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);
    /*100-60px because humidityIconContainer is 40px Width and 20px is margin which is = to 60*/
    min-width: 42%;
    background-color: var(--darkColor-blue);
    border-radius: 100px;
    position: absolute;
    transition: width 1s;
}

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

/* End of _____________________- */

/* ------------Weather Pill------------- */
.rightDiv .topDiv .rAndakar {
    position: relative;
    height: 100%;
    aspect-ratio: 1/1;
    margin-left: var(--gap);
    animation: rAndAnm 1s;
    /* transition: rotate 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%;
    /* background-color: #17a638; */
}

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

#wIcon {
    width: 80px;
    height: 80px;
    margin-top: -13px;
    margin-left: -23px;
    /* background-color: olive; */
}

/* ------------End of Weather Pill------------- */

/* ________________________________________________________ */

/* _____________Searchbar___________________ */
.searchbar {
    margin-top: var(--gap);
    width: 100%;
    height: 60px;
    border-radius: var(--round);
    /* background-color: var(--accentLightTint-blue); */
    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 auto auto 20px;
    outline: none;
    border: none;
    background-color: #00000000;
    border-radius: 100px;
    padding: 0 40px;
    font-size: 1rem;
}

#enterBtn {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 40px;
    border-radius: 100px;
    padding: 0 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);
}

/* ________________End of Searchbar______________________ */

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

.searchWithCont .hint {
    /* background-color: var(--accentLightTint-blue); */
    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    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;
    gap: 20px;
    padding-left: 20px;
}

.searchEnginesContainer .search-engine {
    /* background-color: var(--accentLightTint-blue); */
    border-radius: 20px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.searchEnginesContainer .search-engine svg {
    width: 30px;
    height: 30px;
    background-color: var(--darkColor-blue);
    border-radius: 100%;
    margin-left: 4px;
    padding: 3px;

}

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

/* -----------Radio Button Customizing------------ */
.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;
    cursor: pointer;
    transition: .2s;
}

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

/* -----------Radio Button Customizing------------ */

/* -----------Theming Stuff------------------ */
/* ⚫🟣🔵🔴🟡🟢🟠⚪ */
/* .themingStuff {
    position: absolute;
    width: fit-content;
    height: 50px;
    right: var(--gap);
    bottom: var(--gap);
    display: flex;
    align-items: center;
}
.colorsContainer {
    background-color: var(--accentLightTint-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 10px;
    margin-right: 20px;
    border-radius: 100px;
    height: 50px;
    transition: all 0.6s;
    opacity: 0;
    width: 30px;
    height: 30px;
    transform: translateX(50px);
    z-index: 1;
}
.showColorPlate {
    opacity: 1;
    width: fit-content;
    height: 50px;
    transform: translateX(0px);
}
.colorsContainer input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    outline: none;
    margin-right: 10px;
    cursor: pointer;
}
.colorsContainer input[value="blue"] {
    background-color: #4382EC;
}
.colorsContainer input[value="red"] {
    background-color: #f91d1d;
}
.colorsContainer input[value="green"] {
    background-color: #17a638;
}
.colorsContainer input[value="orange"] {
    background-color: orange;
}
.colorsContainer input[value="purple"] {
    background-color: #b830de;
}
.colorsContainer input[value="pink"] {
    background-color: #e41b9e;
}
.colorsContainer input[type="radio"]:checked::after {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    background: url("./svgs/tick.svg") center center no-repeat;
    background-size: 74%;
}
.themingStuff .btn {
    height: 100%;
    aspect-ratio: 1/1;
    right: 0;
    border-radius: 100%;
    z-index: 2;
    cursor: pointer;
} */

/* -----------End of Theming Stuff------------------ */


/* ----------Shortcuts----------------- */

#shortcuts-section {
    pointer-events: none;
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(var(--shortcut-size) + var(--gap) * 2);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

#shortcuts-section .unfoldContainer {
    transition: transform 0.5s;
    position: absolute;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: center;
}

#shortcuts-section #unfoldShortcutsBtn {
    display: none;
    pointer-events: auto;
    fill: var(--textColorDark-blue);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1;
    transition: 0.2s all;
    transform-origin: 50% 25%;
}

#shortcuts-section .wrapper {
    position: relative;
    height: fit-content;
    display: inline-flex; /* make sure elements are next to each other */
    align-items: stretch; /* make sure both elements grow to the same height */
    width: fit-content;
}

/* Invisible element tracking height changes */
#shortcuts-section #flexMonitor {
    position: absolute;
    height: 100%; /* This will match the height of .shortcutsContainer, which it is supposed to monitor */
    visibility: hidden;
 }

/* Invisible element to get standard height */
#shortcuts-section #defaultMonitor {
    position: absolute;
    /* This is the standard height of one row */
    height: calc(var(--shortcut-size) + var(--gap) + var(--shortcut-bar-gap-and-padding));
    visibility: hidden;
 }

.shortcutsContainer {
    pointer-events: auto;
    transition: transform 0.5s;
    margin-top: calc(var(--gap) - var(--shortcut-bar-gap-and-padding));
    max-width: calc(
            var(--max-shortcut-bar-width) -
            mod(
                var(--max-shortcut-bar-width) - var(--shortcut-bar-gap-and-padding),
                var(--shortcut-size) + var(--shortcut-bar-gap-and-padding)
            )
    );
    display: flex;
    flex-wrap: wrap;
    padding: var(--shortcut-bar-gap-and-padding);
    justify-content: left;
    width: fit-content;
    gap: var(--gap) var(--shortcut-bar-gap-and-padding);
}

.shortcutsContainer::before {
    border-radius: 34px;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--accentLightTint-blue);
    z-index: -1;
    opacity: var(--always-show-dock-background);
    transition: opacity 0.5s;
    pointer-events: none;
}

.shortcutsContainer.showBackground::before {
    opacity: 1;
}

.shortcutsContainer .shortcuts {
    position: relative;
    transition: all 0.3s;
}

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

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

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

.shortcutsContainer .shortcuts a {
    border-radius: 100px;
    display: block;
    height: var(--shortcut-size);
    width: var(--shortcut-size);
}

.shortcutsContainer .shortcuts a:has(svg) {
    background-color: var(--accentLightTint-blue);
}

.shortcutsContainer .shortcuts a:has(img) {
    background-color: var(--darkColor-blue);
}

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

.shortcutsContainer .shortcuts .shortcutLogoContainer {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.shortcutsContainer .shortcuts .shortcutLogoContainer img {
    height: 100%;
    width: 100%;
    border-radius: 100%;
}


/* ----------end of Shortcuts----------------- */

/* -----------Ai-Tools----------------- */
.aiToolsCont {
    height: 50px;
    width: fit-content;
    /* background-color: yellow; */
    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: 0 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: flex; */
    display: none;
    /* background-color: orange; */
    position: relative;
    margin-left: 30px;
    transition: all 500ms;
    gap: 0;
    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: 0 16px;
    border-radius: 100px;
    text-decoration: none;
    color: var(--textColorDark-blue);
    font-size: 1rem;
}

.aiToolsCont .toolsCont .tIcon {
    width: 26px;
    height: 26px;
    /* background-color: turquoise; */
    margin-right: 12px;
}


/* -----------End of Ai-Tools---------- */


/* -------media query ------------------- */

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

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

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

    .centerDiv {
        /* display: grid; */
        grid-template-columns: auto;
        /* width: fit-content; */
        /* height: 500px; */
        /* background-color: orange; */
        position: absolute;
        left: 0;
        right: 0;
        margin: var(--gap) auto auto;
    }

    .leftDiv {
        transform: translateX(0px);
        /* background-color: green; */
        margin-bottom: var(--gap);
    }

    .rightDiv {
        /* position: relative;
        width: 640px; */
        transform: translateX(0px);
        /* background-color: rgba(0, 0, 255, 0.159); */
    }

    .ttteexxtt {
        /* background-color: yellow; */
        height: fit-content;
        width: fit-content;
        bottom: 0;
        top: 0;
        left: 300px;
        /*Because Clock width is 300px*/
        margin: auto auto auto var(--gap);

    }
}

/* ---------------Menu-bar-css---------------- */
.menuBar {
    background-color: #0000004f;
    backdrop-filter: blur(15px) saturate(170%);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    /*we are increasing opacity in js file*/
    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);
    /*30px*/
    height: var(--round);
    /* background-color: #17a638; */
    position: absolute;
    left: -30px;
    /* transform: translateX(-100%); */
}

.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;
    /* background-color: yellow; */
    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);
    /*for this 👁️ look above at🚦🛺 🚜*/
    /* background-color: oldlace; */
    transition: all 0.6s;
    transform: translateX(100%);
    opacity: 0;
    overflow-y: scroll; /* Allow vertical scrolling only */
    overflow-x: hidden; /* Hide horizontal overflow */
}

.menuCont .optCont .page {
    width: 100%;
    padding: 0 var(--gap) var(--gap) var(--gap);
    position: absolute;
    transition: all 0.6s;
}

/* -----------Scrollbar for menu---------------- */
/* For WebKit browsers (Chrome, Safari) */
.menuCont .optCont::-webkit-scrollbar {
    width: 2px;
    /* Width of the scrollbar */
}

/* Track */
.menuCont .optCont::-webkit-scrollbar-track {
    background: transparent;
    /* Background of the track */
}

/* Handle */
.menuCont .optCont::-webkit-scrollbar-thumb {
    background: var(--darkColor-blue);
    /* Color of the scrollbar handle */
    border-radius: 2px;
    /* Rounded corners for the scrollbar handle */
}

/* For Firefox */
.menuCont .optCont {
    scrollbar-width: thin;
    /* Makes the scrollbar thin */
    scrollbar-color: var(--darkColor-blue) transparent;
    /* Handle color and track color */
}

/* -------------End of Scrollbar for menu-------------- */


.menuBar .optCont .tilesCont {
    width: 100%;
    height: 50px;
    /* background-color: #17a638; */
    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;
}

/* --- 🔴⚪🟡style for toggle buttons---- */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide the default checkbox input */
.switch input {
    display: none;
}

/* Styling for the slider */
.toggle {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-color-blue);
    /* Background color when off */
    transition: 0.4s;
    border-radius: 34px;
}

/* Styling for the slider when it's in the "on" position */
.toggle:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--accentLightTint-blue);
    /* Slider color when on */
    transition: 0.4s;
    border-radius: 50%;

}

#shortcutEditButton {
    fill: var(--textColorDark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 34px;
    cursor: pointer;
    transition: 0.3s all;
    margin: 0 auto;
    background: none;
    height: 100%;
    width: 100%;
}

.toggleTextsCont .ttcont.inactive {
    opacity: 0.5;
    pointer-events: none;
}

/* Apply styles when the input is checked (on) */
input:checked + .toggle {
    background-color: var(--darkColor-blue);
    /* Background color when on */
}

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

/* --- END OF 🔴⚪🟡style for toggle buttons---- */

.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: 0 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;
}

.bottom {
    /* background-color: #17a638; */
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

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

.bottom button {
    border: none;
    color: #fff;
    background-color: var(--darkColor-blue);
    padding: 6px 20px;
    font-size: 1rem;
    border-radius: 100px;
    cursor: pointer;
}
.resetbtn {
    width: -webkit-fill-available;
    border: none;
    color: #fff;
    background-color: var(--darkColor-blue);
    padding: 6px 20px;
    font-size: 1rem;
    border-radius: 100px;
    cursor: pointer;
}
.topBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--accentLightTint-blue);
}

#backButton {
    fill: var(--textColorDark-blue);
    border: none;
    background: none;
    cursor: pointer;
}

.rightButtons {
    display: flex;
    gap: 24px;
}

#resetButton,
#newShortcutButton {
    fill: var(--textColorDark-blue);
    border: none;
    background: none;
    cursor: pointer;
}

#newShortcutButton.inactive {
    opacity: 0.5;
    pointer-events: none;
}

.pageTitle {
    margin: var(--gap) 0;
    width: 100%;
    font-size: 1.8rem;
    color: var(--textColorDark-blue);
}

.shortcutSettingsEntry {
    width: 100%;
    display: flex;
    height: 50px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.shortcutSettingsEntry input {
    width: calc(100% - var(--gap));
    background: none;
    border: none;
}

.shortcutSettingsEntry .shortcutName {
    font-size: 1.2rem;
    color: var(--textColorDark-blue);
    text-overflow: ellipsis;
}

.shortcutSettingsEntry .URL {
    font-size: 0.9rem;
    color: var(--textColorDark-blue);
    opacity: 0.86;
    margin-top: -3px;
    text-overflow: ellipsis;
}

.delete button {
    fill: var(--textColorDark-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 34px;
    background: var(--bg-color-blue);
    border: none;
    border-radius: 34px;
    cursor: pointer;
    transition: 0.3s all;
}

.delete button:hover {
    fill: white;
    background: var(--darkColor-blue);
}

.delete button.inactive {
    opacity: 0.5;
    pointer-events: none;
}

.addShortcutContainer button {
    fill: white;
    background: var(--darkColor-blue);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 34px;
    border: none;
    border-radius: 34px;
    cursor: pointer;
    transition: 0.3s all;
}
/* Placeholder InputText color*/
#userproxy{
    color:var(--textColorDark-blue);
}
#userLoc{
    color:var(--textColorDark-blue);
}
#userAPI{
    color:var(--textColorDark-blue);
}
/* ---------------Menu-bar-css---------------- */

/* --------------Theming stuff------------------ */
.themingStuff, .languageSection {
    width: 100%;
    height: 50px;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    gap: var(--gap);
    /* background-color: yellow; */
}

.languageSelector {
    background-color: #ffffffe8;
    align-items: center;
    justify-content: center;
    height: fit-content;
    /* width: 80%; */
    width: 240px;
    border: 2px solid transparent; /* adding transparent border on focus it will be turned to theme color*/
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 divs in the first row */
    grid-auto-rows: auto;
    grid-gap: 10px;
    padding: 12px;
    color: var(--textColorDark-blue);
    /* padding-right: 0px; */
    border-radius: 26px;
    appearance: none; /* Remove default browser styles */
        -webkit-appearance: none; /* For Safari */
        -moz-appearance: none; /* For Firefox */
    cursor: pointer;
    padding-left: 13px;
}

.languageSelector:focus {
    border: 2px solid var(--darkColor-blue); /* color matching border on focus */
    outline: none; /* Removes the default outline */
}

.colorsContainer {
    background-color: #ffffffe8;
    align-items: center;
    justify-content: center;
    height: fit-content;
    width: fit-content;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* 5 divs in the first row */
    grid-auto-rows: auto;
    grid-gap: 10px;
    padding: 10px;
    /* padding-right: 0px; */
    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;
    /* margin-right: 10px; */
    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;
}

/* -----------end of theming stuff---------------- */

#menuButton {
    position: fixed;
    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 {
    position: relative;
     /* position: absolute; */
    bottom: var(--gap);
    width: 42px;
    height: 42px; 
    max-width: 100%; /* Set max-width to fit-content initially */
    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;
    /* Hide the overflow when content expands */
    transition: all 0.4s;
    /* Transition the max-width property */
    cursor: pointer;
    margin-top: calc(69px + 20px);
}

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

#menuCloseButton::after {
    content: var(--hover-close-text, "Close");
    padding-right: 12px;
    opacity: 0;
    transform: translateX(-20px);
    animation: .6s menuCloseButtonHoverReverse forwards;
    z-index: 1;
}

#menuCloseButton:hover::after {
    content: var(--hover-close-text, "Close");
    padding-right: 12px;
    padding-left: 36px;
    /* width: 32px; */
    /* Expand the max-width on hover */
    animation: .6s menuCloseButtonHover forwards;
    animation-delay: .1s;
}

@keyframes menuCloseButtonHover {
    0%{
        opacity: 0;
        transform: translateX(-20px);
    }
    100%{
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes menuCloseButtonHoverReverse {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-10px);
    }
}

#menuCloseButton .icon{
    position: absolute;
    left: 6px;
    background-color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    /* transform: translateX(30px); */
    transition: .4s;
    z-index: 2;
}

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

#menuCloseButton:hover .icon{
    transform: translateX(0) rotate(90deg);
}