:root {
    --color: white;
    --button-color: rgb(50,75,132);
    --hover-color: rgba(108,26,42, 1);
    --primary-color: rgb(81, 201, 242);
    --icon-background: var(--primary-color);
}

body {
    background-color: #66a3ff;
    background-image: repeating-linear-gradient(transparent,transparent 50px,rgb(31,24,57) 50px,rgb(31,24,57) 53px,transparent 53px,transparent 63px,rgb(31,24,57) 63px,rgb(31,24,57) 66px,transparent 66px,transparent 116px,rgba(108,26,42,.5) 116px,rgba(108,26,42,.5) 166px,rgba(255,255,255,.5) 166px,rgba(255,255,255,.5) 169px,rgba(108,26,42,.5) 169px,rgba(108,26,42,.5) 179px,rgba(255,255,255,.5) 179px,rgba(255,255,255,.5) 182px,rgba(108,26,42,.5) 182px,rgba(108,26,42,.5) 232px,transparent 232px),repeating-linear-gradient(270deg,transparent,transparent 50px,rgb(31,24,57) 50px,rgb(31,24,57) 53px,transparent 53px,transparent 63px,rgb(31,24,57) 63px,rgb(31,24,57) 66px,transparent 66px,transparent 116px,rgba(108,26,42,.5) 116px,rgba(108,26,42,.5) 166px,rgba(255,255,255,.5) 166px,rgba(255,255,255,.5) 169px,rgba(108,26,42,.5) 169px,rgba(108,26,42,.5) 179px,rgba(255,255,255,.5) 179px,rgba(255,255,255,.5) 182px,rgba(108,26,42,.5) 182px,rgba(108,26,42,.5) 232px,transparent 232px);
}


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

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

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(--button-color);
    
    &:hover, &:focus {
        background-color: var(--hover-color);
    }
}

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