:root {
    --yellow1: #fcf25c;
    --yellow2: #fff7d6;
    --yellow3: #867f17;
    --yellow4: #d3c71d;

    --cherry1: #ff0039;
    --cherry2: #ffbada;
    --cherry3: #b60027;

    --cyan1: #00ffc8;
    --cyan2: #00a07d;
    --cyan3: #c4fff2;
}

@media (max-width: 634px){
    #main_div {
        padding-top: 50px;
    }
}
@media (max-width: 1152px) {
  #extension-new-popup {
    visibility: hidden;
  }
}

body {
    margin: 0;
    overflow-x: hidden;
    background: linear-gradient(var(--yellow2), var(--yellow1)) no-repeat center bottom fixed;
    background-size: cover;
    color: var(--yellow3);
}

#toggle_example {
    display: flex;
    position: fixed;
    margin: auto;
    right: 20px; top: 50px;
    justify-content: space-between;
    flex-direction: column;
    width: calc(15vw + 30px);
    padding: 15px;
    border-radius: 15px;
    text-align: center;
}
#toggle_example input {
    width: auto !important;
}
#x_Button {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 0px;
    padding-top: 0px;
    height: 18px;
    top: 4px;
    right: 0px;
    color: #0000 !important;
}
#x_Button::before {
    content: "X";
    position: absolute;
    color: var(--cyan2) !important;
    top: -5px;
}
#text_label::placeholder {
    color: #867f17;
}

#text_label:focus {
    border: solid 2px #fcf25c;
    outline: none;
}

#custom_css {
    position: fixed;
    right: 32px;
    top: 240px;
    display: flex;
    margin: auto;
    width: 252px;
    background-color: none;
    text-align: center;
    padding: 20px 0px 0px 0px;
    border-radius: 7px;
    min-height: 40px;
    resize: vertical;
    max-height: calc(52vh - 40px);
}
#cssTextArea {
    min-height: 40px;
    resize: vertical;
    height: 146px;
    max-height: calc(52vh - 84px);
}
.fixed-item {
    position: absolute;
    top: 0;
    right: 5px;
}
#styleSelector {
    position: fixed;
    bottom: 0px;
    left: 0px;
}

.bubble {
    background: linear-gradient(#2c2c2c, #cfcfcf);
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
}
.cherry, #cssTextArea::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--cherry2), var(--cherry1));
    color: var(--cherry3);
    border-color: var(--cherry1);
}
.cherry:focus {
    outline: none;
    border: solid 2px var(--cherry3);
}
.yellow {
    background: linear-gradient(#fff7d6, #fcf25c);
    border: solid 2px #fcf25c;
    color: #867f17;
}
.yellow-text {
    color: #d3c71d;
}
.cyan {
    background: linear-gradient(var(--cyan3), var(--cyan1));
    color: var(--cyan2);
    border-color: var(--cyan1);
} .cyan:focus {
    outline: none;
    border: solid 2px var(--cyan2);
} #x_Button:focus { border-bottom: none !important; }


#cog {
    position: fixed;
    right: 5px;
    top: 30px;
    cursor: pointer;
}

#author-p {
    position: fixed;
    right: 4px;
    top: 4px;
    color: #fcf25c;
}

#language-flag, #language-flag img {
    position: fixed;
    width: clamp(86px, 4.5vw, 4.5vw);
    left: 30px;
    cursor: pointer;
}

#language-flag img {
    border: solid 1px #867f17;
    aspect-ratio: 7 / 4;
}

#main_div {
    display: flexbox;
    width: 400px;
    margin: auto;
    margin-top: 2vh;
}

#second_div {
    top: 40px;
}

input {
    width: 80%;
}

.inside {
    position: relative;
    display: flex;
    margin-bottom: 0px;
    margin-top: 20px;
    padding: 10px;
    background: linear-gradient(#c4fff2, #00ffc8);
    border-radius: 10px;
    color: #867f17;
    max-width: 363px;
}
.inside::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 2px solid #00a07d;
    border-radius: calc(15px - 5px);
    pointer-events: none;
}
.inside::selection {
    color:#00a07d;
    background-color: #00ffc8;
}

