body { background-color: black; /* width: 90%; height: 65%; */ } .landing { position: relative; } .budapest { height: 80vh; width: 100%; position: relative; } .budapest img { position: absolute; transform: translate(-50%,-50%); top: 55%; left: 30%; color: goldenrod; font-size: 12rem; } .header { display: flex; justify-content: space-between; align-items: center; padding: 20px; color:white; } .heading { /* color:red; */ position: absolute; top: 3rem; left: 3rem; font-weight: 700; font-size: 2rem; } .signature { /* color: red; */ position: absolute; top: 3rem; right: 3rem; font-weight: 700; font-size: 2rem; } nav { /* grid-area: nav;*/ display: flex; gap: 15px; justify-content: center; align-items: center; padding: 15px; } a { text-decoration: none; color: red; font-weight: bold; } button { /* color: black; */ background-color: greenyellow; /* position: absolute; */ /* width: fit-content; */ border: none; padding: 25px; } button:hover { background-color: green; } @media (max-width: 1024px) { nav { flex-direction: column; } .heading { font-size: 16px; } .signature { font-size: 16px; } } @media (max-width: 786px) { nav { flex-direction: column; margin-top: 60px; } .header { justify-content: center; flex-direction: column; flex-wrap: wrap; } .heading { font-size: 12px; } .signature { font-size: 12px; } nav button { width: 90%; } .budapest { display: flex; justify-content: center; align-items: center; height: 400px; width: 100%; margin-top: 20px; } .budapest img { display: block; height: 100%; width: 100%; margin-left: 20%; margin-top: 44px; /* margin: 44px; */ } }