/*** HEADING settings ***/
/* { outline: 0.1dvw solid red ; }
/* heading format and background */

#heading{display: grid; grid-template-columns: 1fr 3fr; max-width: 200rem; width: 100%; height: clamp(60px, 10dvw, 150px);}
#heading{--s: 0.5dvw; --c: lightgrey; --_s: calc(2*var(--s)) calc(2*var(--s)); --_g: 35.36% 35.36% at; --_c: #0000 66%,black 40% 70%, #0000 72%; background: radial-gradient(var(--_g) 100% 25%,var(--_c)) var(--s) var(--s)/var(--_s), radial-gradient(var(--_g) 0 75%,var(--_c)) var(--s) var(--s)/var(--_s),  radial-gradient(var(--_g) 100% 25%,var(--_c)) 0 0/var(--_s), radial-gradient(var(--_g) 0 75%,var(--_c)) 0 0/var(--_s), repeating-conic-gradient(var(--c) 0 25%,#0000 0 50%) 0 0/var(--_s), radial-gradient(var(--_c)) 0 calc(var(--s)/2)/var(--s) var(--s) var(--c);  border: 0.2vw solid skyblue; padding: 1vw; box-shadow: inset 0.5vw 0.5vw rgb(195, 174, 136); }

/* navigation section formatting*/

#menu{position: fixed; max-width: 10%; width: 100%; height: 5%; background:skyblue; opacity:1; color:white; box-shadow:inset 0 0 0 1px black; border:0.2dvw solid white; display: flex; justify-content: center; align-items: center; border-radius: 1dvw; z-index: 10;}
#menu a{font-size: clamp( 1rem, 1.5dvw, 2rem); max-width: 90%; width: 100%; }
#menu:hover{background:grey; color:aliceblue; box-shadow:inset 0 0 0 1px white; border:0.2dvw solid black; cursor: pointer;}

/* h1 section */

h1{margin-left: 15dvw; width: 60rem;  max-width: 100%; position: absolute; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin-block: 2%; color: blue; font-size: clamp(1rem, 3dvw, 3rem);  animation: styling infinite linear 60s; z-index: 99; }
@keyframes styling{
    0%{ translate: 0dvw 0dvw  1dvw; color: black; }
    25%{ translate: -4dvw -1dvw 2dvw; color:green; }
    50%{ translate: 0dvw 0dvw 3dvw; color: red;}
    75%{ translate: 4dvw 1dvw 2dvw; color: blue; }
    100%{ translate: 0dvw 0dvw 1dvw; color: black;}
}