@layer base, components, utility;

@import "./modules/fonts.css" layer(base);
@import "./modules/reset.css" layer(base);
@import "./modules/vars.css" layer(base);

body {
    font-family: var(--font);
    line-height: 1.5;
}

html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
}

#shelf {
    display: grid;
    height: 100%;
    width: 100%;
    padding: 2vh;
    grid-template-columns: repeat(3, 520px);
    grid-template-rows: repeat(1, 520px);
    background-color: antiquewhite;
    justify-content: space-evenly;
    align-content: space-between;


    .box {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        border: solid 6px OldLace;
        border-top: none;
        border-left: none;
        border-radius: 2%;
        box-shadow: 8px 8px 5px OldLace;
        margin: 0 auto;

        h1, p {
            color: Indigo;
        }

        h1 {
            font-family: "Sinistre";
            font-weight: bold;
            text-align: center;
            font-size: 30px;
            margin-bottom: 0px;
        }

        p {
            font-size: 18px;
            padding: 12px 20px;
        }

        .altar {
            width: 280px;
            height: 280px;
            background: antiquewhite;
            align-self: center;
            margin-bottom: 1vh;
        }
    }

    #box01 .altar {
        #ring {
            width: 90px;
            height: 90px;
            border: solid 5px silver;
            background-color: transparent;
            border-radius: 50%;
            align-self: center;
            margin: -16px auto;

            #medal {
                width: 70px;
                height: 70px;
                background-color: gold;
                border: solid 1px gold;
                border-radius: 50%;
                align-self: center;
                margin: 0 auto;
                padding: 5px;

                .symbl {
                    font-size: 15px;
                    text-align: center;
                    width: 60px;
                    margin: 0;
                    padding: 0;
                    color: goldenrod;
                    text-shadow: 1px 1px 1px cornsilk;
                }
            }
        }

        #chain {
            height: 180px;
            width: 110px;
            border: 3px solid SaddleBrown;
            border-radius: 50px/70px;
            align-self: center;
            margin: 10px auto;
        }
    }
}

#local, #xpub {
    position: fixed;
    bottom: 5vh;
    color: indigo;
    font-size: 22px;
    height: fit-content;
    width: fit-content;

    p {
        margin-bottom: 1vh;
    }
}

#local {
    left: 2vw;
}

#localRing p {
    width: 55vh;
    margin-bottom: 0;
}

#localRing {
    margin: 0;
    text-align: left;
}

#localRing a {
    margin-right: 3vh;
    padding: 5px 8px;
}

#localRing a:hover {
    font-style: normal;
}

#xpub {
    right: 2vw;
}

#xpubRing {
    margin: 0;
    text-align: right;
}

#xpubRing a {
    text-decoration: none;
    font-style: italic;
    color: slateblue;
    padding: 3px 8px;
    border: 1px dotted slateblue;
    border-radius: 25px;
    margin-right: 5px;
}