/* Background */

body{

    background:url(https://beskarsteel.neocities.org/shrines/anakinbackground.gif);
    background-repeat:repeat;
    color:#f6e8ff;
    font-family:Verdana, Geneva, sans-serif;
}


/* Main */

.shrine-page{

    width:900px;
    margin:40px auto;
}


/* Header */

.hero img{

    width:100%;
    display:block;
    border:5px ridge #564EA3;
    border-radius:18px;
    box-shadow:0 0 25px #564EA3;
}


/* Headings */

h1{

    text-align:center;
    color:#564EA3;
    font-size:15px;
    text-shadow:
        0 0 8px #564EA3,
        0 0 15px #564EA3;

    margin:25px 0;
}

h2{

    color:#FFF8E7;
    border-bottom:2px dotted #FFF8E7;
    padding-bottom:6px;
}


/* Intro */

.intro{

    text-align:center;
    max-width:700px;
    margin:auto;
    line-height:1.7;
}


/* Gallery */

.gallery{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;

    margin:40px 0;
}

.gallery img{

    width:100%;
    border:3px solid #564EA3;
    border-radius:12px;
    transition:.3s;
}

.gallery img:hover{

    transform:scale(1.05);
    box-shadow:0 0 20px blue;
}


/* Content Boxes */

.content-box{

    background:rgba(70,80,130,.55);

    border:2px solid #564EA3;

    border-radius:18px;

    padding:25px;

    margin:35px 0;

    overflow:auto;

    backdrop-filter:blur(6px);

    box-shadow:
        0 0 20px rgba(165,80,255,.35);

    line-height:1.8;

}


/* Wrapped Images */

.wrap-left{

    float:left;
    width:230px;

    margin:
        0
        20px
        10px
        0;

    border:3px solid #564EA3;

    border-radius:10px;
}

.wrap-right{

    float:right;

    width:230px;

    margin:
        0
        0
        10px
        20px;

    border:3px solid #564EA3;

    border-radius:10px;
}


/* Quotes */

.quote{

    width:70%;

    margin:40px auto;

    padding:25px;

    text-align:center;

    font-size:26px;

    color:#FFF8E7;

    font-style:italic;

    border:3px dashed #564EA3;

    background:#2C58B8;

    box-shadow:
        0 0 20px ##564EA3;

}


/* Buttons */

.buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin:50px 0;

}

.buttons a{

    background:linear-gradient(#564EA3,#2C58B8);

    color:white;

    text-decoration:none;

    padding:14px 28px;

    border-radius:40px;

    border:2px solid white;

    font-weight:bold;

    transition:.3s;

}

.buttons a:hover{

    transform:translateY(-4px);

    box-shadow:0 0 20px #ffbfff;

}


/* Footer */

.footer-quote{

    text-align:center;

    color:#564EA3;

    margin:50px 0;

    font-size:18px;

}


/* Stickers */

.sticker{

    position:fixed;

    width:90px;

    z-index:5;

    image-rendering:pixelated;

}

.star1{

    top:30px;
    left:25px;

}

.star2{

    top:35px;
    right:30px;

}

.star3{

    bottom:25px;
    left:20px;

}

.star4{

    bottom:30px;
    right:25px;

}