[class~="home-bar"]{ position: fixed; top: 0; background-color: white; width: 100%; opacity: 0.95; z-index: 3; } [class~="hamburger-icon"]{ display: none; } [class~="close-icon"]{ display: none; } [class~="nav-desc"]{ width: 34.375rem; } nav{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; } nav img{ width: 12.5rem; margin-top: -0.125rem; object-fit: contain; } [class~="nav-links"]{ display: flex; flex-direction: row; justify-content: space-between; margin-top: 0.9375rem; margin-bottom: 0.9375rem; } nav li{ list-style: none; display: inline-block; position: relative; padding: 0.5rem 0.75rem; } nav li a { text-decoration: none; font-size: 1.1875rem; color:rgb(60, 60, 109); font-family: 'HelveticaRegular'; text-align: center; } nav li::after{ content: ''; width: 0%; height: 0.125rem; background:rgb(60, 60, 109); display: block; margin: auto; transition: 0.2s; } nav li:hover::after{ width: 100%; } [class~="button-contact"]{ width: 9.375rem; height: 3.125rem; border: none; outline: none; position: relative; border-radius: 1.5625rem; background: linear-gradient(to right, #002fff, #da1fff); cursor: pointer; z-index: 1; transition: 0.2s; } [class~="button-contact"]::before { content: ""; position: absolute; left: 0.125rem; right: 0.125rem; top: 0.125rem; bottom: 0.125rem; border-radius: 1.5rem; background-color: white; z-index: -1; transition: 200ms } [class~="button-contact"]:hover::before{ background: none; } [class~="button-contact"]:hover [class~="button-contact-text"] { background: white; font-family: 'HelveticaBold'; font-size: 1.25rem; text-decoration: none; -webkit-background-clip: text; color: transparent; transition: 0.2s; } [class~="button-contact"]:active{ opacity: 0.8; scale: 1.05; } [class~="button-contact-text"]{ background: linear-gradient(to right, #002fff, #da1fff); font-family: 'HelveticaRegular'; font-size: 1.25rem; text-decoration: none; -webkit-background-clip: text; color: transparent; transition: 0.2s; }