/* Main **************************************************************************************************** */
*,
*::before,
*::after {
  box-sizing: border-box; /* Use it to have all boxes the defined dimension, paddings and margins included */
}

body {
    background-color: rgb(248, 255, 255);
    background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
                      url(/static/Images/background-image-4.png);
    background-repeat: no-repeat; /* 🔹 Prevents the background image from repeating (default is repeat). */
    background-position-x: center;
    background-position-y: center; /* 🔹 Positions the background image in the center of the element
                                       (both horizontally and vertically). */
    background-attachment: fixed; /* 🔹 Makes the background image stay fixed when scrolling (parallax effect).
                                     ⚠️ Note: On mobile this may not work well or be disabled by the browser. */
    background-size: cover; /* 🔹 Scales the background image to fully cover the element.
                                  Keeps aspect ratio — some parts may be cropped to fill space. */

    font-family: Bahnschrift;
    color: rgb(111, 111, 111);
}

header {
    position: sticky;
    top: 0;
}

.navbar {
    background: rgb(205, 255, 255) !important;/*linear-gradient(to top, rgb(205, 255, 255), rgb(235, 255, 255)) !important;*/
    color: rgb(33, 37, 41) !important;
    padding: 8px 10% 8px 4% !important;
}

.navbar .nav-link {
    color: rgb(0, 144, 144) !important;
}

.navbar-brand {
    color: rgb(0, 148, 148) !important;
    font-weight: 600;
}

footer {
    text-align: left;
    font-family: Bahnschrift;
    font-weight: 200;
    color: rgb(0, 144, 144);
    background: rgb(205, 255, 255) !important;/*linear-gradient(to top, rgb(205, 255, 255), rgb(235, 255, 255));*/
    padding: 0px 10px 20px 10px;
}

/* Layout **************************************************************************************************** */
.base-h-box {
    display: flex;
    flex-direction: row;
    margin: 10px;
}

.base-h-box-index-1 {
    display: flex;
    flex-direction: row;
    margin: 20px 0px;
    background-color: white;
    padding: 20px;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
}

.base-h-box-index-2 {
    display: flex;
    flex-direction: row;
    margin: 20px 0px;
    background-color: rgb(220, 248, 255);
    padding: 20px;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
}

.base-v-box {
    display: flex;
    flex-direction: column;
    margin: 10px;
}

.base-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /*First column is 150px wide Second column takes up all the remaining space (fr stands for fraction of available space)*/
    gap: 15px 20px; /* row gap, column gap */
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20%;
    text-align: left;
}

.v-box-index {
    display: flex;
    flex-direction: column;
    margin: 20px 10%;
    color: rgb(88, 88, 88)
}

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

.h-box-main-1 {
    display: flex;
    flex-direction: row;
    border-radius: 20px;
    margin: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    width: 80%;
}

.h-box-main-2 {
    display: flex;
    flex-direction: row;
    border-radius: 20px;
    margin: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    width: 80%;
    align-items: center;
    justify-content: center;
}

.h-box-main-3 {
    display: flex;
    flex-direction: row;
    border-radius: 20px;
    margin: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    width: 80%;
    align-items: center;
    justify-content: center;
}

.h-box-main-4 {
    display: flex;
    flex-direction: row;
    border-radius: 20px;
    margin: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    width: 80%;
    align-items: center;
    justify-content: center;
}

.v-box-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-right: 1px solid rgb(200, 200, 200);
    align-items: center;
    text-align: center;
    padding: 20px 0px 20px 0px;
}

.v-box-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;
    padding: 20px 0px 20px 0px;
}

.h-box-data {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;
    justify-content: flex-start;
    width: 100%;
    padding: 20px 30px 20px 30px;
    border-bottom: 1px solid rgb(188, 222, 222);
}

.register-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /*First column is 150px wide Second column takes up all the remaining space (fr stands for fraction of available space)*/
    gap: 15px 20px; /* row gap, column gap */
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20%;
    text-align: left;
}

