/*=========================================================
    MARTINS SPARKLE
    Version: 1.0.0
    Author: Martins + ChatGPT

=========================================================*/



/*=========================================================
    1. CSS VARIABLES
=========================================================*/

:root{

    /* Palette */

    --pink-100:#FFF4F8;
    --pink-200:#FFE7F0;
    --pink-300:#FFD6E8;
    --pink-400:#F8C5DB;
    --pink-500:#ECAAC9;

    --green-100:#F4FAF1;
    --green-300:#D9EED4;
    --green-500:#BCDDAF;

    --lavender:#E8E0F8;

    --paper:#FFFDFC;

    --white:#FFFFFF;

    --text:#313131;

    --text-soft:#666666;

    --border:#E4C5D5;

    --shadow:rgba(0,0,0,.10);

    --shadow-strong:rgba(0,0,0,.16);

    --accent:#C76C99;

    /* Layout */

    --container-width:1200px;

    --radius:18px;

    --radius-small:12px;

    --spacing-xs:.5rem;

    --spacing-sm:1rem;

    --spacing-md:1.5rem;

    --spacing-lg:2rem;

    --spacing-xl:3rem;

}

/*=========================================================
    2. RESET
=========================================================*/

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

/*=========================================================
    3. BODY
=========================================================*/

body{

    background:var(--pink-100);

    color:var(--text);

    font-family:Verdana, Geneva, sans-serif;

    font-size:16px;

    line-height:1.75;

}

body{

    background-image:

        radial-gradient(circle at 20% 30%, rgba(255,255,255,.35) 2px, transparent 2px),

        radial-gradient(circle at 80% 15%, rgba(255,255,255,.25) 1px, transparent 1px),

        radial-gradient(circle at 30% 80%, rgba(255,255,255,.35) 2px, transparent 2px);

    background-size:

        260px 260px,

        200px 200px,

        320px 320px;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:var(--accent);

    transition:.25s;

}

a:hover{

    color:#96557A;

}

/*=========================================================
    4. TYPOGRAPHY
=========================================================*/

h1{

    font-size:3.2rem;

}

h2{

    font-size:2rem;

}

h3{

    font-size:1.35rem;

}

h4{

    font-size:1.1rem;

}

h1,
h2,
h3,
h4{

    margin-bottom:1rem;

    color:var(--accent);

}

p{

    margin-bottom:1rem;

}

ul{

    margin-left:1.5rem;

}

/*=========================================================
    5. LAYOUT
=========================================================*/

.container{

    width:min(var(--container-width),95%);

    margin:auto;

    padding:2rem 0;

}

.site-header{

    background:var(--paper);

    border:2px solid var(--border);

    border-radius:var(--radius);

    padding:2rem;

    margin-bottom:2rem;

    box-shadow:

        8px 8px 18px var(--shadow);

}

.logo-area{

    display:flex;

    align-items:center;

    gap:2rem;

}

.dragon{

    width:140px;

    image-rendering:pixelated;

}

.site-header h1{

    margin-bottom:.3rem;

}

.subtitle{

    color:var(--text-soft);

    letter-spacing:1px;

}

/*=========================================================
    6. NAVIGATION
=========================================================*/

.navigation{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:1rem;

    margin-bottom:2rem;

}

.navigation a{

    background:var(--paper);

    padding:.85rem 1.4rem;

    border:2px solid var(--border);

    border-radius:14px;

    font-weight:bold;

    box-shadow:

        4px 4px 10px var(--shadow);

}

.navigation a:hover{

    background:var(--green-300);

    transform:translateY(-2px);

}

.layout{

    display:grid;

    grid-template-columns:3fr 1fr;

    gap:2rem;

}

/*=========================================================
    7. WINDOWS
=========================================================*/

.window{

    background:var(--paper);

    border:2px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:8px 8px 18px var(--shadow);

    margin-bottom:2rem;

    position:relative;

}

.window-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:.9rem 1.2rem;

    background:linear-gradient(
        to bottom,
        var(--pink-300),
        var(--pink-400)
    );

    border-bottom:2px solid var(--border);

}

.window-title{

    font-weight:bold;

    color:#6B3E58;

    letter-spacing:.05rem;

}

.window-buttons{

    display:flex;

    gap:.45rem;

}

.window-buttons span{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#F9F5F7;

    border:1px solid rgba(0,0,0,.08);

}

.window-content{

    padding:1.5rem;

    background:var(--paper);

}

/*=========================================================
    WINDOW THEMES
=========================================================*/

.window-pink .window-header{

    background:linear-gradient(
        to bottom,
        var(--pink-300),
        var(--pink-400)
    );

}

