:root {
    --color: white;
    --primary-color: rgb(92, 203, 242);
    --primary-color-button: rgba(92, 203, 242, 0.6);
    --icon-background: var(--primary-color);
    --secondary-color: rgb(54,112,183);

    --border-highlight: rgb(255,152,30);
    --highlight-color: rgba(255,152,30, 0.6);
}

body {
    background-color: #66a3ff;
    background: radial-gradient(1.5em 6.28571em at 1.95em,rgba(255,255,255,0) 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 55%,rgba(255,255,255,0) 55%) 0 0,radial-gradient(1.5em 6.28571em at -.45em,rgba(255,255,255,0) 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 55%,rgba(255,255,255,0) 55%) 1.5em 5.5em,radial-gradient(2.3em 4.57143em at 2.99em,rgba(255,255,255,0) 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.3) 55%,rgba(255,255,255,0) 55%) 0 0,radial-gradient(2.3em 4.57143em at -.69em,rgba(255,255,255,0) 50%,rgba(255,255,255,.3) 50%,rgba(255,255,255,.3) 55%,rgba(255,255,255,0) 55%) 2.3em 4em,radial-gradient(3.5em 6.28571em at 4.55em,rgba(255,255,255,0) 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 55%,rgba(255,255,255,0) 55%) 0 0,radial-gradient(3.5em 6.28571em at -1.05em,rgba(255,255,255,0) 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.25) 55%,rgba(255,255,255,0) 55%) 3.5em 5.5em,radial-gradient(rgb(63,183,176),rgb(65,124,163),#586fc6);
    background-color: rgba(0, 0, 0, 0);
    background-repeat: repeat;
    background-size: auto;
    background-color: #5ccbf2;
    background-size: 1.5em 11em,1.5em 11em,2.3em 8em,2.3em 8em,3.5em 11em,3.5em 11em,100% 100%;
}


body {
    img {
        background-color: var(--primary-color);
    }
}

header {
    h1, p {
        text-shadow: 0.1rem 0.1rem 0.3rem var(--border-highlight);
    }
}

img {
    background-color: var(--icon-background);
}

ul {
    @media (hover) {
        transition: transform 2s 0.5s, opacity 0.3s 0.5s;

        &:hover > li a:not(:hover) {
            filter: opacity(0.6);
        }
    }
}

ul li a {
    background-color: var(--primary-color-button);
    
    &:hover, &:focus {
        background-color: var(--highlight-color);
    }
}

footer a {
    color: var(--color);
    text-decoration-color: var(--border-highlight);
    
    &:hover, &:focus {
        text-decoration-color: var(--color);
    }
}