.base-h-box-blog {
    display: flex;
    flex-direction: row;
}

.base-v-box-blog {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.base-v-box-blog-image {
    display: flex;
    flex-direction: column;
    margin: 0px 0px 0px auto;
}

/* Containers ************************************************************************************************** */
.base-container {
    margin: 10px 10% 10px 10%;
    font-family: Bahnschrift;
    color: rgb(0, 111, 111);
    font-size: 18px;
    min-height: 95vh;
}

.base-container-centered-content {
    display: flex;
    flex-direction: column;
    margin: 10px auto;
    font-family: Bahnschrift;
    color: rgb(0, 111, 111);
    font-size: 18px;
    padding: 10px auto;
    align-items: center;
    justify-content: center;
}

.base-paragraph-centered-content {
    text-align: center;
    margin: 35px;
}

.base-container-pop-up {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    width: fit-content;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    background-color: white;
    color: rgb(111, 111, 111);
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    font-family: Bahnschrift;
}

.register-button-container {
    padding: 40px;
}

.footer-container {
    margin: 4px 10px 10px 10px;
}

.data-content {
    flex: 1; /* takes up remaining space */
    display: flex;
    justify-content: center; /* centers text horizontally */
    font-family: Bahnschrift;
    font-size: 23px;
    color: rgb(0, 111, 111);
    padding: 4px;
}

.sunset-sunrise-icon-container {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.sunset-sunrise-description-container-sunrise {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgb(188, 222, 222);
}

.sunset-sunrise-description-container-sunset {
    flex: 4;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.uv-icon-container {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
}

.uv-description-container {
    flex: 4;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-left: 1px solid rgb(188, 222, 222);
}

.moon-icon-container {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px;
}


.moonrise-moonset-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgb(188, 222, 222);
}

.moonphase-illumination-container {
    flex: 4;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.account-already-container {
    margin: 50px 20px 20px 20%;
    font-family: Bahnschrift;
    font-size: 14px;
    font-weight: 200;
}

.forgot-password-container {
    margin: 20px 20px;
    font-size: 14px;
    font-weight: 400;
}

.flash-message-success-container {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 20px auto;
    border-radius: 8px;
    background-color: rgb(222, 255, 222);
    padding: 15px;
    font-family: Bahnschrift;
    font-size: 16px;
    font-weight: 300;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    color: rgb(0, 188, 0)
}

.flash-message-warning-container {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 10px auto;
    border-radius: 8px;
    background-color: rgb(255, 237, 237);
    padding: 8px;
    font-family: Bahnschrift;
    font-size: 16px;
    font-weight: 300;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    color: rgb(188, 0, 0)
}

.flash-message-info-container {
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 20px auto;
    border-radius: 8px;
    background-color: rgb(232, 247, 255);
    padding: 15px;
    font-family: Bahnschrift;
    font-size: 16px;
    font-weight: 300;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    color: rgb(0, 0, 222)
}

.remember-login-container {
    margin-left: 20%;
    margin-top: 50px;
}

.blog-container {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 8px;
    background-color: white;
    color: rgb(111, 111, 111);
    box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
    font-family: Bahnschrift;
}

.delete-edit-container {
    display: flex;
    flex-direction: row;
    margin: 5px;
    font-family: Bahnschrift;
    color: rgb(0, 111, 111);
    font-size: 18px;
}

/* Buttons ***************************************************************************************************** */
button {
  padding: 5px 10px;
  background-color: rgb(76, 175, 80);
  border: 1px solid green;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 40px 10px 10px 10px;
}

button:hover {
    background-color: rgb(69, 160, 73);
}

button:active {
    background-color: rgb(51, 144, 58);
    border: 1px inset green;
}

.base-button {
    padding: 8px 10px;
    background-color: rgb(76, 175, 80);
    border: 1px solid green;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0px 10px 25px 10px;
}

.base-button:hover {
    background-color: rgb(69, 160, 73);
}

.base-button:active {
    padding: 9px 9px 7px 11px;
    background-color: rgb(51, 144, 58);
    border: 1px inset rgb(0, 0, 143);
}

.base-button-blue {
    padding: 8px 10px;
    background-color: rgb(76, 144, 255);
    border: 1px solid blue;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0px 10px 25px 10px;
}

.base-button-blue:hover {
    background-color: rgb(67, 128, 226);
    border: 1px solid rgb(0, 0, 214);
}

.base-button-blue:active {
    padding: 9px 9px 7px 11px;
    background-color: rgb(46, 88, 156);
    border: 1px inset rgb(0, 0, 143);
}

.form-button {
  padding: 5px 10px;
  background-color: rgb(76, 175, 80);
  border: 1px solid green;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 40px 10px 10px 10px;
}

.form-button:hover {
    background-color: rgb(69, 160, 73);
}

.form-button:active {
    background-color: rgb(51, 144, 58);
    border: 1px inset green;
}

.register-login-button {
  padding: 5px 10px;
  background-color: rgb(76, 175, 80);
  border: 1px solid green;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 40px 10px 10px 10px;
  min-width: 150px;
}

.register-login-button:hover {
    background-color: rgb(69, 160, 73);
}

.register-login-button:active {
    background-color: rgb(51, 144, 58);
    border: 1px inset green;
}

#city-submit {
  padding: 5px 10px;
  background-color: rgb(76, 175, 80);
  border: 1px solid green;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0px 10px 25px 10px;
}

#city-submit:hover {
    background-color: rgb(69, 160, 73);
}

#city-submit:active {
    background-color: rgb(51, 144, 58);
    border: 1px inset green;
}

