/* Creating css variable at root */ :root { --light-background-01: #c0bcbc; --light-background-02: #9caaaf; --light-background-03: #dde7b1; } /* preload image - workaround for image flicker */ body:after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url(../img/gallup_park.jpg); } /* .wrapper { width: 100%; height: 100%; background-color: #1a253a; background-image: url(../img/img100.jpg), url(../img/img104.jpg); background-size: 40vh, cover ; background-repeat: no-repeat; background-position: bottom right, center; display: flex; flex-direction: row; justify-content: center; gap: 20px; } */ /* Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements.*/ main .image-intro { padding: 100px; } main .image-intro p { font-size: 14px; font-family: Lato; line-height: 30px; } /* IMAGE TRANSITION SECTION */ .image-transition { width: 100%; padding: 60px 0; background-color: var(--light-background-01); display: flex; justify-content: center; gap: 20px; } .image:nth-child(1) { width: 300px; height: 150px; background-image: url(../img/kerosine_stove.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; justify-items: center; border-radius: 10px; } .image:nth-child(2) { width: 300px; height: 150px; background-image: url(../img/img101.png); background-size: cover; background-repeat: no-repeat; background-position: center; justify-items: center; border-radius: 10px; } .image:hover { background-image: url(../img/gallup_park.jpg); transition: all ease-in-out 2ms; } /* IMAGE BORDER SECTION */ .image-border { width: 100%; padding: 60px 0; background-color: var(--light-background-02); display: flex; justify-content: center; gap: 20px; } .image-border img { width: 300px; height: 150px; background-image: url(../img/kerosine_stove.jpg); border: 1px solid #ddd; border-radius: 4px; padding: 5px; } .image-border img:hover { box-shadow: 0 0 2px 1px #008cba80; } /* IMAGE REFLECTION SECTION */ .image-mirror { width: 100%; padding: 60px 0; background-color: var(--light-background-03); display: flex; justify-content: center; gap: 20px; } .image-mirror img:nth-child(1) { width: 300px; height: 150px; border-radius: 20px; -webkit-box-reflect: left 0px linear-gradient(to bottom, #00000000, #00000066); } .image-mirror img:nth-child(2) { width: 300px; height: 150px; border-radius: 20px; -webkit-box-reflect: below 0px linear-gradient(to bottom, #00000000, #00000066); } .image-mirror img:nth-child(3) { width: 300px; height: 150px; border-radius: 20px; -webkit-box-reflect: right 0px linear-gradient(to bottom, #00000000, #00000066); }