@property --text-color { syntax: "<color>"; inherits: false; initial-value: #DDD; } @property --title-color { syntax: "<color>"; inherits: false; initial-value: #00f0d1; } @property --bg-color { syntax: "<color>"; inherits: false; initial-value: #000; } .content { padding: 1em; background-color: rgba(0, 0, 0, 0.5); max-width: 900px; margin: 0 auto; } body { width: 100%; margin: 0; background-color: var(--bg-color); background-image: url("background.png"); background-size: cover; background-position: center; background-repeat: no-repeat; font-family: "Arimo", sans-serif; text-align: justify; text-justify: inter-word; color: var(--text-color); font-size: 26px; } #main { top: 0; padding: 20px; padding-bottom: 0px; } h1 { text-align: center; font-weight: bold; font-size: 150%; } h2 { font-weight: 100; text-align: center; margin-top: 0px; font-size: 120%; color: var(--title-color); } h3 { text-align: center; font-weight: 100; margin-top: 0px; } h4 { text-align: center; font-weight: 100; margin-top: 0px; color: var(--title-color); } .gallery { font-size: 0; /* removes inline-block spacing gap */ margin-bottom: 50px; } .portfolio { display: inline-block; width: 25%; /* 4 items per row */ aspect-ratio: 16 / 9; object-fit: cover; } a { text-decoration: none; } .selected a{ background-color: var(--text-color); color: var(--bg-color); } .contact { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .contactinfo { position: relative; z-index: 2; /* always on top */ margin-bottom: 20px; } <img src="getintouch2.png" class="img-hover" alt="get in touch button"> .btn { position: relative; display: inline-block; } .btn img { width: 100%; display: block; transition: opacity 0.3s ease; } .btn:hover { content: url("getintouch2.png"); } @media (max-width: 1090px) { body { font-size: clamp(32px, 4vw, 56px); } .portfolio { width: 50%; /* 2 per row instead of 4 */ } }