/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
    --win:#c0c0c0;
    --white:#ffffff;
    --dark:#404040;
    --mid:#808080;

    --blue:#000080;
    --blue2:#1084d0;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;

    font-family:
        "MS Sans Serif",
        Tahoma,
        Arial,
        sans-serif;

    color:#111;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.18),
            transparent 16%
        ),
        repeating-radial-gradient(
            ellipse at center,
            #b8d4e1 0 22px,
            #365568 26px 34px,
            #90b3c4 38px 58px,
            #223947 62px 69px
        );

    background-attachment:fixed;
}

a{
    color:inherit;
}


/* =========================================================
   DESKTOP ICONS
========================================================= */

.desktop-icon{
    position:fixed;

    width:84px;

    text-align:center;

    color:white;

    font-size:11px;

    text-shadow:
        1px 1px 2px black;

    z-index:1;
}

.desktop-icon .icon{
    display:block;

    font-size:36px;

    margin-bottom:5px;
}

.desktop-icon.one{
    top:35px;
    left:25px;
}

.desktop-icon.two{
    top:140px;
    left:25px;
}

.desktop-icon.three{
    top:245px;
    left:25px;
}


/* =========================================================
   MAIN WINDOW
========================================================= */

.main-window{
    width:min(1280px,94vw);

    margin:60px auto 90px;

    background:var(--win);

    border-top:3px solid white;
    border-left:3px solid white;

    border-right:3px solid #222;
    border-bottom:3px solid #222;

    box-shadow:
        14px 18px 0 rgba(0,0,0,.25),
        0 0 50px rgba(0,0,0,.25);

    position:relative;

    z-index:5;
}


/* =========================================================
   TITLE BAR
========================================================= */

.title-bar{
    min-height:38px;

    margin:3px;

    padding:0 7px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--blue2)
        );

    color:white;

    display:flex;

    align-items:center;

    font-weight:bold;

    font-size:14px;
}

.title-icon{
    margin-right:8px;
}

.title-text{
    flex:1;
}

.window-controls{
    display:flex;

    gap:4px;
}

.window-button{
    width:26px;
    height:24px;

    display:flex;

    align-items:center;
    justify-content:center;

    background:var(--win);

    color:black;

    border-top:2px solid white;
    border-left:2px solid white;

    border-right:2px solid #333;
    border-bottom:2px solid #333;

    font-weight:bold;

    font-size:12px;
}


/* =========================================================
   MENU BAR
========================================================= */

.menu-bar{
    min-height:32px;

    display:flex;

    align-items:center;

    gap:22px;

    padding:0 15px;

    font-size:13px;

    border-bottom:1px solid #888;
}

.menu-bar a{
    text-decoration:none;

    padding:3px 5px;
}

.menu-bar a:hover,
.menu-bar a.active{
    background:var(--blue);

    color:white;
}


/* =========================================================
   TOOLBAR
========================================================= */

.toolbar{
    display:flex;

    align-items:center;

    gap:7px;

    padding:7px 10px;

    border-top:1px solid white;

    border-bottom:1px solid #888;

    flex-wrap:wrap;
}

.tool-btn{
    min-width:82px;

    padding:7px 12px;

    background:var(--win);

    border-top:2px solid white;
    border-left:2px solid white;

    border-right:2px solid #555;
    border-bottom:2px solid #555;

    text-decoration:none;

    text-align:center;

    font-size:12px;
}

.tool-btn:hover{
    background:#d4d4d4;
}

.tool-btn.active{
    border-top:2px solid #555;
    border-left:2px solid #555;

    border-right:2px solid white;
    border-bottom:2px solid white;

    background:#b7b7b7;
}


/* =========================================================
   ADDRESS BAR
========================================================= */

.address-bar{
    display:flex;

    align-items:center;

    gap:8px;

    padding:6px 10px;

    border-bottom:1px solid #777;

    font-size:12px;
}

.address-label{
    color:#444;
}

.address-input{
    flex:1;

    background:white;

    border-top:2px solid #555;
    border-left:2px solid #555;

    border-right:2px solid white;
    border-bottom:2px solid white;

    padding:6px 8px;

    font-family:
        "Courier New",
        monospace;

    overflow:hidden;

    white-space:nowrap;
}


/* =========================================================
   BROWSER CONTENT
========================================================= */

