* { margin: 0; padding: 0; box-sizing: border-box; } body { max-width: 1600px; margin: 0 auto; font-family: "Ubuntu", sans-serif; background-color: #2a2828; } p { color: white; } /* EOS ( header) */ header { display: flex; align-items: center; background-color: #313131; height: 70px; flex-direction: row; border-radius: 5px; margin: 7px; } .logo { flex-grow: 1; } .logo img { width: 150px; margin-left: 40px; } /* EOS - navigation */ nav { margin-right: 40px; } nav li { display: inline-block; list-style-type: none; margin-right: 20px; } nav li a { text-decoration: none; color: #734f96; /*border: 1px solid #734f96;*/ } hr { background-color: #734f96; } /* EOS - navigation icons */ .menu-icon { display: none; margin-right: 30px; } .welcome { /*background: url("image/background.webp");*/ min-height: calc(100vh - 70px); background-size: cover; /*background-position: center;*/ text-align: center; } h1 { color: #734f96; margin-top: 50px; margin-bottom: 50px; } h2 { color: #734f96; margin-top: 50px; margin-bottom: 50px; } h3 { color: #734f96; margin-top: 50px; margin-bottom: 50px; } a { color: #734f96; margin-top: 50px; margin-bottom: 50px; } h4 { color: #734f96; margin-top: 50px; margin-bottom: 50px; } .text { color: #734f96; margin-top: 50px; margin-bottom: 50px; } p { margin: 10px; } .p { text-align: center; } @media (max-width: 600px) { header { position: relative; } header nav { position: absolute; top: 70px; background-color: #313131; width: 100%; display: none; } .menu-icon { display: block; color: var(--special-white); font-size: 23px; } header nav li { display: block !important; text-align: center; margin-top: 10px; margin-bottom: 10px; } .code-box { width: auto; height: auto; } } /*Code Box*/ .code-box { position: relative; width: 600px; height: auto; border: 1px solid #734f96; padding: 5px; overflow: auto; background-color: #734f96; color: black; margin: auto; text-align: left; border-radius: 7px; } /* EOS - Welcome*/ /* About sekce */ .about-section { margin: 45px 0; } .about-section-wrapper { width: 65%; margin: 0 auto; display: flex; gap: 20px; } .about-text { flex: 1; } .about-img { flex: 1; } img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 768px) { .about-section-wrapper { flex-direction: column; width: 90%; margin: 0 auto; } .about-text { text-align: left; } .about-img { text-align: center; } .about-text-p { padding-top: 15px; } .code-box { width: auto; height: auto; } } footer { text-align: center; margin-top: 20px; margin-bottom: 20px; } /* Go to go */ #scrollToTopBtn { display: none; position: fixed; bottom: 20px; right: 20px; /*butoon přes obsah*/ z-index: 99; outline: none; cursor: pointer; padding: 15px; border-radius: 50%; background-color: transparent; }