/* ==========================================
   SANTICIDE WEBSITE
   MAIN STYLESHEET
   ========================================== */

/* FONTES */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Space+Mono:wght@400;700&display=swap');


/* PALETA DE CORES */
:root {

    --pink: #EF476F;
    --yellow: #FFD166;
    --green: #06D6A0;
    --blue: #118AB2;
    --deep: #073B4C;
    --silver: #ced4da;
    --ink: #212529;

    --paper: #e8e5dc;

}


/* RESET */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;
    min-height: 100vh;

    color: var(--ink);

    font-family: 'Space Mono', monospace;
    font-size: 13px;

    background-color: var(--deep);

    background-image:

        radial-gradient(ellipse at 12% 18%,
            rgba(17, 138, 178, .65),
            transparent 34%),

        radial-gradient(ellipse at 88% 78%,
            rgba(6, 214, 160, .22),
            transparent 35%),

        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, .025) 0 1px,
            transparent 1px 3px);

    padding: 22px;
}


/* CONTAINER PRINCIPAL */
.desktop {

    max-width: 1120px;
    margin: auto;

}


/* ==========================================
   CABEÇALHO
   ========================================== */

.topbar {

    display: flex;
    align-items: center;
    gap: 5px;

    padding: 5px;

    background: var(--silver);

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

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

    margin-bottom: 20px;

}


.brandmark {

    font-family: 'VT323', monospace;
    font-size: 25px;

    padding: 2px 14px;

    color: var(--deep);

}


.nav {

    display: flex;
    gap: 5px;
    flex: 1;

    flex-wrap: wrap;

}


.nav a {

    color: var(--ink);
    text-decoration: none;

    font-family: 'VT323', monospace;
    font-size: 23px;

    padding: 4px 17px;

    background: #e9e6dd;

    border: 2px outset #fff;

    min-width: 86px;

    text-align: center;

}


.nav a:hover,
.nav a.active {

    background: var(--pink);
    color: #fff;

    border-style: inset;

}


.clock {

    font-family: 'VT323', monospace;
    font-size: 21px;

    padding: 4px 12px;

    margin-left: auto;

}


/* ==========================================
   ESTRUTURA
   ========================================== */

.workspace {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}


.stack {

    display: grid;

    gap: 18px;

    align-content: start;

}


/* ==========================================
   JANELAS
   ========================================== */

.window {

    background: var(--paper);

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

    box-shadow:
        5px 5px 0 rgba(0, 0, 0, .38),
        inset 2px 2px 0 #fff;

    padding: 5px;

    min-width: 0;

}

/* Pequeno desalinhamento proposital das janelas */
#about,
#internet {
    margin-top: 38px;
}

.titlebar {

    height: 35px;

    display: flex;

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

    padding: 4px 8px;

    color: #fff;

    font-family: 'VT323', monospace;
    font-size: 23px;

    letter-spacing: .02em;

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

    background: var(--pink);

    text-shadow: 1px 1px #8c1e3c;

}


.titlebar.teal {

    background: var(--green);

    color: var(--deep);

    text-shadow: none;

}


.controls {

    display: flex;
    gap: 4px;

}


.controls span {

    width: 19px;
    height: 18px;

    display: grid;
    place-items: center;

    background: var(--silver);

    border: 2px outset #fff;

    color: var(--ink);

    font: bold 12px Arial;

}


.content {

    padding: 17px;

}


/* ==========================================
   PERFIL
   ========================================== */

.profile {

    display: grid;

    grid-template-columns: 132px 1fr;

    gap: 20px;

    align-items: center;

}


.avatar-frame {

    padding: 5px;

    background: #fff;

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

    box-shadow: 3px 3px 0 #77838b;

}


.avatar {

    aspect-ratio: 1;

    width: 100%;

    display: grid;
    place-items: center;

    overflow: hidden;

    background: linear-gradient(145deg,
            var(--blue),
            var(--deep));

    color: var(--yellow);

    font: 64px 'VT323', monospace;

    cursor: pointer;

    user-select: none;

}


.avatar img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.avatar-hint {

    text-align: center;

    font: 16px 'VT323', monospace;

    color: #68747a;

    margin-top: 6px;

}


h1 {

    font: bold clamp(30px, 4vw, 45px) 'VT323', monospace;

    color: var(--deep);

    margin: 0 0 3px;

    line-height: 1;

}


.handle {

    font: 20px 'VT323', monospace;

    color: var(--blue);

    margin-bottom: 17px;

}


.quote {

    border-top: 1px dashed #8c969b;

    border-bottom: 1px dashed #8c969b;

    padding: 12px 0;

    font: 18px 'VT323', monospace;

    line-height: 1.2;

    color: #39464d;

}


/* ==========================================
   LINKS SOCIAIS
   ========================================== */

