:root{
    --blue: hsl(209, 42%, 73%);
    --blue-texture: var(--blue) url("/explore/web/assets/page/texture.png");
    
  --shadow-color: 347deg 4% 51%;
}

body{
    text-align: center;
    background-color: hsl(30, 13%, 94%);
    background-image: url("./assets/page/bg.gif");
}

footer, main{
    margin: var(--gap) auto;
    filter: var(--drop-shadow-low);
}

main{
    width: 88ch;
    margin-bottom: var(--double-gap);
    box-shadow: var(--box-shadow-medium);

    img{
        zoom: 1.5;
    }

    a{
        color: var(--red-bg);
    }

    a:nth-of-type(3n + 2){
        color: var(--yellow-bg);
    }

    a:nth-of-type(3n){
        color: var(--blue-bg);
    }

    a:is(:hover, :focus){
        color: var(--red);
    }
}

h1{
    --inner-stroke: var(--white);
    --outer-stroke: var(--black2);
    filter: var(--drop-shadow-medium);
}

h2{
    color: var(--black2);
    text-shadow: var(--text-shadow-white);
}

footer a{
    font-weight: bold;
}