.window-green .window-header{

    background:linear-gradient(
        to bottom,
        #DDF2D8,
        #CBE7C3
    );

}

.window-purple .window-header{

    background:linear-gradient(
        to bottom,
        #EEE8FF,
        #DDD3FF
    );

}

.window-blue .window-header{

    background:linear-gradient(
        to bottom,
        #DDEFFF,
        #C7E4FF
    );

}

/*=========================================================
    8. SIDEBAR WIDGETS
=========================================================*/

.sidebar{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.widget{

    background:var(--paper);

    border:2px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:6px 6px 14px var(--shadow);

}

.widget-header{

    padding:.8rem 1rem;

    background:var(--pink-300);

    border-bottom:2px solid var(--border);

    font-weight:bold;

}

.widget-content{

    padding:1rem;

}

.widget-center{

    text-align:center;

}

.puff{

    width:140px;

    margin:auto;

    image-rendering:pixelated;

}

/*=========================================================
    9. CARDS
=========================================================*/

.card{

    background:var(--white);

    border:2px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:5px 5px 12px var(--shadow);

    transition:.25s;

}

.card:hover{

    transform:translateY(-5px);

    box-shadow:8px 8px 20px var(--shadow-strong);

}

.card-image{

    width:100%;

    height:190px;

    object-fit:cover;

    background:var(--pink-200);

}

.card-content{

    padding:1.25rem;

}

.card-title{

    color:var(--accent);

    margin-bottom:.75rem;

}

.card-text{

    color:var(--text-soft);

}

.card-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:1.5rem;

}

.game-card{

    border-color:#C9E4C5;

}

.book-card{

    border-color:#D8C7F8;

}

.mtg-card{

    border-color:#A8D5BA;

}

/*=========================================================
    10. BADGES
=========================================================*/

.badge{

    display:inline-block;

    padding:.35rem .75rem;

    margin:.2rem;

    border-radius:999px;

    background:var(--pink-200);

    font-size:.8rem;

    font-weight:bold;

}

.tag{

    display:inline-flex;

    align-items:center;

    gap:.35rem;

}

/*=========================================================
    11. BUTTONS
=========================================================*/

.btn{

    display:inline-block;

    padding:.8rem 1.4rem;

    border-radius:14px;

    border:2px solid var(--border);

    font-weight:bold;

    text-decoration:none;

    cursor:pointer;

    transition:.25s;

}

.btn-pink{

    background:var(--pink-300);

}

.btn-green{

    background:var(--green-300);

}

.btn:hover{

    transform:translateY(-2px);

}

/*=========================================================
    12. DIVIDERS
=========================================================*/

.divider{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:2rem 0;

    color:var(--accent);

    font-size:1.2rem;

}

.banner{

    width:100%;

    border-radius:var(--radius);

    overflow:hidden;

    margin-bottom:2rem;

}

.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:1rem;

}

.gallery img{

    border-radius:12px;

}

/*=========================================================
    13. POSTS
=========================================================*/

.post{

    background:var(--paper);

    border:2px solid var(--border);

    border-radius:var(--radius);

    padding:2rem;

    box-shadow:8px 8px 18px var(--shadow);

}

.post-header{

    margin-bottom:2rem;

}

.post-header h1{

    margin-bottom:.5rem;

}

.post-meta{

    display:flex;

    flex-wrap:wrap;

    gap:1rem;

    color:var(--text-soft);

    font-size:.9rem;

}

.post-cover{

    width:100%;

    border-radius:18px;

    margin:2rem 0;

}

.post-content{

    line-height:1.9;

}

.post-content p{

    margin-bottom:1.3rem;

}

.post-content h2{

    margin-top:2.5rem;

}

.post-content img{

    border-radius:16px;

    margin:2rem auto;

}

/*=========================================================
    14. BLOCKQUOTE
=========================================================*/

blockquote{

    background:#FFF6FA;

    border-left:6px solid var(--pink-400);

    padding:1.5rem;

    margin:2rem 0;

    border-radius:12px;

    font-style:italic;

}

/*=========================================================
    15. TABLES
=========================================================*/

table{

    width:100%;

    border-collapse:collapse;

    margin:2rem 0;

}

th{

    background:var(--pink-300);

    padding:1rem;

}

td{

    padding:1rem;

    border:1px solid var(--border);

}

/*=========================================================
    16. CODE
=========================================================*/

code{

    background:var(--pink-200);

    padding:.2rem .45rem;

    border-radius:8px;

}

pre{

    background:#FFF8FB;

    padding:1.5rem;

    border-radius:16px;

    overflow:auto;

}

