@import "calorie-calculator.css";

.banner { /* Banner Styles */
    width: 100%;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 24px;
    float: left;
    text-decoration: none;
    cursor: pointer;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.noselect { /* No Highlighting */
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }

.banner-head-1 { /* Home Header */
    float: left; 
    overflow-wrap: normal; 
    margin-left: 200px;
    margin-right: 200px;
    text-decoration: none;
    color: black;
    display:block;
}

.banner-head-2 { /* Food Header */
    float: left; 
    overflow-wrap: normal; 
    margin-left: 55px;
    text-decoration: none;
    color: black;
    display:block;
}

.banner-head-3 { /* Exercise Header */
    float: left; 
    overflow-wrap: normal; 
    margin-left: 55px;
    text-decoration: none;
    color: black;
    display:block;
}

.banner-head-4 { /* Calculators Header */
    float: left; 
    overflow-wrap: normal; 
    margin-left: 55px;
    text-decoration: none;
    color: black;
    display:block;
}

.banner-head-5 { /* Calculators Header */
    float: left; 
    overflow-wrap: normal; 
    margin-left: 55px;
    text-decoration: none;
    color: black;
    display:block;
}

.dropdown { /* Dropdown Content */
    cursor: pointer;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 24px;
    display:none;
    position:absolute;
    width: 100%;
    float: left;
    text-decoration: none;
    padding-right: 80px;
    margin: 0px;
    border: 0px;
}

.noDecoration { /* No Text Decoration */
    text-decoration: none;
    color: black;
}

.dropdown-content {
    display: none;
    padding-left: 20px;
}

.banner-logo {
    height: 40px; 
    border: 10px solid white;
    border-radius: 12px;
    margin-top: 5px;
}

.banner-logo-responsive {
    margin-left: 150px;
    height: 43px; 
    margin-top: 5px; 
    margin-bottom: 5px;
    border: 10px solid white;
    border-radius: 12px;
    margin-left: 350px;
}

.mobile-logo {
    height: 80px;
    padding: none;
    border: 10px white solid;
    border-radius: 8px;
}

@media screen and (min-width: 1920px) { /* Responsive */
    .banner-head-1 { /* Home Header */
        margin-left: 200px;
        margin-right: 200px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 55px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 55px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 55px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 55px;
    }
}

@media screen and (max-width: 1920px) {
    .banner-head-1 { /* Home Header */
        margin-left: 200px;
        margin-right: 200px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 55px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 55px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 55px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 55px;
    }
}

@media screen and (max-width: 1800px) {
    .banner-head-1 { /* Home Header */
        margin-left: 140px;
        margin-right: 150px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 50px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 50px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 50px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 50px;
    }
}

@media screen and (max-width: 1600px) {
    .banner-head-1 { /* Home Header */
        margin-left: 190px;
        margin-right: 160px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 45px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 45px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 45px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 45px;
    }
}

@media screen and (max-width: 1550px) {
    .banner-head-1 { /* Home Header */
        margin-left: 335px;
        margin-right:  40px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 25px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 25px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 25px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 25px;
    }
    .banner-logo {
        height: 35px;
    }
}

@media screen and (max-width: 1440px) {
    .banner-head-1 { /* Home Header */
        margin-left: 315px;
        margin-right:  40px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 25px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 25px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 25px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 25px;
    }
    .banner-logo {
        height: 35px;
    }
}

@media screen and (max-width: 1200px) {
    .banner-head-1 { /* Home Header */
        margin-left: 225px;
        margin-right:  25px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 20px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 20px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 20px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 20px;
    }
    .banner-logo {
        height: 32px;
    }
}

@media screen and (max-width: 1130px) {
    .banner-head-1 { /* Home Header */
        margin-left: 285px;
        margin-right:  25px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 20px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 20px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 20px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 20px;
    }

    .banner-logo {
        height: 29px;
    }
}

@media screen and (max-width: 1070px) {
    .banner-head-1 { /* Home Header */
        margin-left: 335px;
        margin-right:  25px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 20px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 20px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 20px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 20px;
    }

    .banner-logo {
        height: 27px;
    }
}

@media screen and (max-width: 1024px) {
    .banner-head-1 { /* Home Header */
        margin-left: 395px;
        margin-right:  25px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 20px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 20px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 20px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 20px;
    }

    .banner-logo {
        height: 22px;
    }
}

@media screen and (max-width: 860px) {
    .banner-head-1 { /* Home Header */
        margin-left: 360px;
        margin-right:  25px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 20px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 20px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 20px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 20px;
    }

    .banner-logo {
        height: 20px;
    }
}

@media screen and (max-width: 760px) {
    .banner-head-1 { /* Home Header */
        margin-left: 395px;
        margin-right:  25px;
    }
    
    .banner-head-2 { /* Food Header */
        margin-left: 20px;
    }
    
    .banner-head-3 { /* Exercise Header */
        margin-left: 20px;
    }
    
    .banner-head-4 { /* Calculators Header */
        margin-left: 20px;
    }
    
    .banner-head-5 { /* Calculators Header */
        margin-left: 20px;
    }
    .banner-logo {
        height: 19px;
    }
}

@media screen and (max-width: 730px) {
    .dropdown { /* Dropdown Content */
        display:block;
    }

    .dropdown-content {
        margin-left: 300px;
        display: block;
    }

    .banner-head-1 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-2 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-3 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-4 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-5 { /* Hide Main Menu */
        display:none;
    }
    .banner-logo-responsive {
        margin-left: 500px;
    }
}

@media screen and (max-width: 700px) {
    .dropdown { /* Dropdown Content */
        display:block;
    }

    .dropdown-content {
        margin-left: 330px;
        display: block;
    }

    .banner-head-1 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-2 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-3 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-4 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-5 { /* Hide Main Menu */
        display:none;
    }
    .banner-logo-responsive {
        margin-left: 500px;
    }
}

@media screen and (max-width: 660px) {
    .dropdown { /* Dropdown Content */
        display:block;
    }

    .dropdown-content {
        margin-left: 350px;
        display: block;
    }

    .banner-head-1 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-2 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-3 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-4 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-5 { /* Hide Main Menu */
        display:none;
    }
    .banner-logo-responsive {
        margin-left: 530px;
    }
}

@media screen and (max-width: 630px) {
    .dropdown { /* Dropdown Content */
        display:block;
    }

    .dropdown-content {
        margin-left: 430px;
        display: block;
    }

    .mobile-logo {
        height: 65px;
    }

    .banner-head-1 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-2 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-3 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-4 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-5 { /* Hide Main Menu */
        display:none;
    }
    .banner-logo-responsive {
        margin-left: 560px;
    }
}

@media screen and (max-width: 550px) {
    .dropdown { /* Dropdown Content */
        display:block;
    }

    .dropdown-content {
        margin-left: 480px;
        display: block;
    }

    .mobile-logo {
        height: 55px;
    }

    .banner-head-1 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-2 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-3 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-4 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-5 { /* Hide Main Menu */
        display:none;
    }
    .banner-logo-responsive {
        margin-left: 590px;
    }
}

@media screen and (max-width: 480px) {
    .dropdown { /* Dropdown Content */
        display:block;
    }

    .dropdown-content {
        margin-left: 520px;
        display: block;
    }

    .mobile-logo {
        height: 50px;
    }

    .banner-head-1 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-2 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-3 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-4 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-5 { /* Hide Main Menu */
        display:none;
    }
    .banner-logo-responsive {
        margin-left: 600px;
    }
}

@media screen and (max-width: 430px) {
    .dropdown { /* Dropdown Content */
        display:block;
    }

    .dropdown-content {
        margin-left: 550px;
        display: block;
    }

    .mobile-logo {
        height: 45px;
    }

    .banner-head-1 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-2 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-3 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-4 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-5 { /* Hide Main Menu */
        display:none;
    }
    .banner-logo-responsive {
        margin-left: 630px;
    }
}

@media screen and (max-width: 395px) {
    .dropdown { /* Dropdown Content */
        display:block;
    }

    .dropdown-content {
        margin-left: 590px;
        display: block;
    }

    .mobile-logo {
        height: 38px;
    }

    .banner-head-1 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-2 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-3 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-4 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-5 { /* Hide Main Menu */
        display:none;
    }

    .banner-logo-responsive {
        margin-left: 630px;
    }
}

@media screen and (max-width: 360px) {
    .dropdown { /* Dropdown Content */
        display:block;
    }

    .dropdown-content {
        margin-left: 625px;
        display: block;
    }

    .mobile-logo {
        height: 33px;
    }

    .banner-head-1 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-2 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-3 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-4 { /* Hide Main Menu */
        display:none;
    }

    .banner-head-5 { /* Hide Main Menu */
        display:none;
    }

    .banner-logo-responsive {
        margin-left: 670px;
    }
}