.account-already-button {
    padding: 8px 10px;
    background-color: rgb(76, 144, 255);
    border: 1px solid blue;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0px 10px 25px 10px;
}

.login-blog-button {
    padding: 8px 10px;
    background-color: rgb(76, 144, 255);
    border: 1px solid blue;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0px 10px 25px 10px;
}

.login-blog-button:hover {
    background-color: rgb(67, 128, 226);
    border: 1px solid rgb(0, 0, 214);
}

.login-blog-button:active {
    padding: 10px 8px 6px 12px;
    background-color: rgb(46, 88, 156);
    border: 1px inset rgb(0, 0, 143);
}

.update-user-button {
    max-width: 150px;
    padding: 5px 10px;
    background-color: rgb(76, 175, 80);
    border: 1px solid green;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 40px 10px 10px 10px;
}

.update-user-button:hover {
    background-color: rgb(69, 160, 73);
}

.update-user-button:active {
    background-color: rgb(51, 144, 58);
    border: 1px inset green;
}

.create-post-button {
    font-size: 18px;
    padding: 10px;
    background-color: rgb(76, 175, 80);
    border: 1px solid green;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
}

.create-post-button:hover {
    background-color: rgb(69, 160, 73);
}

.create-post-button:active {
    background-color: rgb(51, 144, 58);
    border: 1px inset green;
}

.edit-post-button {
    background-color: rgb(76, 175, 80);
    border: 1px solid green;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline;
    font-size: 14px;
    font-weight: 200;
    margin: 1px 20px 1px 0px;
    padding: 3px 8px;
}

.edit-post-button:hover {
    background-color: rgb(69, 160, 73);
}

.edit-post-button:active {
    background-color: rgb(51, 144, 58);
    border: 1px inset green;
}

.delete-post-button {
    background-color: rgb(200, 76, 80);
    border: 1px solid green;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline;
    font-size: 14px;
    font-weight: 200;
    margin: 1px 20px 1px 0px;
    padding: 3px 8px;
}

.delete-post-button:hover {
    background-color: rgb(180, 66, 73);
}

.delete-post-button:active {
    background-color: rgb(160, 58, 58);
    border: 1px inset green;
}

