* {
    margin: 0;
    padding: 0;
    font-family: 'Josefin Sans';
    -webkit-tap-highlight-color: transparent;
}

/* josefin-sans-regular */

@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: normal;
    src: url('//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.eot');
    /* IE9 Compat Modes */
    src: local('Josefin Sans'), local('JosefinSans-Normal'), url('//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.woff') format('woff'),
        /* Modern Browsers */
        url('//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('//lib.baomitu.com/fonts/josefin-sans/josefin-sans-regular.svg#JosefinSans') format('svg');
    /* Legacy iOS */
}

/* pt-sans-regular */

@font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: normal;
    src: url('//lib.baomitu.com/fonts/pt-sans/pt-sans-regular.eot');
    /* IE9 Compat Modes */
    src: local('PT Sans'), local('PTSans-Normal'), url('//lib.baomitu.com/fonts/pt-sans/pt-sans-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('//lib.baomitu.com/fonts/pt-sans/pt-sans-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('//lib.baomitu.com/fonts/pt-sans/pt-sans-regular.woff') format('woff'),
        /* Modern Browsers */
        url('//lib.baomitu.com/fonts/pt-sans/pt-sans-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('//lib.baomitu.com/fonts/pt-sans/pt-sans-regular.svg#PTSans') format('svg');
    /* Legacy iOS */
}

h1 {
    font-size: 250%;
}

.maxViewPort {
    min-height: 100vh;
    max-height: 100vh;
    height: 100vh;
    min-height: 100svh;
    max-height: 100svh;
    height: 100svh;
    min-height: 100dvh;
    max-height: 100dvh;
    height: 100dvh;
    min-width: 100vw;
    max-width: 100vw;
    width: 100vw;
}

.basePart {
    overflow: hidden;
    min-width: 100vw;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.childPart {
    max-width: calc(512px - 24px);
    width: calc(90vw - 24px);
    border-radius: 12px;
    padding: 12px;
}

.greyBackground {
    background-color: rgb(236 236 236 / 84%);
}

.basePart>:not(:first-child) {
    margin-top: 8px;
}

.headingPart {
    margin-top: 8px;
    padding: 16px 0;
}

.shadowBackground {
    box-shadow: none;
    transition: ease-in-out box-shadow 0.234s;
}

.shadowBackground:hover {
    box-shadow: 0 0 14px 3px #ffffff;
    transition: ease-in-out box-shadow 0.234s;
}

.warningWindow p {
    margin-top: 4px;
}

.warningWindow a {
    color: #000000;
}

.warningWindow {
    color: #000000;
}

.closeButtom {
    height: fit-content;
    width: 100%;
    background-color: #ffffff;
    padding: 8px;
    padding-bottom: 6px;
    color: #000;
    border-radius: 16px;
    text-align: center;
    margin-top: 8px;
    cursor: pointer;
    box-shadow: none;
    transition: ease-in-out box-shadow 0.234s;
}

.closeButtom:hover {
    box-shadow: 0 0 10px 1px #b9b9b9b0;
    transition: ease-in-out box-shadow 0.234s;
}

.searchInput {
    min-height: 1em;
    border-radius: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    cursor: text;
}

#searchInput {
    display: block;
    background: none;
    outline: none;
    border: none;
    width: 100%;
    height: 1.1em;
    margin-top: 0.1em;
    color: #343434;
    overflow: visible;
}

#searchInput::placeholder {
    font-family: 'Josefin Sans';
    transform: translateY(-0.1em);
    user-select: none;
}

.searchInput form {
    width: 90%;
}

.searchbuttom {
    text-align: center;
    display: block;
    height: 100%;
    width: 10%;
    color: #777;
    cursor: pointer;
    user-select: none;
}

.searchEngine {
    position: relative;
}

.searchEngineSelector {
    position: absolute;
    top: 2.4rem;
    left: -8px;
    background-color: rgb(236 236 236 / 70%);
    padding: 8px;
    width: fit-content;
    border-radius: 8px;
    box-shadow: 0 0 8px 0px #444444bd;
    display: flex;
    cursor: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto;
    height: fit-content;
    max-height: 25dvh;
}

.searchEngineSelector>div>div {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 4px;
    padding-top: 2px;
    background-color: rgb(236 236 236 / 70%);
    height: 1.4em;
    width: calc(100% - 8px);
    border-radius: 6px;
    overflow: hidden;
    user-select: none;
    font-size: small;
    color: #585858;
    cursor: pointer;
    text-transform: capitalize;
    transition: all 0.24s ease-in;
}

