body { margin: 15px; margin-top: 45px; background-color: #828282; } .content { border-radius: 25px; padding: 10px; background: linear-gradient(270deg, #a52a2a, #d2691e, #ee6e40, #ff7f50, #ff7f61, #ff8f61); background-size: 1200% 1200%; -webkit-animation: BackgroundGradientChange 6s ease infinite; -moz-animation: BackgroundGradientChange 6s ease infinite; -o-animation: BackgroundGradientChange 6s ease infinite; animation: BackgroundGradientChange 6s ease infinite; } @-webkit-keyframes BackgroundGradientChange { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes BackgroundGradientChange { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-o-keyframes BackgroundGradientChange { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes BackgroundGradientChange { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } header { display: block; padding: 10px; margin: 10px; width: 95.75%; overflow-x: auto; overflow-y: hidden; white-space: nowrap; } header img { padding: 15px; border-radius: 25px; display: inline-block; margin-left: auto; margin-right: auto; width: 300px; height: auto; } header a, .fp-header a, .order-button { list-style-type: none; margin: 0px; padding: 10px; display: inline-block; transition: background-color 1s; color: #ffffff; background-color: #a52a2a; text-align: center; padding: 14px 16px; text-decoration: none; font-family: "M PLUS 1", sans-serif; border-radius: 25px; border: none; } header a:hover, .fp-header a:hover, .order-button:hover { background-color: #d2691e; } .current { background-color: #ff8f61; } .current:hover { background-color: #ff7f61; } .fp-header { height: 30rem; background-position: right; background-image: url("../img/lyza.png"); padding: 30px; font-family: "M_PLUS_1", sans-serif; } main { margin: 10px; padding: 10px; border-radius: 25px; background-color: #d2691e; font-family: "Open Sans", sans-serif; color: #ffffff; } main p { font-family: "Roboto", sans-serif; } main a { text-decoration: none; color: #dddddd; transition: color 500ms; } main a:hover { color: #ffffff; } ::-webkit-scrollbar { border-radius: 25px; } ::-webkit-scrollbar-track { visibility: hidden; margin: 20px; } ::-webkit-scrollbar-thumb { border-radius: 25px; background-color: #544c4a; } ::-webkit-scrollbar-thumb:hover { background-color: #363636; } .flex-w { display: flex; flex-direction: row; } .flex-w div { flex: 50%; padding: 10px; margin: 10px; background-color: #a52a2a; border-radius: 25px; } .flex-w-nc { display: flex; flex-direction: row; } .flex-w-nc div { padding: 10px; margin: 10px; } .cover { width: 95%; height: auto; } @media (max-width: 800px) { body { margin: 0px; } .content { width: 100%; border-radius: 0px; } .flex-w { flex-direction: column; } .flex-w div { flex: 100% } header { font-size: 20px; } }