/* base styles */ html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { background-color: #230a3b; margin: 0; color: #fff; font-family: 'Prompt', sans-serif; text-align: center; } /* header */ header { background-color: #230a3b; color: #ffffff; padding: 20px 30px; } header h1 { margin: 0; font-size: 32px; line-height: 1.2; font-weight: bold; } /* navigation */ @media (min-width: 769px) { nav { display: flex; justify-content: space-between; align-items: center; height: 80px; /*background-color: #000;*/ color: #fff; padding: 0 15px; font-size: 18px; } nav img { width: 25%; } nav ul.menu { list-style-type: none; margin: 0; padding: 0; display: flex; } nav ul.menu li { margin-right: 20px; } nav ul.menu li:last-child { margin-right: 0; } nav ul.menu li a { color: #fff; text-decoration: none; /* font-weight: bold; */ } nav a.icon { display: none; } nav .mobile { display: none; } } @media (max-width: 768px) { nav { flex-direction: column; height: auto; } nav img { width: 85%; } nav ul.menu { display: none; } nav a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; } nav .mobile { overflow: hidden; /* background-color: #333; */ position: relative; display: block; } nav .mobile #hamburger { display: none; } nav .mobile a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; display: block; } nav .mobile a.icon { background: black; display: block; position: absolute; right: 0; top: 0; } } footer { background-color: #000; color: #fff; padding: 10px; text-align: center; }