.searchEngineSelector>div>div:hover {
    background-color: rgba(245, 245, 245, 0.9);
}

.searchEngineSelector>div>div:not(:last-child) {
    margin-bottom: 4px;
}

.searchEngineSelector::-webkit-scrollbar {
    display: none;
}

.searchEngine>span {
    color: #585858;
    text-transform: capitalize;
    padding: 0 6px;
    user-select: none;
    width: fit-content;
    font-weight: bolder;
    cursor: pointer;
    font-size: 85%;
}

.searchIcon {
    cursor: pointer;
    max-width: 100%;
    max-height: 227px;
    margin: 0;
    padding: 0;
    height: 1em;
    position: relative;
    bottom: 0;
    display: block;
}

.blurBackdrop {
    backdrop-filter: blur(10px);
}

body {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.backgroundBar {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 8px 0;
}

.backgroundBar div {
    padding: 10px;
    padding-bottom: 8px;
    border-radius: 114514px;
    margin: 0;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.resetBackground {
    background-color: #840D23;
    color: #fff;
    width: 3em;
    backdrop-filter: blur(8px);
}

.enableSwitch,
.setBackground {
    background-color: #ffffff8a;
    width: calc(100% - 6em);
}

.footer {
    text-align: center;
    position: fixed;
    bottom: 0;
    margin-bottom: 16px;
    user-select: none;
}

.footer div {
    display: flex;
    justify-content: center;
}

.footer div>div {
    cursor: pointer;
    background-color: #ffffff7b;
    padding: 6px 1em 4px 1em;
    border-radius: 114514px;
    backdrop-filter: blur(4px);
    color: #353535;
    transition: box-shadow ease-in 0.23s;
    transition: padding ease-in-out 0.178s;
    font-size: smaller;
}

.footer div>div:hover {
    box-shadow: 0px 0px 13px 0px #3a3a3a6b;
    padding: 6px 2em 4px 2em;
}

#clock {
    cursor: pointer;
    user-select: none;
    color: #000;
    text-shadow: 0 0 2px #4b4b4b4c;
}

.searchInputBase {
    backdrop-filter: blur(0px);
    transition: all ease-in-out 0.215s;
}

.searchInputBase:hover {
    backdrop-filter: blur(10px);
}

.searchInputBase:has(#searchInput:valid) {
    backdrop-filter: blur(10px);
}

#basePart {
    transition: backdrop-filter ease-in 0.43s;
}

#basePart:has(.iconArea),
#basePart:has(#noteBase),
#basePart:has(.searchInputBase:hover),
#basePart:has(#searchInput:valid),
#basePart:has(#searchInput:focus) {
    backdrop-filter: blur(4px);
}

.setUpBase hr,
.modIconBase hr,
.iconArea>div hr,
.suggestionArea>div hr,
.historyArea>div hr,
.warningWindow hr {
    outline: none;
    border: none;
    background-color: #ffffff18;
    height: 2px;
    border-radius: 114514px;
    margin: 12px 0;
    width: 100%;
}

.iconArea>div hr,
.suggestionArea>div hr,
.historyArea>div hr {
    margin-top: 2px;
}

.iconArea,
.suggestionArea,
.historyArea {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    border-radius: 20px;
    width: 100%;
    height: fit-content;
    transition: all ease-in-out 0.215s;
    width: 90vw;
    max-width: 512px;
}

.iconArea>div,
.suggestionArea>div,
.historyArea>div {
    display: flex;
    height: 100%;
    width: calc(100% - 16px);
    flex-direction: column;
    align-items: center;
}

.iconArea>div {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 80vh;
    max-height: 80svh;
    max-height: 80dvh;
}

.iconArea>div::-webkit-scrollbar {
    display: none;
}

.suggestionArea>div div,
.historyArea>div div {
    padding: 4px 1em;
    padding-bottom: 2px;
    width: calc(100% - 2em);
    border-radius: 114514px;
    color: #484848;
    margin: 4px 0;
    background-color: #a1a1a12b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    transition: all ease-in-out 0.210s;
    cursor: pointer;
    font-family: 'MiSans Medium';
    font-size: 90%;
}

.iconAreaItem {
    padding: 4px 1em;
    padding-bottom: 2px;
    color: #484848;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    flex-direction: row;
    transition: transform ease-in-out 0.210s;
    cursor: pointer;
    font-family: 'MiSans Medium';
    font-size: 90%;
    width: fit-content;
    max-width: 128px;
    height: fit-content;
    border-radius: 8px;
    background: #f1f1f1bc;
    backdrop-filter: blur(8px);
    margin: 8px;
    user-select: none;
    padding: 8px;
}

