body{
    background: radial-gradient(circle at center, #723f44, #97766f);

    min-height: 100vh;
    background-attachment: fixed;

    color: #3b3939;
    font-family: 'Outfit', sans-serif;
}

.navbar{
    background-image: url("img/leo_navbar.JPEG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 24px;

    padding: 20px;
    text-align: center;
    color: #e9b7d6;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.star-icon{
    width: 160px;
    height: auto;
    pointer-events: none;
}

h1{
    text-shadow: 0 0 10px #e9b7d655, 0 0 20px #e9b7d655;
    color: #e9b7d6;
    font-size: 41px;
}

h2{
    font-size: 23px;
    color: #2e2c2c;
}

h4{
    font-size: 17px;
}

p{
    font-size: 17px;
    line-height: 1.6;
}

a{
    font-size: 17px;
}

.card{
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
    gap: 20px;
}

footer{
    background-image: url("img/leo_navbar.JPEG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 24px;

    padding: 20px;
    text-align: center;
    color: #e9b7d6;
}

.social-links a{
    margin: 0 10px;
    color: #4a4a4a;
    text-decoration: none;
    font-weight: bold;
}

.social-links a:hover{
    color: #e9b7d6;
}

.sticker{
    width: 1%;
    height: auto;
    position: absolute;
    top: 50px;
    left: 100px;
    z-index: 1000;
    width: 150px;
    pointer-events: none;
}

.sticker:hover{
    transform: rotate(10deg) scale(1.03)
}

#tire-sticker{
    width: 120px;
    top: 88%;
    left: 31%;
    transform: rotate(-15deg)
}
#d-sticker{
    top: 46%;
    left: 72%;
    transform: rotate(-2deg)
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        "x a a a a b b"
        "c c d d d d y"
        "e e e f g h h";
    grid-auto-rows: auto;
    gap: 20px;
    padding: 20px;
}

.item-a{grid-area: a;}
.item-b{grid-area: b;}
.item-c{grid-area: c;}
.item-d{grid-area: d;}
.item-e{grid-area: e;}
.item-f{grid-area: f;}
.item-g{grid-area: g;}
.item-h{grid-area: h;}


.tall{
    grid-row: span 2;
}

.wide{
    grid-column: span 3; 
}

.card_wide{
    grid-column: span 3;
}

.card_medium{
    grid-column: span 2;
}

.grid-item{
    height: 180px;
    overflow: hidden;
    border-radius: 24px;
}

.grid-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

.card, .grid-item{
    transition: transform 0.3s ease;
}

.card:hover, .grid-item:hover{
    transform: scale(1.01);
}