.browser-content{
    min-height:720px;

    background:white;

    margin:4px;

    border-top:2px solid #555;
    border-left:2px solid #555;

    border-right:2px solid white;
    border-bottom:2px solid white;
}


/* =========================================================
   HOME
========================================================= */

.hero{
    min-height:720px;

    padding:46px 40px;

    display:grid;

    grid-template-columns:
        minmax(290px,1fr)
        minmax(330px,1.15fr)
        minmax(260px,.9fr);

    gap:30px;

    align-items:start;

    background:
        linear-gradient(
            rgba(255,255,255,.97),
            rgba(248,248,248,.97)
        );
}


/* =========================================================
   WINDOWS PANEL
========================================================= */

.panel,
.window-card{
    background:var(--win);

    border-top:3px solid white;
    border-left:3px solid white;

    border-right:3px solid #555;
    border-bottom:3px solid #555;

    padding:4px;

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


/* =========================================================
   PANEL / CARD TITLE
========================================================= */

.panel-title,
.card-title{
    min-height:30px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--blue2)
        );

    color:white;

    padding:6px 8px;

    display:flex;

    align-items:center;

    font-weight:bold;

    font-size:12px;
}

.panel-title span:last-child,
.card-title span:last-child{
    margin-left:auto;
}


/* =========================================================
   PANEL / CARD BODY
========================================================= */

.panel-body,
.card-body{
    background:white;

    padding:14px;

    border-top:2px solid #555;
    border-left:2px solid #555;

    border-right:2px solid white;
    border-bottom:2px solid white;
}


/* =========================================================
   PROFILE
========================================================= */

.profile-decoration{
    text-align:center;

    font-family:
        "Courier New",
        monospace;

    font-size:18px;

    letter-spacing:-2px;

    margin:7px 0;
}

.profile-art{
    width:100%;

    height:350px;

    background:
        repeating-linear-gradient(
            45deg,
            #ddd 0,
            #ddd 10px,
            #eee 10px,
            #eee 20px
        );

    border:1px solid #111;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.profile-art img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.profile-placeholder{
    text-align:center;

    color:#555;

    line-height:1.8;

    font-family:
        "Courier New",
        monospace;

    font-size:13px;
}


/* =========================================================
   COMMISSION STATUS
========================================================= */

.status-box{
    margin-top:18px;

    font-family:
        "Courier New",
        monospace;

    font-size:13px;

    letter-spacing:1px;
}




.status-open{
    display:inline-block;

    margin-left:6px;

    padding:4px 8px;

    background:#e2e2e2;

    border-top:2px solid #777;
    border-left:2px solid #777;

    border-right:2px solid white;
    border-bottom:2px solid white;

    font-weight:bold;

    color:#00FF00;
}


.status-close{
    display:inline-block;

    margin-left:6px;

    padding:4px 8px;

    background:#e2e2e2;

    border-top:2px solid #777;
    border-left:2px solid #777;

    border-right:2px solid white;
    border-bottom:2px solid white;

    font-weight:bold;

    color:#b00020;
}


/* =========================================================
   CENTER COLUMN
========================================================= */

.center-hero{
    width:100%;

    text-align:center;

    padding-top:10px;
}


/* =========================================================
   GIF BANNER
========================================================= */

.old-banner{
    width:100%;

    height:100px;

    margin-bottom:70px;

    background:#000;

    border:2px solid #111;

    overflow:hidden;
}

.old-banner img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}


/* =========================================================
   BIO
========================================================= */

.bio{
    font-family:
        "Courier New",
        monospace;

    letter-spacing:4px;

    line-height:2;

    font-size:13px;

    text-align:center;
}

.bio-highlight{
    display:inline-block;

    background:#e8e8e8;

    padding:2px 8px;

    margin-bottom:5px;
}


/* =========================================================
   PAWS
========================================================= */

.paw-print{
    margin-top:55px;

    font-size:65px;

    line-height:.75;

    transform:rotate(8deg);
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.right-hero{
    width:100%;

    padding-top:10px;
}


/* =========================================================
   BIG LINKS
========================================================= */

.big-link{
    width:100%;

    min-height:48px;

    margin-bottom:7px;

    padding:0 15px;

    display:flex;

    align-items:center;

    background:var(--win);

    border-top:3px solid white;
    border-left:3px solid white;

    border-right:3px solid #555;
    border-bottom:3px solid #555;

    color:black;

    text-decoration:none;

    font-family:
        "Courier New",
        monospace;

    font-size:13px;
}

.big-link:hover{
    background:#d8d8d8;
}

.big-link-icon{
    width:40px;

    font-size:18px;

    text-align:left;
}

.big-link-text{
    margin-left:auto;

    letter-spacing:2px;
}


/* =========================================================
   PREVIEW GRID
========================================================= */

.preview-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:5px;

    margin-top:14px;
}