.links-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 9px;

}


.social {

    min-height: 46px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 6px 10px;

    color: var(--ink);

    text-decoration: none;

    background: #dedbd2;

    border: 2px outset #fff;

    box-shadow: 1px 1px 0 #89949a;

    font-family: 'VT323', monospace;

    font-size: 19px;

    transition:
        transform .12s,
        background .12s;

}


.social:hover {

    background: var(--yellow);

    transform: translate(-1px, -1px);

}


/* ÍCONES */
.social-icon {

    width: 23px;
    height: 23px;

    flex-shrink: 0;

    padding: 3px;

    border-radius: 50%;

    background: var(--deep);

    object-fit: contain;

}


/* CORES ALTERNADAS */
.social:nth-child(3n) .social-icon {

    background: var(--pink);

}


.social:nth-child(3n + 2) .social-icon {

    background: var(--blue);

}


/* SETAS */
.social .arrow {

    margin-left: auto;

    color: var(--blue);

    font-weight: bold;

}


/* ==========================================
   LISTENING NOW
   ========================================== */

.music-layout {

    display: grid;

    grid-template-columns: 132px 1fr;

    gap: 17px;

    align-items: center;

}


.album {

    aspect-ratio: 1;

    background: linear-gradient(145deg,
            #b6cbd0,
            var(--blue) 58%,
            var(--deep));

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

    box-shadow: 3px 3px 0 #8a9699;

    display: grid;

    place-items: center;

    color: var(--yellow);

    font: 64px 'VT323', monospace;

    position: relative;

    overflow: hidden;

}


.album:after {

    content: "";

    position: absolute;

    inset: 0;

    background: repeating-linear-gradient(135deg,
            transparent 0 8px,
            #fff2 8px 10px);

}


.playing {

    display: inline-block;

    background: var(--yellow);

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

    padding: 3px 7px;

    font: 16px 'VT323', monospace;

    margin-bottom: 9px;

}


.song {

    font: bold 25px 'VT323', monospace;

    color: var(--deep);

    line-height: 1.05;

}


.artist {

    font: 18px 'VT323', monospace;

    color: #52616a;

    margin-top: 5px;

}


.source {

    font: 14px 'VT323', monospace;

    color: #778187;

    margin-top: 10px;

}


.equalizer {

    height: 26px;

    display: flex;

    align-items: end;

    gap: 3px;

    margin-top: 13px;

}


.equalizer i {

    display: block;

    width: 5px;

    background: var(--blue);

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

}


.equalizer i:nth-child(1) {
    height: 8px;
}

.equalizer i:nth-child(2) {
    height: 17px;
}

.equalizer i:nth-child(3) {
    height: 12px;
}

.equalizer i:nth-child(4) {
    height: 23px;
}

.equalizer i:nth-child(5) {
    height: 15px;
}

.equalizer i:nth-child(6) {
    height: 20px;
}

.equalizer i:nth-child(7) {
    height: 10px;
}

.equalizer i:nth-child(8) {
    height: 24px;
}


.music-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 15px;

    padding-top: 10px;

    border-top: 1px dashed #9aa3a5;

    font: 15px 'VT323', monospace;

    color: #58656b;

}


.music-bottom a {

    color: var(--blue);

    font-weight: bold;

}


/* ==========================================
   CAIXAS DE TEXTO
   ========================================== */

.status {

    font: 17px 'VT323', monospace;

    line-height: 1.5;

    color: #46535a;

}


/* ==========================================
   RODAPÉ
   ========================================== */

.footer {

    text-align: center;

    color: #c2d0d5;

    font: 16px 'VT323', monospace;

    margin-top: 17px;

    letter-spacing: .08em;

}


/* ==========================================
   RESPONSIVIDADE
   ========================================== */

@media (max-width: 760px) {

    body {

        padding: 12px 10px 25px;

    }


    .workspace {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .topbar {

        margin-bottom: 14px;

        flex-wrap: wrap;

    }


    .brandmark {

        display: none;

    }


    .nav {

        gap: 4px;

    }


    .nav a {

        flex: 1;

        min-width: 65px;

        padding: 4px 8px;

        font-size: 20px;

    }


    .clock {

        width: 100%;

        text-align: right;

        margin: 0;

        padding: 0 7px 3px;

    }


    .content {

        padding: 13px;

    }


    .profile {

        grid-template-columns: 115px 1fr;

        gap: 14px;

    }

}


@media (max-width: 390px) {

    .profile {

        grid-template-columns: 92px 1fr;

    }


    .avatar {

        font-size: 50px;

    }


    .quote {

        font-size: 16px;

    }


    .links-grid {

        grid-template-columns: 1fr;

    }


    .music-layout {

        grid-template-columns: 105px 1fr;

    }


    .song {

        font-size: 22px;

    }

}

#avatar-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}