*{ box-sizing: border-box; } img { max-width: 100%; } nav { position: sticky; top: 0; left: 0; z-index: 1; display: flex; align-items: center; text-align: left; justify-content: space-between; padding: 1.5rem 3.5rem; background-color: whitesmoke } @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,700&display=swap"); /* Variables */ :root { --font-family: "Roboto", sans-serf; --normal-font: 400; --bold-font: 700; --bolder-font: 900; --bg-color: #fcfcfc; --primary-color: #000000; --secondary-color: #ff007b; --primary-shadow: #8b8eaf; --secondary-shadow: #21201f; --bottom-margin: 0.5rem; --bottom-margin-2: 1rem; --line-height: 1.7rem; --transition: 0.3s; } /* Variables end */ html { scroll-behavior: smooth; } /* CSS Resets */ * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style-type: none; } a { text-decoration: none; color: var(--primary-color); } a:hover { color: var(--secondary-color); } body { font-family: var(--font-family); } nav h1 { color: var(--primary-color); } nav a { color: var(--primary-color); transition: var(--transition); } nav a:hover { color: var(--secondary-color); border-bottom: 2px solid var(--secondary-color); } nav ul { display: flex; gap: 1.9rem; } nav ul li { font-weight: var(--bold-font); } .burger-menu { color: var(--primary-color); font-size: 2rem; border: 0; background-color: transparent; cursor: pointer; display: none; } .main-container{ background-color: whitesmoke; height: 100vh; padding:10px; display:flex; flex-direction: column; } { box-sizing: border-box; } body { background-color: whitesmoke; padding: 20px; font-family: Arial; } /* Center website */ .main { max-width: 1000px; margin: auto; } h1 { font-size: 50px; word-break: break-all; } .row { margin: 10px -16px; } /* Add padding BETWEEN each column */ .row, .row > .column { padding: 8px; } /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; display: none; /* Hide all elements by default */ } /* Clear floats after rows */ .row:after { content: ""; display: table; clear: both; } /* Content */ .content { background-color: rgba(245, 245, 245, 0.817); padding: 10px; } /* The "show" class is added to the filtered elements */ .show { display: block; } /* Style the buttons */ .btn { border: none; outline: none; padding: 12px 16px; background-color: rgba(245, 245, 245, 0.717); cursor: pointer; } .btn:hover { background-color: #ff006f; color: whitesmoke; } .btn.active { background-color: #ff006f; color: whitesmoke; }