.inside [id^="stop-button-"] {
    margin-left: auto;
    color: #00a07d;
}

#quote {
    position: fixed;
    color: #fcf25c00;
}

h1 {
    color: #fcf25c;
    text-shadow: 2px 0 #867f17, -2px 0 #867f17, 0 2px #867f17, 0 -2px #867f17, 1px 1px #867f17, -1px -1px #867f17, 1px -1px #867f17, -1px 1px #867f17;
}

.right-allignn {
    margin: 0;
}

[id^="timer"] {
    flex-basis: 66%;
}
[id^="remove-button-"] {
    margin: auto;
    margin-right: 2px;
    background: #00a07d;
    color: transparent;
    -webkit-background-clip: text;
}
[id^="remove-button-"]::selection {
    margin: auto;
    margin-right: 2px;
    background: #00ffc8;
    color: transparent;
    -webkit-background-clip: text;
}

a {
    color: #867f17;
    text-decoration: none;
}

[id^="task"] {
    color: #00a07d;
}

i {
    margin: auto;
    margin-right: 2px;
    color: #00a07d;
}

#cog {
    margin: auto;
    margin-right: 2px;
    background-image: linear-gradient(180deg,rgb(255, 245, 102) 33%, rgba(255, 238, 168, 1) 100%);
    color: transparent;
    -webkit-background-clip: text;
}

/* 🐮 */
#twr_timer {
    top: auto !important;
    bottom: 0px;
}
/* 🐮 */

#styleSelector:focus {
    outline: none;
    border: solid 2px #867f17;
}
option {
  background: #fff7d6;
    color: #867f17;
}
option:nth-of-type(even) {
  background: #fcf25c;
    color: #867f17;
}
::-webkit-scrollbar {
  width: 10px;
  background: linear-gradient(var(--cyan1), var(--cyan3));
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(#fcf25c, #fff7d6);
    border: solid 2px #fcf25c;
    border-radius: 5px;
}

#cssTextArea::-webkit-scrollbar {
    background: none;
}

#extension-new-popup {
    position: absolute;
    width: clamp(253px, 20%, 12%);
    top: 17%;
        left: clamp(3%, 11%, 26%);
    padding: 30px;
} #extension-new-popup h1 { text-align: center; position: relative; text-align: center;}
#extension-new-popup h1, #extension-new-popup p { position: relative; z-index: 2; }
#extension-new-popup img { z-index: 1; width: clamp(235px, 20%, 12%);
    position: absolute;
    top: -50px;
    right: 120px;
    z-index: 1;
    width: clamp(90%, 20%, 20%);
}
#extension-new-popup p { margin-left: 5px; 
    text-shadow: 1px 1px var(--yellow3), 1px 0px var(--yellow3), 1px -1px var(--yellow3), -1px 1px var(--yellow3), 0px 1px var(--yellow3), 0px 0px var(--yellow3), -1px 0px var(--yellow3), 0px -1px var(--yellow3);
    position: relative;
    z-index: 2;
    width: clamp(100%, 20%, 20%);
    color: var(--yellow1);
}


.cherry-text {
    color: var(--cherry1);
    text-shadow: 2px 0 var(--cherry3), -2px 0 var(--cherry3), 0 2px var(--cherry3), 0 -2px var(--cherry3), 1px 1px var(--cherry3), -1px -1px var(--cherry3), 1px -1px var(--cherry3), -1px 1px var(--cherry3);
}
.cyan-text {
    color: var(--cyan1);
    text-shadow: 2px 0 var(--cyan2), -2px 0 var(--cyan2), 0 2px var(--cyan2), 0 -2px var(--cyan2), 1px 1px var(--cyan2), -1px -1px var(--cyan2), 1px -1px var(--cyan2), -1px 1px var(--cyan2);
}
#x_add {
    position: absolute;
    top: -54%;
    right: -6%;
    color: var(--yellow3);
    text-shadow: none;
}