/* Input fields ******************************************************************************************** */
input[type="text"] {
    font-size: 14px;
    border-radius: 8px;
    padding: 6px 12px;
    width: 250px;        /* preferred width (usually fills container) */
    max-width: 300px;   /* maximum width */
    min-width: 80px;   /* minimal width */
    margin: 15px;
}

.edit-input{
    margin: 5px;
}

.weather-input {
    font-size: 18px;
    border-radius: 8px;
    padding: 6px 12px;
    width: 80%;        /* preferred width (usually fills container) */
    max-width: 300px;   /* maximum width */
    min-width: 80px;   /* minimal width */
    margin: 15px;
}

.form-input {
    font-size: 16px;
    font-weight: 300;
    border-radius: 8px;
    padding: 6px 12px;
    width: 250px;        /* preferred width (usually fills container) */
    max-width: 300px;   /* maximum width */
    min-width: 80px;   /* minimal width */
    margin: 15px;
}

.login-input {
    font-size: 14px;
    border-radius: 8px;
    padding: 6px 12px;
    width: 250px;        /* preferred width (usually fills container) */
    max-width: 300px;   /* maximum width */
    min-width: 80px;   /* minimal width */
    margin: 15px;
}

.picture-file-input {
    font-size: 14px;
    font-weight: 300;
    border-radius: 8px;
    padding: 8px 14px;
    width: 250px;        /* preferred width (usually fills container) */
    max-width: 300px;   /* maximum width */
    min-width: 80px;   /* minimal width */
    margin: 15px;
}

/* Labels and icons ****************************************************************************************** */
.current-weather-label {
    font-size: 25px;
    font-family: Bahnschrift;
    color: rgb(144, 144, 144);
}

.current-time-label {
    font-size: 18px;
    font-family: Bahnschrift;
    color: rgb(122, 122, 122);
}

.login-title-label {
    font-size: 25px;
    font-family: Bahnschrift;
    color: rgb(122, 122, 122);
    margin-left: 25%;
}

.login-label {
    font-size: 18px;
    font-family: Bahnschrift;
    color: rgb(122, 122, 122);
}

.remember-login-label {
    font-size: 14px;
    font-weight: 400;
    font-family: Bahnschrift;
    color: rgb(122, 122, 122);
}

#temp-icon {
    text-align: left;
}

.data-label {
    align-items: center;
    padding: 5px;
}

.data-icon {
    width: 40px; /* fixed width to align left */
    display: flex;
    justify-content: flex-start;
}

.wind-symbol{
    font-family: Segoe UI emoji;
    font-size: 25px;
}

#description-label {
    font-family: Bahnschrift;
    font-size: 18px;
    color: rgb(0, 111, 111);
}

#cloud-coverage-label {
    font-family: Bahnschrift;
    font-size: 14px;
    color: rgb(0, 111, 111);
}

.section-label {
    font-family: Bahnschrift;
    font-size: 25px;
    color: rgb(0, 111, 111);
}

.sunrise-sunset-label {
    font-family: Bahnschrift;
    font-size: 18px;
    color: rgb(0, 111, 111);
    padding: 20px;
}

.uv-label {
    font-family: Bahnschrift;
    font-size: 18px;
    color: rgb(0, 111, 111);
    padding: 20px;
}

.moonrise-moonset-label {
    font-family: Bahnschrift;
    font-size: 18px;
    color: rgb(0, 111, 111);
    padding: 20px;
}

.moonphase-label {
    font-family: Bahnschrift;
    font-size: 18px;
    color: rgb(0, 111, 111);
    padding: 20px;
}

.form-label {
    font-size: 16px;
    font-weight: 300;
    margin: auto 5px;
}

.email-username-label {
    font-size: 24px;
    font-weight: bold;
    color: rgb(88, 88, 88);
}

.edit-input-label {
    margin: auto 5px;
    font-size: 14px;
    font-weight: 200;
    color: rgb(88, 88, 88);
}