@media screen and (max-width: 580px) {
    .iconAreaItem {
        width: 70%;
        height: 2em;
        max-width: calc(100% - 16px);
        padding: 8px 16px;
        background-color: #f1f1f1bc;
    }

    .iconAreaItem:last-child {
        height: 1em;
        padding: 9px;
    }

    .iconArea>div {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
    }
}

.iconAreaItem:hover {
    transform: translateY(-2px);
}

.iconAreaIcon {
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.5em;
    width: 1em;
}

.iconAreaIcon img {
    height: 100%;
    margin: 0;
    border-radius: 4px;
    image-rendering: optimizeQuality;
}

.iconAreaTitle {
    background: none;
    backdrop-filter: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(1px);
}

.suggestionArea>div div:last-child,
.historyArea>div div:last-child {
    margin-bottom: 8px;
}

.suggestionArea>div div:first-child,
.historyArea>div div:first-child {
    margin-top: 8px;
}

.suggestionArea>div div:hover,
.historyArea>div div:hover {
    background-color: #a7a7a7a0;
}

.iconArea>div div span:last-child,
.suggestionArea>div div span:last-child,
.historyArea>div div span:last-child {
    font-size: smaller;
    font-weight: lighter;
    display: block;
}

.translateText {
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #484848;
    font-family: 'MiSans Medium';
    font-size: 90%;
}

#noteArea {
    width: 90vw;
    max-width: calc(640px - 16px);
    height: 85vh;
    height: 85dvh;
    overflow: hidden;
    border-radius: 16px;
    margin-bottom: 12px;
}

#noteArea>textarea {
    outline: none;
    border: none;
    width: calc(100% - 32px);
    height: calc(100% - 32px);
    padding: 16px;
    background-color: #ffffffdf;
    border-radius: 16px;
    box-shadow: 0 0 6px 1px #373737;
    backdrop-filter: blur(8px);
    overflow-y: scroll;
    font-family: 'MiSans Medium';
    font-size: medium;
    resize: none;
}

#noteArea>textarea::-webkit-scrollbar {
    width: 8px;
    cursor: pointer;
}

#noteArea>textarea::-webkit-scrollbar-track {
    display: none;
}

#noteArea>textarea::-webkit-scrollbar-thumb {
    background: #9f9f9f;
    border-radius: 10px;
    cursor: pointer;
}

noscript {
    display: flex;
    width: 100vw;
    text-align: center;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    justify-content: center;
    align-items: center;
}

.setUpBase,
.modIconBase {
    min-height: 100vh;
    min-height: 100lvh;
    min-height: 100dvh;
    width: 100%;
    z-index: 1000;
    position: fixed;
    background-color: #00000029;
}

.modIconChild {
    overflow: hidden;
    padding: 0 24px;
    width: calc(90vw - 48px);
    max-width: 512px;
    border-radius: 16px;
    background-color: #ffffff6b;
    height: fit-content;
    box-shadow: 0 0 7px 0px #37373745;
    backdrop-filter: blur(8px);
}

.newSiteInfoArea {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.newSiteInfoArea input[type="text"] {
    width: calc(100% - 20px);
    margin: 8px 0;
    height: 2rem;
    border-radius: 16px;
    border: none;
    outline: none;
    padding: 0 10px;
    font-family: 'MiSans Medium';
    color: #343434;
    text-align: center;
    background-color: #ffffffd0;
    transition: background-color 0.24s ease-in-out;
}

.newSiteInfoArea input[type="checkbox"] {
    display: block;
    width: 100%;
}

.newSiteInfoArea input::placeholder {
    font-size: smaller;
    color: #616161;
}

.newSiteInfoArea input:focus,
.newSiteInfoArea input:hover {
    background-color: #f9f9f9;
}

.setUpButtomBase {
    width: 100%;
    background-color: #ffffff6b;
    height: 2rem;
    margin: 8px 0;
    border-radius: 114514px;
    box-shadow: 0 0 4px #00000006;
    cursor: pointer;
    user-select: none;
}

.setUpButtomBase:last-child {
    margin: 0;
}

.setUpButtomBase:first-child {
    margin: 0;
    margin-bottom: 8px;
}

.setUpButtomBase>div {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
}

.setUpButtomBase>div>div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: calc(100% - 32px);
    padding: 0 16px;
    font-size: small;
}

.setUpButtomBase>div>div div {
    transform: translateY(2px);
}

.setUpBase {
    background-color: #e3e3e38f;
    backdrop-filter: blur(16px);
}