html { scroll-behavior: smooth; height: 100%; } body { margin: 0; padding: 0; background-color: #f4f4f4; display: flex; flex-direction: column; height: 100%; } header { background-color: #323232; color: white; padding: 20px; text-align: center; } p { line-height: 150%; margin-bottom:0; } section { font-family: 'Roboto', sans-serif; display: flex; align-items: flex-start; gap: 2rem; padding: 20px 3% 20px 3%; margin: 20px 10% 20px 10%; background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } h1, h2 { font-family: 'Playfair Display', serif; width: 100%; text-align: center; font-weight: normal; } .green-button{ padding: 15px; background-color: #28a745; color: white; font-size: 16px; border: none; cursor: pointer; border-radius: 5px; width: fit-content; margin-top: 1rem; } .green-button:hover{ background-color: #218838; } .top-button{ padding: 15px; background-color:rgba(255, 255, 255, 0.5); color: white; font-size: 16px; border: none; cursor: pointer; border-radius: 5px; } .top-button:hover{ background-color: rgba(255, 255, 255, 0.7); } footer { text-align: center; padding: 20px; background-color: #333; color: white; margin: auto 0 0 0; } .item { flex: 1; display:flex; flex-direction: column; height: 100%; } .item>h2 { margin-top: -0.5rem; } @media (max-width: 920px) { section:nth-child(odd) { flex-direction: column-reverse; } section:nth-child(even) { flex-direction: column; } } @media (max-width: 1510px) { section { margin-left: 10px; margin-right: 10px; } } @media (max-width:1200px)and (min-width:920px) { .item { font-size: small; } } @media (max-width: 920px) { .top-button { font-size: 14px; padding: 10px; } } @media (hover: none) { .top-button:hover, .hamburger:hover{ opacity:0.5; } } img { width: 100% } .haken { margin-top: 1rem; color: #218838; } .menu { position: fixed; padding-top: 100px; top: 0; left: -300px; width: 250px; height: 100vh; background: rgba(50, 50, 50, 0.8); color: white; transition: left 0.3s ease; } .menu-top { padding: 0 30px 20px 30px; background: #323232; } .menu a { color: white; text-decoration: none; display: block; padding: 10px 0; font-size: 18px; } .active-link, .menu a:hover { background-color: #444; } .hamburger { position: fixed; font-size: clamp(1rem, 5vw, 2rem); color: #333; cursor: pointer; padding: 15px 18px 15px 18px; top: 20px; left: 10px; background-color: #fff; border: 2px solid #323232; border-radius: 5px; z-index: 2; opacity: 0.5; } .hamburger:hover { opacity:0.7; } .hamburger:active { opacity: 0.2; } .menu.open { left: 0; } input { border-radius: 8px; height: 2rem; font-size:1.2rem; } textarea { height: 10rem; border-radius: 8px; font-size: 1rem; resize:none; } form { display:none; flex-direction: column;gap:1rem; width:80%; max-width:460px; }