.preview{
    aspect-ratio:1/1;

    background:#050505;

    color:#315aff;

    border:2px solid #555;

    display:flex;

    align-items:center;
    justify-content:center;

    font-family:
        "Courier New",
        monospace;

    font-size:15px;

    font-weight:bold;

    overflow:hidden;
}

.preview img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}


/* =========================================================
   DISCORD
========================================================= */

.discord{
    margin:20px 0;

    text-align:center;

    font-family:
        "Courier New",
        monospace;

    font-size:10px;

    letter-spacing:3px;
}


/* =========================================================
   HOME SOCIAL ICONS
========================================================= */

.social-icons{
    display:grid;

    grid-template-columns:
        repeat(6,1fr);

    gap:8px;

    align-items:center;

    text-align:center;
}

.social-icons a{
    color:black;

    text-decoration:none;

    font-size:27px;
}

.social-icons a:hover{
    color:var(--blue);
}


/* =========================================================
   INNER PAGES
========================================================= */

.page{
    min-height:720px;

    padding:62px 45px 80px;

    background:
        linear-gradient(
            #f7f7f7,
            #ffffff
        );
}

.page-head{
    margin-bottom:38px;
}

.path{
    font-family:
        "Courier New",
        monospace;

    color:#555;

    font-size:12px;

    margin-bottom:8px;
}

.page h1{
    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(42px,7vw,78px);

    letter-spacing:-5px;

    margin-bottom:12px;
}

.page-description{
    max-width:760px;

    line-height:1.8;

    color:#555;

    font-family:
        "Courier New",
        monospace;

    font-size:13px;
}


/* =========================================================
   PRICES
========================================================= */

.price-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:22px;
}

.price-card h2{
    font-family:
        "Courier New",
        monospace;

    font-size:26px;

    margin-bottom:18px;
}

.price-table{
    width:100%;

    border-collapse:collapse;

    font-family:
        "Courier New",
        monospace;

    font-size:13px;
}

.price-table th,
.price-table td{
    border:1px solid #777;

    padding:12px 10px;

    text-align:center;
}

.price-table th{
    background:var(--win);
}

.price-table tr:nth-child(even){
    background:#eee;
}

.notes{
    margin-top:16px;

    line-height:1.9;

    font-family:
        "Courier New",
        monospace;

    font-size:12px;
}


/* =========================================================
   ARTWORK GALLERY
========================================================= */

.gallery{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:18px;

    align-items:start;
}


/* =========================================================
   NORMAL ART CARDS
========================================================= */

.gallery .window-card{
    width:100%;

    min-width:0;

    overflow:hidden;
}


/* =========================================================
   NORMAL ART IMAGE
========================================================= */

.gallery .art-image{
    width:100%;

    aspect-ratio:1 / 1;

    background:#111;

    border-top:2px solid #555;
    border-left:2px solid #555;

    border-right:2px solid white;
    border-bottom:2px solid white;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.gallery .art-image img{
    width:100%;
    height:100%;

    object-fit:contain;

    object-position:center;

    display:block;

    background:#111;
}


/* =========================================================
   ART INFO
========================================================= */

.art-info{
    width:100%;

    min-height:30px;

    padding:7px 6px;

    display:flex;

    align-items:center;

    background:var(--win);

    font-family:
        "Courier New",
        monospace;

    font-size:11px;
}

.art-info span:last-child{
    margin-left:auto;
}


/* =========================================================
   ARTES HORIZONTAIS GRANDES
   Use class="window-card art-large" no HTML
========================================================= */

.gallery > .window-card.art-large{
    grid-column:1 / -1;

    width:100%;
    max-width:none;
}


/* A caixa acompanha a proporção da imagem */
.gallery > .window-card.art-large .art-image{
    width:100%;

    height:auto;
    aspect-ratio:auto;

    background:transparent;

    display:block;

    overflow:hidden;
}


/* A imagem ocupa toda a largura sem bordas pretas */
.gallery > .window-card.art-large .art-image img{
    width:100%;
    height:auto;

    max-width:100%;
    max-height:none;

    object-fit:contain;

    display:block;

    margin:0;
}


/* Mobile */
@media(max-width:700px){

    .gallery > .window-card.art-large{
        grid-column:1;
    }

}
/* =========================================================
   TOS
========================================================= */

.tos-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;
}

