@font-face {
        font-family: "nanum";
        src: url("font/NanumBarunpenR.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
        unicode-range: U+0020-007E,
            U+00A0-00FF,
            U+AC00-D7A3,
            U+1100-11FF,
            U+3130-318F,
            U+3200-321E,
            U+3260-327F,
            U+FFE0-FFE6;
        ;
    }

    .white {
        background-color: white;
    }

    .white h1 {
        color: black;
    }

    .white button {
        background-color: #FFFFA8;
    }


    .dark button {
        color: white;
        background-color: gray;
    }

    .dark legend {
        color: white;
    }

    .dark footer p {
        color: white;
    }

    .yellow {
        background-color: lightyellow;
    }

    .yellow h1 {
        color: black;
    }

    .yellow .ai {
        background-color: lemonchiffon;
    }

    .category-section {
        text-align: center;
        margin: 0px;
        padding: 0px;
    }

    .category {
        text-align: center;
        width: 110px;
        height: 30px;
        font-size: 18px;
        background-color: #FFFFA8;
        border-radius: 5px;
    }

    #autocomplete-list li {
        padding: 10px;
        cursor: pointer;
        font-size: 18px;
        border-bottom: 1px solid #ccc;
    }

    #autocomplete-list li:hover {
        background-color: #f0f0f0;
    }

    body {
        background-color: #1acaff50;
        padding: 0;
        margin: 0;
    }

    main {
        padding: 70px;
        padding-top: 8px;
    }

    header {
        padding: 70px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    * {
        transition: 0.3s;
        font-family: "nanum", "NanumGothic", sans-serif;
    }

    h1 {
        color: rgb(20, 20, 20);
        font-family: "NanumSquareRound";
    }

    h4 {
        color: white;
    }

    h6 {
        color: white;
    }

    .ignore {
        color: blue;
    }

    a:not(.ignore, .footer-link) {
        font-size: 40px;
        color: black;
        text-decoration: none;
    }

    img {
        width: 40px;
        height: 40px;
    }

    .engine-editor {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(209, 209, 209, 0.719);
        backdrop-filter: blur(5px);
        width: 400px;
        height: 200px;
        padding: 10px;
        text-align: center;
        border-radius: 15px;

    }
    .engine-editor-input {
        width: 70%;
        height: 8px;
        border-radius: 14px;
        border-color: black
    }

    .none {
        all: revert;
        margin: 10px;
    }
    button {
        background-color: #ffffffce;
        width: 300px;
        height: 75px;
        border-radius: 25px;
        margin: 3px;
        font-size: 40px;
        color: black;
    }

    input {
        width: 100%;
        font-size: 100%;
        border-radius: 30px;
        padding: 15px;
    }

    .ai img {
        margin: 5px;
        background-color: #1acaff25;
        border-radius: 10px;
        border: 1px solid #9ee8ff;
    }

    .ai img:hover {
        transform: scale(1.2);
    }

    .ai {
        background-color: rgba(255, 255, 255, 0.445);
        backdrop-filter: blur(5px);
        position: fixed;
        bottom: 10px;
        left: 8px;
    }

    .dark h1 {
        color: white;
    }

    fieldset {
        width: 300px;
    }

    .tops {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .top {
        width: 40%;
        background-color: #85e3ff;
        padding: 5px;
        border-radius: 10px;
        margin: 8px;
    }

    .list:hover {
        color: #0051ff;
        font-size: larger;
        text-decoration: underline;
    }

    .top p {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }

    footer {
        text-align: center;
        background-color: #c2f1ff;
        padding: 10px;
    }

    .footer-link {
        color: black;
        text-decoration: none;
        margin: 10px;
        font-family: 'NanumGothic';
    }

    .footer-link:hover {
        text-decoration: underline;
        color: #0051ff;
    }

    .adsbygoogle {
        margin-bottom: 5px;
    }


    .about-sites {
        text-align: center;
    }

    .window .category {
        font-size: small;
    }

    .window input {
        font-size: large;
    }

    .window .engine button {
        font-size: 30px;
    }

    .window h1 {
        font-size: 40px;
    }

    .window .top {
        background-color: blue;
        color: white;
        border-radius: 0;
    }

    .window {
        background-color: #00b899 !important;
    }

    #specialLogo {
        width: 85%;
        height: auto;
    }

    .search-location {
        width: auto;
        height: auto;
        padding: 0px;
        background-color: #ccc;
        font-size: 0px;
        cursor: pointer;
    }

    .material-symbols-outlined {
        margin: 0;
    }

    .weather {
        width: auto;
        height: 20px;
    }

    .container {
        display: flex;
    }

    .engine button {
        cursor: pointer;
    }

    .category {
        cursor: pointer;
    }

    .engine button:hover {
        transform: scale(1.05);
        background-color: #d4f5ff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        border-color: #a1d5ff;
    }

    .category:hover {
        transform: scale(1.05);
        background-color: #ffff80;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        border-image-slice: 1;
        border-image-source: linear-gradient(45deg, #ffbb01, #e5ff00);
    }

    footer p {
        font-family: 'NanumGothicBold';
    }

    .white .engine button:hover {
        background-color: #ffff80;
    }

    .dark .engine button:hover {
        background-color: rgb(90, 90, 90);
        border-color: rgb(90, 90, 90);
    }

    .dark .category:hover {
        background-color: rgb(90, 90, 90);
        border-image-slice: 1;
        border-image-source: linear-gradient(0deg, #141414, #dadada);
    }

    .dark footer p {
        color: black;
    }

    .dark .time,
    .dark .weather {
        color: white;
    }

    .dark aside p {
        color: white;
    }

    .window .engine button:hover {
        background-color: silver;
    }

    .dark .top {
        color: white;
        background-color: #333333;
    }

    .dark .list:hover {
        color: #e0e0e0;
    }

    .dark .footer-link {
        color: white;
    }

    .dark footer {
        background-color: rgb(26, 26, 26);
    }

    .dark footer p {
        color: white;
    }

    .dark {
        background: linear-gradient(25deg, black, rgb(19, 19, 19), rgb(36, 36, 36), rgb(14, 14, 14), rgb(24, 24, 24));
    }

    .dark #query {
        background-color: #3b3b3b;
        color: white;
        border: 1px gray solid;
    }

    .dark #query::placeholder {
        color: #dfdfdf;
    }

    .about-sites a {
        background-color: #9e9e9e;
        padding: 10px;
        border-radius: 6px;
        margin: 10px;
        border: 2px solid;
    }

    .about-sites a:hover {
        background-color: #8a8a8a;
        text-decoration: underline;
    }

    @media (max-width:480px) {
        .engine {
            text-align: center;
        }

        .engine button {
            width: 97%;
        }
    }

    #news-dashboard {
        margin-top: 20px;
        padding: 20px;
        margin-bottom: 20px;
        background-color: #ffffffce;
        border-radius: 10px;
    }

    #news-dashboard h2 {
        text-align: center;
        color: #333;
        font-family: "NanumSquareRound";
    }

    #news-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 15px;
        margin-top: 10px;
    }

    .m-news-container {
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-top: 20px;
    }

    .m-news ul {
        list-style: none;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
    }

    .m-news li a {
        display: block;
        padding: 10px;
        background-color: #ffffff;
        text-align: center;
        text-decoration: none;
        color: #333;
        border-radius: 5px;
        transition: background-color 0.3s;
        font-size: 20px;
    }

    .m-news li a:hover {
        background-color: #e9ecef;
    }

    .news-item {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .dark .news-item {
        background-color: #303030;
    }

    .dark #news-dashboard h2 {
        color: white;
    }

    .news-item h3 {
        font-size: 1em;
        margin: 0 0 10px 0;
    }

    .news-item h3 a {
        text-decoration: none;
        color: #0056b3;
        font-size: 1em;
    }

    .dark .news-item h3 a {
        color: #1f5bff;
    }

    #query {
        height: 40px !important;
    }

    .news-item h3 a:hover {
        text-decoration: underline;
    }

    .news-item p {
        font-size: 0.8em;
        color: #555;
        margin: 0 0 10px 0;
    }

    .dark .news-item p {
        color: #ffffff;
    }

    .dark #news-dashboard p {
        color: white;
    }

    #read-later-section {
        margin-top: 20px;
        padding: 20px;
        background-color: #ffffffce;
        border-radius: 10px;
    }

    #read-later-section h2 {
        text-align: center;
        color: #333;
        font-family: "NanumSquareRound";
    }

    #read-later-list {
        list-style: none;
        padding: 0;
    }

    #read-later-list li {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    #read-later-list li a {
        text-decoration: none;
        color: #0056b3;
        font-size: initial;
        font-weight: bold;
    }

    #read-later-list li a:hover {
        text-decoration: underline;
    }

    .dark #read-later-section {
        background-color: #292929;
    }

    .dark #read-later-section h2 {
        color: white;
    }

    .dark #read-later-list li {
        background-color: #303030;
        border-color: #444;
    }

    .dark #read-later-list li a {
        color: #1f5bff;
    }

    #custom-context-menu {
        position: absolute;
        z-index: 10000;
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        padding: 5px 0;
    }

    #custom-context-menu button {
        display: block;
        width: 100%;
        padding: 8px 15px;
        border: none;
        background: none;
        text-align: left;
        cursor: pointer;
        font-size: 14px;
        height: auto;
        border-radius: 0;
        color: black;
    }

    #custom-context-menu button:hover {
        background-color: #f0f0f0;
        transform: none;
        box-shadow: none;
    }

    /* Dark Theme Context Menu */
    .dark #custom-context-menu {
        background-color: #3b3b3b;
        border-color: #555;
    }

    .dark #custom-context-menu button {
        color: white;
    }

    .dark #custom-context-menu button:hover {
        background-color: #555;
    }

    /* Retro Theme Read Later Section */
    .window #read-later-section {
        background-color: #c0c0c0;
        border: 2px solid #000;
        box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
        padding: 10px;
        border-radius: 0 !important;
    }

    .window #read-later-section h2 {
        font-family: 'VT323', monospace;
        color: white;
        text-align: left;
        padding: 5px;
        background-color: #000080;
        margin-top: 0;
        border-radius: 0 !important;
    }

    .window #read-later-list li {
        background-color: #fff;
        border: 2px inset #7f7f7f;
        padding: 10px;
        box-shadow: none;
        border-radius: 0 !important;
    }

    .window #read-later-list li a {
        font-family: 'VT323', monospace;
        color: #0000ff;
        text-decoration: underline;
    }

    .window #read-later-list p {
        font-family: 'VT323', monospace;
        color: #000;
    }

    /* Retro Theme Context Menu */
    .window #custom-context-menu {
        font-family: 'VT323', monospace;
        background-color: #c0c0c0;
        border: 2px solid #000;
        box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
        border-radius: 0;
        padding: 0;
    }

    .window #custom-context-menu button {
        font-family: 'VT323', monospace;
        color: #000;
        padding: 5px 15px;
    }

    .window #custom-context-menu button:hover {
        background-color: #000080;
        color: white;
    }

    .news-item .news-source {
        font-size: 0.8em;
        color: #888;
        text-align: right;
    }

    .new-features-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
    }

    #exchange-rate-container {
        flex: 6;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
        min-width: 300px;
    }

    #notepad-container {
        flex: 4;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
        min-width: 300px;
    }

    #exchange-rate-container h2,
    #notepad-container h2 {
        text-align: center;
        color: #333;
        font-family: "NanumSquareRound";
    }

    #exchange-rate-display {
        font-size: 1.2em;
        text-align: center;
        margin-bottom: 15px;
    }

    #krw-input {
        width: calc(100% - 30px);
        margin-bottom: 10px;
        height: 10px;
    }

    #usd-output {
        font-size: 1em;
        font-weight: bold;
        text-align: center;
        color: #0056b3;
    }

    #notepad {
        width: 100%;
        height: 150px;
        margin-top: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        font-family: "nanum", "NanumGothic", sans-serif;
        box-sizing: border-box;
    }

    .dark #notepad-container {
        background-color: #292929;
    }

    .dark #notepad-container h2 {
        color: white;
    }

    .dark #notepad {
        background-color: #303030;
        color: white;
        border-color: #303030;
    }

    .dark #notepad::placeholder {
        color: #c0c0c0;
    }

    .dark #exchange-rate-container {
        background-color: #292929;
        color: white;
    }

    .dark #exchange-rate-container h2 {
        color: white;
    }

    .dark #usd-output {
        color: #ffffff;
    }

    .dark #news-dashboard,
    .dark .m-news-container {
        background-color: #292929;
    }

    .dark .m-news-container h2 {
        color: white;
    }

    .dark .m-news ul li {
        background-color: #333;
        border-color: #444;
    }

    .dark .m-news ul li a {
        color: #000000;
    }

    @media (max-width: 768px) {
        main {
            padding: 8px;
        }

        header {
            padding: 8px;
        }

        .new-features-container {
            flex-direction: column;
        }

        #exchange-rate-container,
        #notepad-container {
            flex: 1;
        }
    }

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

    /* General retro styles */
    .window {
        font-family: 'VT323', monospace;
        background-color: #00b899 !important;
        border: 2px solid #000;
        box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.5);
    }

    .window * {
        transition: none !important;
    }

    /* Header and Title Bar */
    .window .top {
        background-color: #000080;
        color: white;
        padding: 5px;
        font-weight: bold;
        border-bottom: 2px solid #000;
        border-radius: 0;
    }

    /* Buttons and Categories */
    .window button,
    .window .category {
        font-family: 'VT323', monospace;
        background-color: #c0c0c0;
        border: 2px solid #000;
        box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
        border-radius: 0;
    }

    .window button:active,
    .window .category:active {
        box-shadow: none;
        transform: translate(2px, 2px);
    }

    /* Remove hover effects */
    .window button:hover,
    .window .category:hover,
    .window .list:hover,
    .window .footer-link:hover,
    .window .about-sites a:hover {
        transform: none;
        box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
        background-color: #c0c0c0;
        text-decoration: none;
        color: black;
        border-color: black;
    }

    /* Sharp corners for all elements */
    .window input,
    .window .ai,
    .window #news-dashboard,
    .window .news-item,
    .window #exchange-rate-container,
    .window #notepad-container,
    .window #notepad,
    .window .about-sites a,
    .window fieldset,
    .window .history {
        border-radius: 0 !important;
    }

    .window #krw-input {
        height: 30px;
    }

    /* Form elements styling */
    .window input[type="search"],
    .window input[type="number"],
    .window textarea,
    .window select {
        font-family: 'VT323', monospace;
        background-color: white;
        border: 2px inset #7f7f7f;
        box-shadow: none;
        padding: 5px;
    }

    /* Footer styling */
    .window footer {
        background-color: #c0c0c0;
        border-top: 2px solid #000;
        padding: 10px;
    }

    .window footer p,
    .window footer a {
        font-family: 'VT323', monospace;
        color: #000;
    }

    .window .footer-link {
        color: #0000ff;
        text-decoration: underline;
    }

    .window .footer-link:hover {
        color: #0000ff;
        text-decoration: underline;
        background-color: transparent;
        box-shadow: none;
    }

    /* Style for the section containers */
    .window #news-dashboard,
    .window #exchange-rate-container,
    .window #notepad-container,
    .window .m-news-container,
    .window .history,
    .window .ai {
        background-color: #c0c0c0;
        border: 2px solid #000;
        box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
        padding: 10px;
    }

    .window .ai img {
        border-radius: 0px;
        background-color: #c0c0c0;
        border: 1px solid #c2c2c2;
    }

    /* Headings within the sections */
    .window #news-dashboard h2,
    .window #exchange-rate-container h2,
    .window #notepad-container h2,
    .window .m-news-container h2,
    .window .history h2 {
        font-family: 'VT323', monospace;
        color: #000;
        text-align: left;
        padding: 5px;
        background-color: #000080;
        /* Title bar color */
        color: white;
        margin-top: 0;
    }

    /* News item styling */
    .window .news-item {
        background-color: #fff;
        border: 2px inset #7f7f7f;
        padding: 10px;
        box-shadow: none;
    }

    .window .news-item h3 a {
        font-family: 'VT323', monospace;
        font-size: 1.2em;
        /* Make it a bit larger */
        color: #0000ff;
        text-decoration: underline;
    }

    .window .news-item p {
        font-family: 'VT323', monospace;
        color: #000;
    }

    /* Exchange rate display */
    .window #exchange-rate-display,
    .window #usd-output {
        font-family: 'VT323', monospace;
        color: #000;
    }

    /* Media news list */
    .window .m-news ul {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .window .m-news ul li {
        border: 1px solid #000;
        background-color: #fff;
    }

    .window .m-news ul li a {
        font-family: 'VT323', monospace;
        color: #0000ff;
        text-decoration: underline;
        font-size: 16px;
    }

    .remove-link {
        width: 100px;
        height: 30px;
        font-size: 12px;
        background-color: #ff0000;
        color: white;
        border: red;
        cursor: pointer;
    }

    .remove-link:hover {
        background-color: rgb(226, 0, 0);
    }

    .history {
        background-color: #ffffffce;
        border-radius: 15px;
        padding: 10px;
        margin-top: 10px;
    }

    .history h2 {
        text-align: center;
    }

    .dark .history {
        background-color: #292929;
        color: white;
    }

    .toplogo {
        width: 100px;
        height: auto;
    }