:root { --primary: #4A5FB5; --secondary: #4A95B5; --tertiary: #cecccc; } body { margin: 0; padding-top: 60px; /* the space between body and the top edge of the websit*/ background-color: var(--primary); font-family: 'Josefin Sans', sans-serif; } /* h1 { color: var(--tertiary); } */ #hero { background-color: var(--secondary); text-align: center; padding: 100px; /*the size of hero section*/ } /* hero section Alex to Algorithms Logic Effort Xecution*/ #hero h1 { color: var(--tertiary); /* margin-bottom: 0.25rem; */ /*add a margin in the bottom of h1*/ position: relative; /* does not move the h1; allows ::after with position:absolute to align to this h1 */ display: inline-block; /* allow the hover effect display inside the h1 block */ transition: color 0.1s ease; } #hero h1:hover { color: transparent; } #hero h1:hover::after { content: "Algorithms Logic Effort Xecution"; position: absolute; top: 0; left: 0; /* white-space: pre-line;*/ /*allow \n in content to create multiple lines */ text-align: left; color: var(--tertiary); } /* desktop menu */ #desktopMenu { position: fixed; top: 0; left: 0; width: 100%; background-color: var(--primary); padding: 0.5rem 0; z-index: 1000; /*keep menu above page content*/ } #mobileMenu .menuItem { padding: 0.3rem 0; } /* display desktop menu on the top of website */ #desktopMenu ul { list-style-type: none; /* make the menu none of style */ display: flex; /* make menu items (li) appear in a horizontal row */ gap: 2rem; justify-content: center; margin: 0; padding: 0; } /* sytling all container */ .container { display: flex; /* width: 100%; */ /* Make this element as wide as its parent container which is here*/ max-width: 1000px; /* container reform to the box */ margin: 1rem auto; padding: 1rem; border: 3px solid #000; border-radius: 10px; background-color: var(--secondary); color: #000000; } /* styling to the six different sections */ #aboutme, #Mission, #skills, #Education, #gallery, #Contact { font-size: 20px; text-align: justify; margin: 0 20px 20px; /* margin: top(0) right/left(20) bottom(20) */ line-height: 1.5; /* vertical space between lines of text */ } /* responsive grid layout parent class (skill icons & my photos*/ .parent { display: grid; /* Turn into a grid container */ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Define how may columns the grid has and how wide they are repeat(auto-fit, minmax(200px, 1fr)) keep the grids responsive, and at least 200 px wide, but it can grow to share available space*/ gap: 4rem; text-align: center; } /* skills icons decoration */ /* .div1, .div2, .div3, .div4, .div5, .div6, .div7 { text-align: center; } */ .div7 { opacity: 0; transition: opacity 0.8s ease; } .div7:hover { opacity: 1; } /* one more thing decoration */ .omt { width: 300px; height: 200px; position: relative; font-size: larger; animation-name: myAnimation; animation-duration: 4s; animation-iteration-count: infinite; } @keyframes myAnimation { 0% {left:0px; top:0px;} 10% {left:300px; top:0px;} 20% {left:0px; top:0px;} 30% {left:200px; top:0px;} 40% {left:0px; top:0px;} 50% {left:90px; top:0px;} 55% {left:0px; top:0px;} 60% {left:30px; top:0px;} 65% {left:0px; top:0px;} 70% {left:15px; top:0px;} 75% {left:0px; top:0px;} 80% {left:5px; top:0px;} 100% {left:0px; top:0px;} } /* decorate lifephotos */ #lifePhotos { max-width: 100%; /* let all id = lifePhotos within a container */ border-radius: 16px; } /* footer */ footer { text-align: center; font-size: 0.85rem; padding: 1rem 0; } /* mobile menu */ #mobileMenu { display: none; background-color: var(--secondary); } .omta { display: none; } @media screen and (max-width: 599px){ #desktopMenu { display: none; } #mobileMenu { display: flex; flex-direction: column; justify-content: space-around; } .omta { display: flex; } .omt { display: none; } .container { flex-direction: column; /*Stack the flex items vertically (top → bottom) */ } .photo { display: flex; justify-content: center; } }