/*=========================================================
    17. FORMS
=========================================================*/

input,
textarea{

    width:100%;

    padding:1rem;

    border:2px solid var(--border);

    border-radius:12px;

    margin-bottom:1rem;

    font:inherit;

}

textarea{

    resize:vertical;

    min-height:180px;

}

/*=========================================================
    18. ALERT BOXES
=========================================================*/

.notice{

    padding:1rem;

    margin:1.5rem 0;

    border-left:6px solid var(--pink-400);

    background:#FFF5FA;

}

.success{

    border-left-color:#8CCB8C;

}

.info{

    border-left-color:#87B8FF;

}

.error{

    border-left-color:#F28B8B;

}

/*=========================================================
    19. RATINGS
=========================================================*/

.rating{

    display:flex;

    align-items:center;

    gap:.5rem;

    margin-top:2rem;

}

.stars{

    color:#F2C94C;

}

.progress{

    width:100%;

    height:14px;

    border-radius:999px;

    overflow:hidden;

    background:#ECECEC;

}

.progress-fill{

    height:100%;

    background:var(--green-300);

}

/*=========================================================
    20. UTILITIES
=========================================================*/

.center{

    text-align:center;

}

.hidden{

    display:none;

}

.mt-1{

    margin-top:1rem;

}

.mt-2{

    margin-top:2rem;

}

.mb-1{

    margin-bottom:1rem;

}

.mb-2{

    margin-bottom:2rem;

}

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

/*=========================================================
    21. DECORATIONS
=========================================================*/

.sticker{

    position:absolute;

    width:48px;

    pointer-events:none;

    image-rendering:pixelated;

}

.sparkle{

    position:absolute;

    width:20px;

    pointer-events:none;

    image-rendering:pixelated;

}

.tape{

    position:absolute;

    width:90px;

    pointer-events:none;

}

.pixel-icon{

    image-rendering:pixelated;

}

.corner-top-left{

    top:-15px;

    left:-15px;

}

.corner-top-right{

    top:-15px;

    right:-15px;

}

.corner-bottom-left{

    bottom:-15px;

    left:-15px;

}

.corner-bottom-right{

    bottom:-15px;

    right:-15px;

}

/*=========================================================
    22. DIVIDERS
=========================================================*/

.divider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:1rem;

    margin:3rem 0;

    color:var(--accent);

    font-size:1.25rem;

}

/*=========================================================
    23. SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:14px;

}

::-webkit-scrollbar-track{

    background:var(--pink-200);

}

::-webkit-scrollbar-thumb{

    background:var(--pink-500);

    border-radius:20px;

    border:3px solid var(--pink-200);

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent);

}

/*=========================================================
    24. TEXT SELECTION
=========================================================*/

::selection{

    background:var(--pink-400);

    color:white;

}

/*=========================================================
    25. FOOTER
=========================================================*/

.site-footer{

    margin-top:3rem;

    padding:2rem;

    background:var(--paper);

    border:2px solid var(--border);

    border-radius:var(--radius);

    text-align:center;

    box-shadow:8px 8px 18px var(--shadow);

}

/*=========================================================
    26. HELPERS
=========================================================*/

.round{

    border-radius:50%;

}

.shadow{

    box-shadow:8px 8px 18px var(--shadow);

}

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.w-100{

    width:100%;

}

/*=========================================================
    27. RESPONSIVE
=========================================================*/

@media (max-width:1000px){

.layout{

    grid-template-columns:1fr;

}

.sidebar{

    order:-1;

}

}

@media (max-width:700px){

.logo-area{

    flex-direction:column;

    text-align:center;

}

.navigation{

    flex-direction:column;

}

.navigation a{

    width:100%;

    text-align:center;

}

.container{

    width:95%;

}

.site-header{

    padding:1.5rem;

}

.window-content{

    padding:1.25rem;

}

}

/*=========================================================
    28. MEDIA
=========================================================*/

iframe{

    max-width:100%;

    border:none;

}

video{

    width:100%;

    border-radius:var(--radius);

}

audio{

    width:100%;

}

/*=========================================================
    29. ACCESSIBILITY
=========================================================*/

:focus-visible{

    outline:3px solid var(--accent);

    outline-offset:4px;

}

/*=========================================================
    MAIN CONTENT
=========================================================*/

.main-content{

    display:flex;

    flex-direction:column;

    gap:2rem;

    min-width:0;

}

.sidebar{

    display:flex;

    flex-direction:column;

    gap:2rem;

    min-width:260px;

}

/*=========================================================

        MARTINS SPARKLE

        style.css

        Version 1.0.0

        End of file

=========================================================*/