.tos-item{
    font-family:
        "Courier New",
        monospace;

    line-height:1.8;
}

.tos-item h2{
    font-size:18px;

    margin-bottom:10px;
}

.tos-item ul{
    padding-left:23px;

    margin-top:8px;
}


/* =========================================================
   SOCIALS PAGE
========================================================= */

.social-grid,
.social-grid-new,
.social-grid-fixed{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:20px;
}


/* =========================================================
   SOCIAL CARD
========================================================= */

.social-card,
.social-card-new,
.social-card-fixed{
    width:100%;

    min-width:0;

    text-decoration:none;

    color:#111;

    background:var(--win);

    border-top:3px solid white;
    border-left:3px solid white;

    border-right:3px solid #555;
    border-bottom:3px solid #555;

    padding:4px;

    box-shadow:
        5px 5px 0 rgba(0,0,0,.18);

    overflow:hidden;
}


/* =========================================================
   SOCIAL TITLE BAR
========================================================= */

.social-titlebar,
.social-card-title{
    width:100%;

    min-height:32px;

    padding:0 9px;

    display:flex;

    align-items:center;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--blue2)
        );

    color:white;

    font-weight:bold;

    font-size:12px;
}

.social-titlebar span:last-child,
.social-card-title span:last-child{
    margin-left:auto;
}


/* =========================================================
   SOCIAL CARD BODY
========================================================= */

.social-card-content,
.social-card-body{
    width:100%;

    height:250px;

    padding:15px;

    background:white;

    border-top:2px solid #555;
    border-left:2px solid #555;

    border-right:2px solid white;
    border-bottom:2px solid white;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    overflow:hidden;
}


/* =========================================================
   SOCIAL IMAGE
========================================================= */