.picture-file-input-label {
    margin: auto 5px;
    font-size: 14px;
    font-weight: 200;
    color: rgb(88, 88, 88);
}

/* Animations ************************************************************************************************ */

    /* Animation templates */
@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

.animated-sunrise {
  animation: float 2.5s ease-in-out infinite;
}

.animated-uv {
    animation: float 2.5s ease-in-out infinite;
}

.weather-icon-animated {
    animation: float 3s ease-in-out infinite;
}

.animated-moon {
    animation: float 2.5s ease-in-out infinite;
}

/* Other ***************************************************************************************************** */
#divider-h-box-data {
    color: red;
}

.profile-picture {
    border-radius: 8px;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.7);
}

.clickable-weather {
    text-decoration: none;
    color: inherit;
}

.clickable-weather:hover {
    opacity: 0.8;
    transition: 0.1s;
    animation: float 1.5s ease-in-out infinite;
}

.page-number-active {
    margin: 4px 8px;
    padding: 0px 7px;
    text-decoration: none;
    width: 28px;
    height: 28px;
    text-align: center;
    border: 1px solid rgb(31, 117, 255);
    border-radius: 4px;
    color: white; 
    background-color: rgb(31, 117, 255);
}

.page-number-inactive {
    margin: 4px 8px;
    padding: 0px 7px;
    text-decoration: none;
    width: 28px;
    height: 28px;
    text-align: center;
    border: 1px solid rgb(31, 117, 255);
    border-radius: 4px;
    color: rgb(31, 117, 255);
    background-color: rgba(255, 255, 255, 0);
}

.page-number-inactive:hover {
    color: white; 
    background-color: rgb(31, 117, 255);
}

/* Unsorted ************************************************************************************************** */
.switch-bar {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    width: fit-content;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.15);
}

.switch-tab {
    padding: 10px 20px;
    background-color: rgb(224, 247, 250);
    color: rgb(0, 121, 107);
    text-decoration: none;
    font-family: Bahnschrift;
    font-weight: bold;
    border-right: 1px solid rgb(178, 223, 219);
    transition: background 0.3s ease;
}

.switch-tab:last-child {
    border-right: none;
}

.switch-tab:hover {
    background-color: rgb(178, 223, 219);
}

.switch-tab.active {
    background-color: rgb(188, 247, 250);
}

@media screen and (max-width: 768px) {
    .base-h-box,
    .base-h-box-index-1,
    .base-h-box-index-2,
    .h-box-main-1,
    .h-box-main-2,
    .h-box-main-3,
    .h-box-main-4,
    .h-box-data {
        flex-direction: column;
        width: 95%;
        margin: 10px auto;
    }

    .v-box-left,
    .v-box-right {
        border: none;
        width: 100%;
        padding: 10px 0;
    }

    .register-grid {
        grid-template-columns: 1fr;
        margin-left: 10px;
        margin-right: 10px;
    }

    .base-container {
        margin: 10px;
    }

    .register-button-container,
    .footer-container {
        padding: 20px;
        margin: 10px;
    }

    .login-title-label {
        margin-left: 10px;
        text-align: center;
    }

    .weather-input,
    .login-input {
        width: 90%;
        max-width: 100%;
    }

    .account-already-container {
        margin: 20px 10px;
        text-align: center;
    }

    .data-content,
    .sunset-sunrise-description-container-sunset,
    .sunset-sunrise-description-container-sunrise,
    .uv-description-container,
    .moonrise-moonset-container,
    .moonphase-illumination-container {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .flash-message-success-container {
        margin: 20px 10px;
        width: auto;
        max-width: 90%;
    }

    .switch-bar {
        width: 100%;
        flex-direction: column;
    }

    .switch-tab {
        border-right: none;
        border-bottom: 1px solid rgb(178, 223, 219);
        width: 100%;
        text-align: center;
    }

    .switch-tab:last-child {
        border-bottom: none;
    }
}