body{ background-color: #FFFAF0; } body{ color: #40514E; margin: 0; text-align: center; font-family: "Merriweather", serif; } h1:hover{ color : gold; } h2:hover{ color : gold; } h3:hover{ color : gold; } nav { display: flex; /* Arrange links in a row */ gap: 50px; /* Space between links */ background-color: #E4F9F5; /* Light background */ padding: 10px; } h1{ color: #66BFBF; font-size: 5.625rem; width: : 10%; margin: 0 auto; font-family: "Sacramento", serif; } h2{ color: #66BFBF; font-size: 2.5rem; font-family: "Montserrat", serif; } h3{ color: #66BFBF; font-family: "Montserrat", serif; } div{ background-color:#FFFAF0; } img{ height: 200px; mix-blend-mode: multiply; } p{ line-height: 2; } hr{ border-style: dotted none none; border-color:grey; border-width: 5px; height: 0px; width: 5%; margin: 100px auto; } a{ color: #11999e; font-family: "Montserrat", serif; margin: 10px 20px; text-decoration: none; } a:hover{ color: #EAF6F6; } /* ----------------------------class selectors in css----------------- a selector is the item you're trying to edit or style it can be anything from a
to any html element like

*/ .top-container{ background-color: #E4F9F5; position:relative; padding-top: 100px; padding-bottom: 50px; } .Data{ text-decoration-color: red; text-decoration: underline; } .intro{ width: 30%; margin: 100px auto; } .top-cloud{ height: 100px; position: absolute; right: 100px; top: 100px; } .bottom-cloud{ position: absolute; left: 100px; bottom: 100px; height: 100px; } .middle-container{ background-color: #FFFAF0; position:relative; margin: 100px 0; } .bottom-container{ background-color: blue; width: 200px; height: 200px; } .ninja{ height: 100px; } .mountain{ position:relative; bottom:600; width: : 300px; height: 300px; } .python{ width: 25% ] } .MsExcel{ width: 25%; } .MsPowerBi{ width: 100% } .skill-row{ width: 50%; margin: auto; text-align: left; line-height: 2; } .Skills{ margin: auto; text-align: center; } .contact-me{ width: 40%; margin: 40px auto 60px; } .bottom-section{ background-color: #66BFBF; padding: 50px 0 20px; } .copyright{ color: #EAF6F6; font-size: 0.75rem; padding: 20px 0; } .Home{ top: 20px; left: 20px; position: absolute; color: : #66BFBF; } .MyResume{ top: 10px; right: 20px; color: : #66BFBF; } .Homeedits{ background-color: #E4F9F5; padding: 0; margin: 0; } .Home{ text-decoration: none; color: #66BFBF; font-size: 18px; padding: 10px 15px; border-radius: 5px; transition: background 0.3s ease; } .site2-btn { position: absolute; top: 20px; right: 20px; color: : #66BFBF; background-color: transparent; transition: 0.3s ease; /* Smooth hover effect */ } .site2-btn:hover{ color: gold; } .btn { background: #11cdd4; background-image: -webkit-linear-gradient(top, #11cdd4, #11999e); background-image: -moz-linear-gradient(top, #11cdd4, #11999e); background-image: -ms-linear-gradient(top, #11cdd4, #11999e); background-image: -o-linear-gradient(top, #11cdd4, #11999e); background-image: linear-gradient(to bottom, #11cdd4, #11999e); -webkit-border-radius: 8; -moz-border-radius: 8; border-radius: 8px; font-family: "Montserrat", serif; color: #ffffff; font-size: 20px; padding: 10px 20px 10px 20px; text-decoration: none; } .btn:hover { background: #30e3cb; background-image: -webkit-linear-gradient(top, #30e3cb, #2bc4ad); background-image: -moz-linear-gradient(top, #30e3cb, #2bc4ad); background-image: -ms-linear-gradient(top, #30e3cb, #2bc4ad); background-image: -o-linear-gradient(top, #30e3cb, #2bc4ad); background-image: linear-gradient(to bottom, #30e3cb, #2bc4ad); text-decoration: none; }