@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); :root { --primary-bg: rgb(27, 21, 41); --secondary-bg: #1a1a1a; --third-bg: #383838; --primary-text: #d2d6e5; --error: rgb(255, 55, 0); --primary: #2a9dd6; --primary-hover: #2489bb; } body { background: linear-gradient(127deg, var(--secondary-bg), var(--primary-bg)) no-repeat fixed; background-size: cover; height: 100%; width: 100%; font-family: 'Poppins', sans-serif; color: var(--primary-text); margin: 0; padding: 0; } nav { display: flex; flex-direction: row; justify-content: space-between; padding: 1.2rem 1rem; background-color: rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 20px 28px 0 rgba(0,0,0,0.2); -moz-box-shadow: 0 20px 28px 0 rgba(0,0,0,0.2); box-shadow: 0 20px 28px 0 rgba(0,0,0,0.2); height: 75px !important; } ul { display: flex; flex-direction: row; gap: 2.5rem; list-style: none; padding-left: 0; } li { list-style: none; } li a { position: relative; padding-bottom: 0.45rem; color: var(--primary-text); text-decoration: none; transition: all 0.3s ease; } /*li a::after { content: ""; position: absolute; height: 4px; width: 0; bottom: 0; left: 0; background-color: var(--primary); transition: all 0.3s ease; border-radius: 15px; }*/ li a:hover::after { width: 85%; margin: 0 auto; } .wrapper-404 { text-align: center; } .wrapper-404 h1 { font-size: 10rem; margin: 0; } .wrapper-404 .error { color: var(--error); } .wrapper-404 h3 { margin-bottom: 2rem; } .error-code { color: var(--primary); } .back { color: var(--primary-text); text-decoration: none; background-color: #2a9dd6; padding: 0.35rem 0.65rem; transition: all 0.3s ease; border-radius: 15px; } .back:hover { transition: all 0.3s ease; background-color: var(--primary-hover); } header { width: 100%; align-items: center; text-align: center; } header h1 { margin: 0; padding: 0; } header a { color: var(--primary); } header hr { border-color: var(--primary); opacity: 0.5; width: 30%; } .navsite_list{ display: flex; flex-direction: row; gap: 3.25rem; } .navpage_list{ display: none; flex-direction: column; } .navsite_item { justify-content: center; align-items: center; text-align: center; width: 120px; } .navsite_item:hover .navpage_list{ display: flex !important; } /* Add this style for the initial state of the navpage_list */ .navpage_list { background-color: var(--third-bg); margin-top: 10px; display: flex; flex-direction: column; overflow: hidden; /* Hide the content initially */ max-height: 0; /* Set the initial height to 0 */ border: 0px solid transparent; /* Set initial border */ transition: max-height 0.1s ease, border 0.1s ease; /* Add transition for smooth height and border animation */ } /* Modify this style for the hover state of the navsite_item */ .navsite_item:hover .navpage_list { max-height: 200px; /* Adjust the value based on your content height */ border: 4px solid var(--primary-hover); /* Ensure border remains visible on hover */ } /* Add this style for the transition when not hovering */ .navsite_item:not(:hover) .navpage_list { max-height: 0; /* Set height to 0 when not hovering */ border: 0px solid transparent; /* Maintain border for the delay */ transition-delay: 0.1s; /* Delay the border fade-out transition */ } li.navpage_item{ padding-left: 20px; padding-right: 20px; } ul.navpage_list{ gap: 10px; } header ul { display: flex; flex-direction: column; gap: 0; text-align: left; } header ul li { list-style: circle; width: fit-content; } .feature-list { width: 50%; margin: auto; }