:root{
    color-scheme:dark;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    height: 250vh; 
background:hsl(204, 100%, 5%);
font-family: "Dank Mono", ui-monospace, monospace;
}

.intro{
    height: calc(100vh - 50px);
    display: grid;
    place-items: center;
}

.menu {
    position: sticky;
    top: 0;
    height: 50px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}
.menu a {   
    padding: 10px 35px;    
    text-decoration: none;
    color: #f2f2f2;
    border: 2px solid slateblue;
    border-radius: 10px;
    font-size: 1.5em;
}

.menu a {
    background: linear-gradient(0deg, hsl(98 100% 62%), hsl(98 100% 62%)) no-repeat right bottom / 0 var(--bg-h1);
    transition: background-size 350ms;
    --bg-h1: 10%;
}


.menu a:where(:hover, :focus-visible){
    background-size: 100% var(--bg-h1);
    background-position-x: left;
}

.menu a {
    text-decoration: none;
    color: inherit;
    line-height: 1;
  }

article{
    font-family: system-ui;
    font-size: 3em;
    background: linear-gradient(
        to right, 
        hsl(98 100% 62%), 
        hsl(204 100% 59%)
    );
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}