body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.backgroundGradient {
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        302deg,
        rgba(167, 163, 215, 1) 0%,
        rgba(35, 89, 152, 0.8) 50%,
        rgba(140, 236, 255, 1) 100%
    );
    height: 100vh;
    width: 100vw;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.alert {
    padding: 0.7143rem 1.071rem;
    margin-bottom: 1.429rem;
    border-radius: 20px;
    border: 1px solid transparent;
    color: #fff;
    max-width: 350px;
}

.alert.alert-secondary {
    background-color: #323a45;
    border-color: #323a45;
}

.d-center {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.backdrop {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 350px;
    width: 100%;
    margin-bottom: 20px;
}

.header {
    padding: 20px;
    text-align: center;
    color: #000000;
    background-color: #f4f4f4;
    font-size: 18px;
    font-weight: 700;
}

.warning-bg {
    background-color: #f4b400;
}

.error-bg {
    background-color: #d85750;
}

.content {
    padding: 40px;
    text-align: center;
}

.icon {
    user-select: none;
    font-size: 80px;
    margin-bottom: 20px;
}

.temperature {
    font-size: 40px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 10px;
}

.location {
    font-size: 18px;
    color: #555555;
    margin-bottom: 20px;
}

.shareButton {
    width: 30px;
    height: 30px;
    padding: 0;
    background-color: transparent;
    border: none;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M726.941 999q-56.441 0-96.691-40.388T590 862.055q0-7.01 1.5-17.675Q593 833.714 596 824L330 669q-18 20-43.346 32-25.346 12-52.206 12-57.27 0-97.359-40.309Q97 632.382 97 575.941t40.089-96.691Q177.178 439 234.448 439q26.86 0 51.206 10.5Q310 460 330 480l266-153q-3-8.071-4.5-18.433t-1.5-18.953q0-56.031 40.309-96.322Q670.618 153 727.059 153t96.691 40.309Q864 233.618 864 290.059t-40.089 96.691Q783.822 427 726.552 427q-27.213 0-51.959-7.969Q649.847 411.062 633 391L366 536q3 9 4 21.023 1 12.022 1 19.218t-1 15.978Q369 601 366 611l267 149q16.847-17.062 40.27-26.031Q696.692 725 726.552 725q57.27 0 97.359 40.309Q864 805.618 864 862.059t-40.309 96.691Q783.382 999 726.941 999Zm.094-655Q750 344 765.5 328.465q15.5-15.535 15.5-38.5T765.465 251.5q-15.535-15.5-38.5-15.5T688.5 251.535q-15.5 15.535-15.5 38.5t15.535 38.465q15.535 15.5 38.5 15.5Zm-493 286Q257 630 272.5 614.465q15.5-15.535 15.5-38.5T272.465 537.5q-15.535-15.5-38.5-15.5T195.5 537.535q-15.5 15.535-15.5 38.5t15.535 38.465q15.535 15.5 38.5 15.5Zm493 286Q750 916 765.5 900.465q15.5-15.535 15.5-38.5T765.465 823.5q-15.535-15.5-38.5-15.5T688.5 823.535q-15.5 15.535-15.5 38.5t15.535 38.465q15.535 15.5 38.5 15.5ZM727 290ZM234 576Zm493 286Z" fill="%23888888"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.2s;
    background-size: 100% 100%;
    margin-left: 10px;
}

.shareButton:hover {
    color: #68c64c;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M726.941 999q-56.441 0-96.691-40.388T590 862.055q0-7.01 1.5-17.675Q593 833.714 596 824L330 669q-18 20-43.346 32-25.346 12-52.206 12-57.27 0-97.359-40.309Q97 632.382 97 575.941t40.089-96.691Q177.178 439 234.448 439q26.86 0 51.206 10.5Q310 460 330 480l266-153q-3-8.071-4.5-18.433t-1.5-18.953q0-56.031 40.309-96.322Q670.618 153 727.059 153t96.691 40.309Q864 233.618 864 290.059t-40.089 96.691Q783.822 427 726.552 427q-27.213 0-51.959-7.969Q649.847 411.062 633 391L366 536q3 9 4 21.023 1 12.022 1 19.218t-1 15.978Q369 601 366 611l267 149q16.847-17.062 40.27-26.031Q696.692 725 726.552 725q57.27 0 97.359 40.309Q864 805.618 864 862.059t-40.309 96.691Q783.382 999 726.941 999Zm.094-655Q750 344 765.5 328.465q15.5-15.535 15.5-38.5T765.465 251.5q-15.535-15.5-38.5-15.5T688.5 251.535q-15.5 15.535-15.5 38.5t15.535 38.465q15.535 15.5 38.5 15.5Zm-493 286Q257 630 272.5 614.465q15.5-15.535 15.5-38.5T272.465 537.5q-15.535-15.5-38.5-15.5T195.5 537.535q-15.5 15.535-15.5 38.5t15.535 38.465q15.535 15.5 38.5 15.5Zm493 286Q750 916 765.5 900.465q15.5-15.535 15.5-38.5T765.465 823.5q-15.535-15.5-38.5-15.5T688.5 823.535q-15.5 15.535-15.5 38.5t15.535 38.465q15.535 15.5 38.5 15.5ZM727 290ZM234 576Zm493 286" fill="%2368c64c"/></svg>');

    transform: scale(1.2);
}
.shareButton:active {
    color: #68c64c;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M726.941 999q-56.441 0-96.691-40.388T590 862.055q0-7.01 1.5-17.675Q593 833.714 596 824L330 669q-18 20-43.346 32-25.346 12-52.206 12-57.27 0-97.359-40.309Q97 632.382 97 575.941t40.089-96.691Q177.178 439 234.448 439q26.86 0 51.206 10.5Q310 460 330 480l266-153q-3-8.071-4.5-18.433t-1.5-18.953q0-56.031 40.309-96.322Q670.618 153 727.059 153t96.691 40.309Q864 233.618 864 290.059t-40.089 96.691Q783.822 427 726.552 427q-27.213 0-51.959-7.969Q649.847 411.062 633 391L366 536q3 9 4 21.023 1 12.022 1 19.218t-1 15.978Q369 601 366 611l267 149q16.847-17.062 40.27-26.031Q696.692 725 726.552 725q57.27 0 97.359 40.309Q864 805.618 864 862.059t-40.309 96.691Q783.382 999 726.941 999Zm.094-655Q750 344 765.5 328.465q15.5-15.535 15.5-38.5T765.465 251.5q-15.535-15.5-38.5-15.5T688.5 251.535q-15.5 15.535-15.5 38.5t15.535 38.465q15.535 15.5 38.5 15.5Zm-493 286Q257 630 272.5 614.465q15.5-15.535 15.5-38.5T272.465 537.5q-15.535-15.5-38.5-15.5T195.5 537.535q-15.5 15.535-15.5 38.5t15.535 38.465q15.535 15.5 38.5 15.5Zm493 286Q750 916 765.5 900.465q15.5-15.535 15.5-38.5T765.465 823.5q-15.535-15.5-38.5-15.5T688.5 823.535q-15.5 15.535-15.5 38.5t15.535 38.465q15.535 15.5 38.5 15.5ZM727 290ZM234 576Zm493 286" fill="%2368c64c"/></svg>');
    transform: scale(0.9);
}

.like-section {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.likeHeartButton {
    user-select: none;
    font-size: 30px;
    cursor: pointer;
    color: #888888;
    transition: 0.2s;
    padding-right: 4px;
}

.container .likeHeartButton:hover {
    color: #d85750;
    transform: scale(1.2);
}

.container .likeHeartButton:active {
    transform: scale(0.9);
}

.likeCount {
    font-size: 16px;
    color: #888888;
    margin-top: 10px;
}

.like-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.forecast {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    border-top: 1px solid #dddddd;
    width: 100%;
}

.forecast-day {
    text-align: center;
}

.forecast-day-title {
    font-size: 14px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 5px;
}

.forecast-day-temp {
    font-size: 12px;
    color: #555555;
}

.forecast-day-desc {
    font-size: 12px;
    color: #888888;
}

/* Dark Mode Styles */
.dark-mode .backgroundGradient {
    background-color: #313131;
    background: linear-gradient(302deg, rgba(8, 16, 32, 1) 0%, rgba(9, 17, 35, 0.8) 50%, rgba(26, 51, 102, 1) 100%);
}

.dark-mode .header {
    color: #ffffff;
    background-color: #313131;
}

.dark-mode .temperature {
    color: #ffffff;
}

.dark-mode .location {
    color: #dddddd;
}

.dark-mode .likeHeartButton {
    color: #aaaaaa;
}

.dark-mode .likeCount {
    color: #aaaaaa;
}

.dark-mode .backdrop {
    background-color: #424242;
}

.dark-mode .forecast {
    border-color: #555555;
}

.dark-mode .forecast-day-title {
    color: #ffffff;
}

.dark-mode .forecast-day-temp {
    color: #dddddd;
}

.dark-mode .forecast-day-desc {
    color: #aaaaaa;
}