header {
    font-family: Arial, Helvetica, sans-serif;
}

body {
    width: 100%; /* or set to a specific width */
    background-color: black;
}

#container {
    display: flex;
}

#titleContainer {
    margin-left: 25%;
    margin-top: 16px;
}

#optionsContainer {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    margin-left: 36%;
}

#contact, #home {
    text-decoration: none;
    color: #dddddd;
    font-weight: bold;
}

.toggleModeBtn {
    text-decoration: none;
}

.fa-sun, .fa-moon {
    color: white;
    margin-left: 20px;
    margin-top: 1px;
}

.light-mode {
    background-color: white;
    .fa-moon {
        color: black;
    }

    #home {
        color: black;
    }

    #contact {
        color: black;
    }

    #titleText1, #titleText2 {
        color: #111;
    }

    #ingredientTB {
        background-color: white;
        color: black;
    }    

    #allergyTB {
        background-color: white;
        color: black;
    }

    #contactTitle {
        color: black;
    }

    .contactTitles {
        color: black;
    }

    .dynamic-border {
        color: black;
    }
}

.dark-mode {
    background-color: black;
    .fa-sun {
        color: #dddddd;
    }

    #home {
        color: #dddddd;
    }

    #contact {
        color: #dddddd;
    }

    #titleText1, #titleText2 {
        color: #dddddd;
    }

    #ingredientTB {
        background-color: black;
        color: #dddddd;
    }

    #allergyTB {
        background-color: black;
        color: #dddddd;
    }

    #contactTitle {
        color: #dddddd;
    }

    .contactTitles {
        color: #dddddd;
    }

    .dynamic-border {
        color: #dddddd;
    }
}

#titleText1, #titleText2 {
    color: #dddddd;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: xx-large;
    margin-top: 5%;
}

#titleText2 {
    margin-top: -20px;
}

#frontPage {
    text-align: center;
    padding: 30px;
}

#recipePage {
    margin-top: 20px;
    text-align: center;
}

.textBox {
    border-radius: 20px;  /* Rounded corners */
    width: 200px;
    height: 25px;
    background-color: black;
    height: 40px;
    width: 350px;
    outline: none;
    color: #dddddd;
    padding: 12px 20px;
    margin-top: 5%;
    border-color: #cdcdcd;
    border-width: 2px;
    border-style: solid;
}

#allergyTB {
    margin-left: 30px;

}

::placeholder {
    font-family: Arial, Helvetica, sans-serif;
    color: #cbcbcb;
    font-weight: bold;
}

#submitButton {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: #dddddd;
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin-top: 2%;
  width: 200px;
  height: 40px;
}

#returnButton, #shuffleButton, #copyButton {
    padding: 0.6em 2em;
    border: none;
    outline: none;
    color: #dddddd;
    background: #222;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin-top: 2%;
    width: 150px;
    height: 40px;
    margin-left: 20px;
    margin-top: 5%;
}

#submitButton:before {
    content: "";
    background: linear-gradient(
        45deg,
        #ff0000,
        #ff7300,
        #fffb00,
        #48ff00,
        #00ffd5,
        #002bff,
        #7a00ff,
        #ff00c8,
        #ff0000
    );
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    -webkit-filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing-submitButton 20s linear infinite;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

@keyframes glowing-submitButton {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}

#submitButton:after {
    z-index: -1;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #222;
    left: 0;
    top: 0;
    border-radius: 10px;
}

#img{
    margin-top: 5%;
    max-height: 700px;
}

.popup {
    visibility: hidden;  /* Hide popup by default */
    min-width: 150px;    /* Set a minimum width */
    background-color: #333; /* Dark background */
    color: #fff;         /* White text color */
    text-align: center;
    border-radius: 6px;  /* Rounded corners */
    padding: 8px 0;      /* Padding */
    position: fixed;     /* Fixed positioning */
    z-index: 1;          /* Sit on top of other content */
    left: 50%;           /* Center the popup horizontally */
    bottom: 20px;        /* Position at the bottom */
    transform: translateX(-50%); /* Center align the popup */
    opacity: 0;          /* Start fully transparent */
    transition: opacity 0.5s, visibility 0.5s; /* Transition for fading in/out */
}

.dynamic-border {
    display: inline-block; /* Ensures the div does not take full width */
    padding: 10px; /* Adds some spacing between the text and the border */
    margin: 10px; /* Optional: Adds space around the div */
    font-size: 16px; /* Optional: Adjust font size */
    font-family: Arial, sans-serif; /* Optional: Set font family */
    color: #dddddd;
}

#contactTitle {
    color: #dddddd;
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-large;
    margin-top: 7%;
    text-align: center;
}

.contactTitles {
    color: #dddddd;
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 41%;
    margin-top: 30px;
}

.contactText {
    margin-left: 41%;
    margin-top: -10px;
    width: 250px;
    height: 30px;
    border-radius: 10px;
    border: 2px solid gray;
    color: black;
    outline: none;
}

#messageText {
    margin-top: -10px;
    margin-left: 41%;
    border-radius: 10px;
    width: 250px;
    resize: none;
    border: 2px solid gray;
    color: black;
    outline: none;
}

.submitButton {
    margin-left: 48.5%;
}