* { background-color: transparent; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; margin: 0pt; } body, html{ height: 70.7%; } h1{ position: relative; color: bisque; text-align: center; font-size: 72px; top: 40%; font-size: 6vw; } h2{ font-size: 28px; font-size: 2vw; color: bisque; text-align: center; } .heroImage{ background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)), url("banner.png"); height: 200%; background-position: center; background-repeat: no-repeat; background-size:cover; position: relative; object-fit:contain; } .title{ color:bisque; font-weight: bolder; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; text-align: center; position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); } .button1{ border-radius: 8px; background-color: #285a29; color: bisque; font-size: 18px; border: 2px solid; width: 60%; padding: 5px 10px; padding: 2vw; text-decoration: none; text-align: center; position: absolute; top: 140%; left: 50%; transform: translate(-50%, -50%); font-size: 3vw; } .button1:hover { background-color: bisque; color: #285a29; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; } .navbar{ display: flex; background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)), url("header.png"); height: 160px; justify-content: space-around; align-items: center; } .bannerText a{ color: bisque; font-weight: bold; font-size: 38px; text-decoration:none; text-align:center; } .navList{ list-style-type: none; } .navList .listItem{ display: inline-block; padding: 20px 10px; } .navList a{ color: bisque; text-decoration: none; font-weight: bold; font-size: 20px; } .navList a:hover{ color: darkred; } p{ color: darkred; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bold; padding: 3px; } .homeText{ display: flex; font-size: 18px; flex-direction: column; text-align: left; justify-content: center; align-self: center; margin-left: 5%; margin-top: 5%; margin-right: 5%; } .plant1{ display: flex; justify-content:space-around; align-items: center; margin-top: 20px; } .pic1{ align-items: center; padding: 20px; padding-right: 50px; } .text1{ align-items: center; padding: 20px; width: 500px; } .plant2{ display: flex; justify-content:space-around; align-items: center; } .pic2{ align-items: center; padding: 20px; padding-right: 50px; } .text2{ align-items: center; padding: 20px; width: 500px; } .plant3{ display: flex; justify-content:space-around; align-items: center; } .pic3{ align-items: center; padding: 20px; padding-right: 50px; } .text3{ align-items: center; padding: 20px; width: 500px; }