.container { height: 100%; } @media screen and (min-width: 768px) { .container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; height: 100%; } .container header { flex: 0 1 auto; } .container main { flex: 1 1 auto; overflow: auto; } } :root { font-size: 16px; } body { background-color: #FFD700; font-family: Arial, Helvetica, Verdana, Geneva, sans-serif; margin: 0; } .m-header { background-color: black; display: flex; flex-direction: row; justify-content: center; } .m-header--logo { display: none; } @media screen and (min-width: 768px) { .m-header--logo { display: block; } } .m-header--headline { margin-left: 20px; margin-top: 20px; margin-bottom: 20px; text-align: center; } @media screen and (min-width: 768px) { .m-header--headline { margin-top: auto; margin-bottom: auto; } } .m-header--headline__h1 { margin-left: auto; margin-right: auto; text-decoration: none !important; } @media screen and (max-width: 768px) { .m-navbar { background-color: black; } .m-navbar ul { list-style: none; padding: 0; margin: 0; } .m-navbar .site-nav { display: none; } .m-navbar .site-nav.shown { display: block; } .m-navbar .dropdown-content { display: none; padding-top: 15px; } .m-navbar__navheader { border-top: 5px; border-right: 0; border-bottom: 0; border-style: solid; border-color: #7c0e11; border-top-left-radius: 20px; padding-left: 20px; padding-top: 15px; padding-bottom: 15px; padding-right: 20px; background-color: #F3B109; display: flex; flex-direction: row; justify-content: space-between; } .m-navbar__navheader--header { margin: auto 0; } .m-navbar__navheader--toggleIcon { cursor: pointer; } .m-navbar__navheader--toggleIcon div { width: 35px; height: 5px; background-color: black; margin: 5px 0; } .m-navbar li:last-child { border-bottom: 2px solid #7c0e11; } .m-navbar li { background-color: #F3B109; border-left: 2px; border-right: 0; border-bottom: 0; border-style: solid; border-color: #7c0e11; border-top-left-radius: 0; padding-left: 15px; padding-top: 15px; padding-bottom: 15px; } .m-navbar li a { color: #7c0e11; text-decoration: none; } .m-navbar li:hover { background-color: #7c0e11; border-color: #F3B109; } .m-navbar li:hover > a { color: #F3B109; } .m-navbar .dropdown:hover > .dropdown-content { display: block; } } @media screen and (min-width: 768px) { .m-navbar { background-color: black; border: solid black 1px; border-top: 0; border-bottom: 0; text-align: center !important; margin: 0; padding: 0; } .m-navbar ul, .m-navbar > ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; } .m-navbar li { flex-grow: 1; flex-shrink: 1; flex-basis: 0; padding: 10px 0; background-color: #F3B109; border-top: 5px; border-right: 0; border-bottom: 0; border-style: solid; border-color: black; border-top-left-radius: 20px; } .m-navbar li a { color: #7c0e11; text-decoration: none !important; font-weight: bolder; } .m-navbar .dropdown-content { display: none; flex-direction: row !important; background-color: black; } .m-navbar li.dropdown:hover > .dropdown-content { position: absolute; left: 0; right: 0; overflow: visible; max-width: 1198px; margin: 0 auto; display: flex; flex-direction: column; margin: 10px auto !important; display: flex; } .m-navbar li.dropdown:hover > .dropdown-content header { flex: 0 1 auto; } .m-navbar li.dropdown:hover > .dropdown-content main { flex: 1 1 auto; overflow: auto; } .m-navbar li.dropdown:hover > .dropdown-content > a { color: #F3B109; font-weight: bolder; } .m-navbar li:hover { background-color: #7c0e11 !important; border-color: #F3B109; } .m-navbar li:hover > a { color: #F3B109; } } .m-content { background-color: #FFFFCC; border: 1px solid black; padding: 20px; } @media screen and (min-width: 768px) { .m-content { overflow: auto; } } /*# sourceMappingURL=progaslicht.css.map */