/*
Teal Castle Co
v0.1.1 Tiffany Blue Theme
*/


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    background:
        #E8FAF9;

    color:
        #163838;

}



/* HEADER */


header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    flex-wrap:
        wrap;

    padding:
        1rem 2rem;

    background:
        #0ABAB5;

    color:
        white;

    box-shadow:
        0 4px 12px rgba(0,0,0,.15);

}



.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        1rem;

}



.brand img {

    width:
        70px;

    height:
        70px;

}



.brand h1 {

    margin:
        0;

}



/* NAVIGATION */


nav {

    display:
        flex;

    gap:
        1.5rem;

}



nav a {

    color:
        white;

    text-decoration:
        none;

    font-weight:
        bold;

}



nav a:hover {

    text-decoration:
        underline;

}



/* BUTTONS */


button {

    background:
        #D4AF37;

    color:
        #163838;

    border:
        none;

    padding:
        .75rem 1.5rem;

    border-radius:
        12px;

    cursor:
        pointer;

    font-weight:
        bold;

}



button:hover {

    transform:
        scale(1.03);

}



/* MOBILE MENU */


.menu-toggle {

    display:
        none;

}





/* HERO */


.hero {

    text-align:
        center;

    padding:
        5rem 2rem;

    background:

    linear-gradient(

        180deg,

        #DFFFFD,

        #E8FAF9

    );

}



.hero h2 {

    font-size:
        2.7rem;

    color:
        #006B68;

}



.hero p {

    max-width:
        750px;

    margin:
        auto;

    font-size:
        1.2rem;

}





/* SECTIONS */


section {

    padding:
        3rem 2rem;

    text-align:
        center;

}



section h2 {

    color:
        #006B68;

}





/* CARDS */


.cards {

    display:
        grid;

    grid-template-columns:

    repeat(

        auto-fit,

        minmax(220px,1fr)

    );


    gap:
        1.5rem;


    max-width:
        1200px;


    margin:
        auto;

}




.card {

    display:
        block;

    background:
        white;

    padding:
        2rem;

    border-radius:
        18px;


    box-shadow:

    0 6px 15px rgba(0,0,0,.15);


    text-decoration:
        none;


    color:
        #163838;


    transition:
        .25s;


}




.card:hover {

    transform:
        translateY(-6px);


    border:
        2px solid #D4AF37;

}





/* MARKETPLACE CARDS */


.marketplace {

    cursor:
        pointer;


    background:

    linear-gradient(

        145deg,

        white,

        #F7FFFF

    );

}



.marketplace h3 {

    font-size:
        1.8rem;


    color:
        #006B68;

}



.marketplace p {

    font-size:
        1.2rem;


    color:
        #D4AF37;


    font-weight:
        bold;

}





/* FOOTER */


footer {

    background:
        #006B68;


    color:
        white;


    text-align:
        center;


    padding:
        2rem;

}



.developer-info {

    display:
        none;

}





/* SPARKLE CURSOR */


.sparkle {

    position:absolute;

    pointer-events:none;

    color:#D4AF37;

    text-shadow:
    0 0 6px #D4AF37;

    font-size:14px;

    animation:
    sparkleFade .8s forwards;

}



@keyframes sparkleFade {


0% {

    opacity:
        1;

    transform:
        scale(1);

}



100% {

    opacity:
        0;

    transform:
        scale(0)
        translateY(-25px);

}


}





/* MOBILE */


@media(max-width:768px){


header {

    flex-direction:
        column;

}



.menu-toggle {

    display:
        block;

}



nav {

    display:
        none;

    flex-direction:
        column;

    width:
        100%;

    text-align:
        center;

}



nav.active {

    display:
        flex;

}



.brand h1 {

    font-size:
        1.4rem;

}



.hero h2 {

    font-size:
        2rem;

}



section {

    padding:
        2rem 1rem;

}



}