.social-image,
.social-image-box,
.social-logo-box{
    width:100%;

    height:145px;

    flex-shrink:0;

    background:#000;

    border-top:2px solid #555;
    border-left:2px solid #555;

    border-right:2px solid white;
    border-bottom:2px solid white;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.social-image img,
.social-image-box img,
.social-logo-box img{
    width:auto;

    height:auto;

    max-width:85%;

    max-height:120px;

    object-fit:contain;

    object-position:center;

    display:block;

    margin:auto;

    transition:
        transform .15s ease;
}


/* =========================================================
   SOCIAL TEXT
========================================================= */

.social-card-content strong,
.social-card-body strong{
    margin-top:15px;

    margin-bottom:7px;

    font-family:
        "Courier New",
        monospace;

    font-size:18px;
}

.social-card-content small,
.social-card-body small{
    font-family:
        Arial,
        sans-serif;

    font-size:12px;

    color:#666;
}

.social-card:hover img,
.social-card-new:hover img,
.social-card-fixed:hover img{
    transform:scale(1.05);
}


/* =========================================================
   CONTACT
========================================================= */

.contact-box,
.social-contact,
.contact-window-fixed{
    margin-top:45px;

    background:var(--win);

    border-top:3px solid white;
    border-left:3px solid white;

    border-right:3px solid #555;
    border-bottom:3px solid #555;

    padding:4px;

    box-shadow:
        5px 5px 0 rgba(0,0,0,.18);
}

.contact-box .card-body,
.social-contact-body,
.contact-content-fixed{
    background:white;

    padding:50px 25px;

    text-align:center;

    border-top:2px solid #555;
    border-left:2px solid #555;

    border-right:2px solid white;
    border-bottom:2px solid white;
}

.contact-box h2,
.social-contact-body h2,
.contact-content-fixed h2{
    font-family:
        "Courier New",
        monospace;

    font-size:
        clamp(32px,5vw,48px);

    letter-spacing:-3px;

    margin-bottom:15px;
}

.contact-box p,
.social-contact-body p,
.contact-content-fixed p{
    max-width:650px;

    margin:
        0 auto
        25px;

    color:#555;

    font-family:
        "Courier New",
        monospace;

    line-height:1.8;
}

.contact-btn,
.social-contact-button,
.contact-button-fixed{
    display:inline-block;

    padding:13px 24px;

    background:var(--win);

    border-top:3px solid white;
    border-left:3px solid white;

    border-right:3px solid #555;
    border-bottom:3px solid #555;

    color:#111;

    text-decoration:none;

    font-family:
        "Courier New",
        monospace;

    font-weight:bold;
}


/* =========================================================
   STATUS BAR
========================================================= */

.status-bar{
    height:30px;

    display:flex;

    gap:5px;

    padding:4px;

    background:var(--win);
}

.status-field{
    flex:1;

    padding:4px 8px;

    border-top:2px solid #777;
    border-left:2px solid #777;

    border-right:2px solid white;
    border-bottom:2px solid white;

    font-size:11px;
}


/* =========================================================
   TASKBAR
========================================================= */

.taskbar{
    position:fixed;

    bottom:0;
    left:0;
    right:0;

    height:48px;

    background:var(--win);

    border-top:3px solid white;

    display:flex;

    align-items:center;

    padding:3px;

    z-index:1000;
}

.start-btn{
    height:38px;

    padding:0 12px;

    display:flex;

    align-items:center;

    gap:7px;

    background:var(--win);

    border-top:3px solid white;
    border-left:3px solid white;

    border-right:3px solid #555;
    border-bottom:3px solid #555;

    color:black;

    text-decoration:none;

    font-size:17px;

    font-weight:bold;
}

.task-divider{
    height:35px;

    margin:0 7px;

    border-left:1px solid #777;
    border-right:1px solid white;
}

.task-tab{
    min-width:240px;

    height:36px;

    display:flex;

    align-items:center;

    padding:0 10px;

    border-top:2px solid #777;
    border-left:2px solid #777;

    border-right:2px solid white;
    border-bottom:2px solid white;

    font-size:12px;
}

.tray{
    margin-left:auto;

    height:36px;

    padding:0 12px;

    display:flex;

    align-items:center;

    gap:10px;

    border-top:2px solid #777;
    border-left:2px solid #777;

    border-right:2px solid white;
    border-bottom:2px solid white;

    font-size:12px;
}


/* =========================================================
   RESPONSIVE 1000
========================================================= */

@media(max-width:1000px){

    .hero{
        grid-template-columns:
            1fr 1fr;
    }

    .right-hero{
        grid-column:1 / -1;

        max-width:600px;

        margin:auto;
    }

    .price-grid,
    .tos-grid{
        grid-template-columns:1fr;
    }

    .gallery{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .social-grid,
    .social-grid-new,
    .social-grid-fixed{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .gallery > .window-card:last-child .art-image{
        height:400px;
    }

}


/* =========================================================
   RESPONSIVE 700
========================================================= */

@media(max-width:700px){

    .desktop-icon{
        display:none;
    }

    .main-window{
        width:98%;

        margin:
            10px auto
            70px;
    }

    .hero{
        grid-template-columns:1fr;

        padding:
            25px
            15px;
    }

    .center-hero{
        margin-top:10px;
    }

    .old-banner{
        margin-bottom:30px;
    }

    .paw-print{
        margin:
            30px 0;
    }

    .right-hero{
        grid-column:auto;

        width:100%;
    }

    .page{
        padding:
            50px
            16px
            65px;
    }

    .gallery{
        grid-template-columns:1fr;
    }

    .gallery > .window-card:last-child{
        grid-column:1;
    }

    .gallery > .window-card:last-child .art-image{
        height:300px;
    }

    .social-grid,
    .social-grid-new,
    .social-grid-fixed{
        grid-template-columns:1fr;
    }

    .toolbar{
        overflow-x:auto;

        flex-wrap:nowrap;
    }

    .menu-bar{
        overflow-x:auto;

        gap:10px;

        font-size:11px;
    }

    .address-label{
        display:none;
    }

    .task-tab{
        display:none;
    }

}


/* =========================================================
   RESPONSIVE 450
========================================================= */

@media(max-width:450px){

    .page h1{
        font-size:38px;

        letter-spacing:-3px;
    }

    .profile-art{
        height:300px;
    }

    .social-card-content,
    .social-card-body{
        height:225px;
    }

    .social-image,
    .social-image-box,
    .social-logo-box{
        height:125px;
    }

    .gallery > .window-card:last-child .art-image{
        height:240px;
    }

}