:root {
    --pinkhigh: #ffd8ec;
    --pink: #ffa8d3;
    --pinkgrad: #ff69b4;
    --pinkshad: #df009c;
    --pinkshad2: #ff95c1;
    --bluehigh: #d6fffd;
    --blue: #7afff4;
    --bluegrad: #01efe3;
    --blueshad: #00e9de;
    --purplehigh: #ead8ff;
    --purple: #d8a8ff;
    --purplegrad: rgb(175, 105, 255);
    --purpleshad: #7b00df;
    --green: #cbffa8;
    --greengrad: #adff69;
    --greenshad: #59df00;
    --p-main: #ffb5d5;
    --p-dark: #ff8ec6;
    --p-highlight: #ffccdfb0;
    --p-catchlight: #ffe0ec;
    --p-outline: #ff5eae;
    --s-main: #92f8ff;
    --s-dark: #5cecff;
    --s-catchlight: #d3fcff;
    --s-highlight: #e0f8ff;
    --s-outline: #37e8ff;
    --white: white;
    --g-shadow: #dadada;
    --g-outline: grey;
    --shadow: #00000036;
    --background: #ffe9f4a6;
    --lightblack: #797979;
}



body {
    margin: 0;
    padding: 0;
    background: url("bgs/background.png") repeat 0 0; 
    font-family: 'MS Gothic';
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    font-size: 14px;
}


/* container central */
#container {
    width: 1000px;
    border: solid var(--pinkshad) 1px;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 
        0px 0px 10px 0px var(--pinkshad2), 
        0px 5px 0px 0px var(--shadow), 
        inset 0px 0px 0px 2px var(--pinkhigh);
    background-color: var(--background);
    margin: 20px auto;
    backdrop-filter: blur(1px);
}

#columns {
    display: flex;
    gap: 15px;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 15px; /* espaço entre caixas */
}

#title .title1 {
    font-family: 'Nunito';
    font-size: 60px;
    margin: 0;
    padding-left: 8px;
    padding-right: -5px;
    text-align: center;
    font-weight: 900;

    /* GRADIENTE DURO (pixel style) */
    background: linear-gradient(
        to bottom,
        var(--p-catchlight) 0%,
        var(--p-main) 45%,
        var(--p-dark) 55%,
        var(--p-dark) 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* SOMBRA + BRILHO */
    filter:
        drop-shadow(0px -2px var(--p-catchlight))
        drop-shadow(0px 1px var(--p-outline))
        drop-shadow(1px 0px var(--p-outline))
        drop-shadow(0px -1px var(--p-outline))
        drop-shadow(-1px 0px var(--p-outline))

        drop-shadow(0px 3px rgb(255, 255, 255))
        drop-shadow(3px 0px white)
        drop-shadow(0px -3px white)
        drop-shadow(-3px 0px white)

        drop-shadow(0px 3px var(--shadow))
        drop-shadow(0px 1px var(--shadow))
}
    
#title .title2 { /* EU PAREI AQUI*/
    font-family: 'Nunito';
    font-size: 60px;
    margin: 0;
    text-align: center;
    font-weight: 900;

    /* GRADIENTE DURO (pixel style) */
    background: linear-gradient(
        to bottom,
        var(--s-highlight) 0%,
        var(--s-main) 45%,
        var(--s-dark) 55%,
        var(--s-dark) 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* SOMBRA + BRILHO */
    filter:
        drop-shadow(0px -2px var(--s-catchlight))
        drop-shadow(0px 1px var(--s-outline))
        drop-shadow(1px 0px var(--s-outline))
        drop-shadow(0px -1px var(--s-outline))
        drop-shadow(-1px 0px var(--s-outline))

        drop-shadow(0px 3px rgb(255, 255, 255))
        drop-shadow(3px 0px white)
        drop-shadow(0px -3px white)
        drop-shadow(-3px 0px white)

        drop-shadow(0px 3px var(--shadow))
        drop-shadow(0px 1px var(--shadow))
}

/* header */
header {
    background-image: url("https://cinni.net/images/scene/cy/tékk07.gif");
    border: solid rgb(255, 149, 193);
    border-radius: 5px 5px 0px 0px;
    border-width: 1px 1px 0px 1px;
    margin-bottom: 0px;
    height: 140px;
    text-align: left;
    background-position: left bottom;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
}

.espaco_tags {
    padding: 3px;
    border: 1px solid;
    /* border-radius: 7px; */
    border-color: var(--pinkshad);
    background: var(--pink);
    box-shadow:
        inset 0px -17px 0px 0px var(--pinkgrad),
        inset 0px 0px 0px 2px var(--pink),
        inset 0px 2px 0px 2px var(--pinkhigh);

    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px;

    align-items: center;
}

.tags marquee {
    color:var(--pink);
    background-color: white;
    height: 20px;
    border: 1px solid;
    border-color: var(--pinkshad);
    border-radius: 15px;

    display: flex;
    align-items: center;
    gap: 5px;
    
    padding: 0 5px;
    width: 45%;
}

.tags img {
    height: 17px;
    margin: 0;
    image-rendering: pixelated;
    vertical-align: middle;
}

.corner_img {
    background-color: white;

    height: 30px;
    padding: 0 2px;

    border: 1px solid;
    border-color: var(--pinkshad);
    border-radius: 7px;

    display: flex;             
    align-items: center;        
    justify-content: center;    
}

.faixa_blinkies {
    background: #d1007a; /* roxo/rosa da sua faixa */
    padding: 4px 0;

    display: flex;
    justify-content: center; /* centraliza os blinkies */
    align-items: center;
}

.blinkies {
    display: flex;
}

.blinkies img {
    height: 25px;
    image-rendering: pixelated;
    width: 166.6px;
    justify-content: space-around;
}




/* estrutura base */
.column {
    align-items: center;
    gap: 5px; /* espaço entre caixas */
    border: 1px solid rgb(255, 149, 193);
    
}

.main_column {
    background-color: white;
    border: 1px solid var(--lightblack);
    background-image: url("https://www.hellomei.dev/images/assets/backgrounds/grid.png");
}



/* -------------------------- ESQUERDA ----------------------------------- */




/* COLUNA ESQUERDA LAYOUT */
.columnLeft {
    border: solid;
    border-color: var(--pink);
    border-width: 0.5px 0.5px 0px 0.5px;
    width: 170px;
    background-color: white;
    display: block;
    height: fit-content;

}


/* NAVIGATION */

.columnL-header {
    padding: 0px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: var(--pinkshad) var(--pinkshad) var(--pinkshad) var(--pinkshad);
    background: var(--pink);

    box-shadow: 
        inset 0px -12px 0px 0px var(--pinkgrad), 
        inset 0px 0px 0px 2px var(--pink), 
        inset 0px 2px 0px 2px var(--pinkhigh);
    color: white;
    font-weight: bolder;

    text-shadow: 
        1px 1px var(--pinkshad), 
        0px 1px var(--pinkshad), 
        1px 0px var(--pinkshad), 
        0px -1px var(--pinkshad), 
        -1px 0px var(--pinkshad), 
        -1px -1px var(--pinkshad), 
        1px -1px var(--pinkshad), 
        -1px 1px var(--pinkshad);

    display: grid;
    grid-template-columns: 2.3fr 1fr;
}

.columnL-header p {
    margin: 5px;
    font-size: small;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}


.navigation {
    background: white;
    border: 1px solid rgb(255, 149, 193);
        
}


.navigation h1 {
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 3px;
    margin-bottom: 3px;
    font-size: 6.5px;
}


.navigation ul {
    font-size: small;
    list-style: none;
    gap: 10px;
    padding: 0px;
    margin-top: -4px;
    color: var(--blue);
    transition: all 0.2s ease;
}

.aboutMe {
    font-family: "Press Start 2P";
    font-size: 5px;
    font-style: normal;
    text-align: left;
    text-transform: uppercase;
    text-shadow: var(--pinkshad) 1px 1px 1px;
    margin-top: 0px;
    margin-bottom: 10px;
    border-radius: 3px;
    color: white;
    padding: 3px;
    background-color: var(--pink);
}


.navButton {
    font-family: "MS UI Gothic";
    font-size: 15px;
    text-decoration: none;
    padding: 3px 5px 3px 5px;
    color: var(--bluegrad);
    display: block;
    box-shadow: inset 0px 0px 0px 1px white;;
    background: white;
    transition: all 0.2s ease;
    transform: perspective(1px) translateZ(0);
    position: relative;
}

/* ---------- ANIMAÇÃO SWEEP TO RIGHT ---------  */

/* Sweep To Right */

.navButton:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--pinkhigh);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s ease-out;
}
.navButton:hover {
  color: white;
  text-shadow: var(--pinkshad) 1px 1px
}
.navButton:hover:before {
  transform: scaleX(1);
}



/* ---------- ANIMAÇÃO POINTER ----------- */

.pointer {
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.2s ease;
}

.navButton:hover .pointer {
    opacity: 1;
    transform: translate(3px);

} 

/* ------------------ MUSIC ------------------ */

.music-header {
    padding: 0px;
    border-width: 1px 1px 1px 1px;
    border-style: solid;
    border-color: var(--pinkshad) var(--pinkshad) var(--pinkshad) var(--pinkshad);
    background: var(--pink);

    box-shadow: 
        inset 0px -12px 0px 0px var(--pinkgrad), 
        inset 0px 0px 0px 2px var(--pink), 
        inset 0px 2px 0px 2px var(--pinkhigh);
    color: white;
    font-weight: bolder;

    text-shadow: 
        1px 1px var(--pinkshad), 
        0px 1px var(--pinkshad), 
        1px 0px var(--pinkshad), 
        0px -1px var(--pinkshad), 
        -1px 0px var(--pinkshad), 
        -1px -1px var(--pinkshad), 
        1px -1px var(--pinkshad), 
        -1px 1px var(--pinkshad);

    display: grid;
    grid-template-columns: 2.3fr 1fr;
}


.music-header p {
    margin: 5px;
    font-size: small;
    font-family: 'MS UI Gothic';
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}


.music {
    background: white;
    border: 1px solid rgb(255, 149, 193);
    padding: 0px;
}

/* web player estilização */

.disc-container{
    width:100px;
    height:100px;
    margin: 2px auto;
}

#disc{
    width:100%;
    border-radius:50%;
    transition: transform 0.1s linear;
}

.player{
    width: auto;
    background: white;
    padding: 13px;
}

.player-screen{
    background: var(--pinkhigh);
    color: var(--pinkshad);
    border: 1px solid rgb(255, 149, 193);   
    padding: 1.5px;
    font-size: small;
    margin-bottom:5px;
}

.controls{
    display:flex;
    justify-content:space-between;
    margin-bottom: 1px;
    margin-top: 11px;
}

.controls button{
    width: 30px;
    height: 20px;
    font-size: 11px;
    padding-top: -4px;
    padding-bottom: 15px;
    color:#ff39b3;
    background: var(--pink);
    
    border-top: 2.5px solid var(--pinkhigh);
    border-left: 2.5px solid var(--pinkhigh);
    border-right: 2.5px solid var(--p-outline);
    border-bottom: 2.5px solid var(--p-outline);

    cursor: pointer;
}

.controls button:active{
    border:3px inset var(--pinkhigh)
}

.progress-container{
    width: auto;
    height: 2px;
    background: var(--pinkhigh);
    border: 1px solid var(--pink);
}

#progress{
    height: 2px;
    width:0%;
    background:var(--pink);

}

.time-display{
    font-family: "Courier New", monospace;
    font-size: 7.5px;
    margin-top: 2px;
    color: var(--pinkshad);
}


.buttons {
    background: white;
    border: 1px solid rgb(255, 149, 193);
    padding: 10px;
    border-radius: 10px;
}

.volume-control{
    display:flex;
    align-items:center;
    margin-top: 5px;
    color: var(--pink)
}

.volume{
    accent-color: #3cff3c;
}

.volume-control input{
    width:100%;
}

/* estilização barra de volume */

/* Container */
.volume-control {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 5px;
}

/* Slider */
#volume {
    appearance: none;
    -webkit-appearance: none;
    width: 115px;
    height: 2px;
    background: var(--back);
    border-radius: 4px;
    border: 1px solid var(--pinkhigh);
    outline: none;
    cursor: pointer;
}

/* Track no Firefox */
#volume::-moz-range-track {
    background: var(--background);
    height: 2px;
    border-radius: 4px;
}

/* Track no Chrome/Safari/Edge */
#volume::-webkit-slider-runnable-track {
    background: var(--background);
    height: 2px;
    border-radius: 4px;
}

/* Thumb no Chrome/Safari/Edge */
#volume::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    height: 19px;
    width: 19px;
    background: url('pngs/volume-bar4.png') no-repeat center;
    image-rendering: pixelated;
    border: none; 
    margin-top: -9px; /* centraliza no track */
    cursor: pointer;
}

/* Thumb no Firefox */
#volume::-moz-range-thumb {
    height: 20px;
    width: 20px;
    background: url('thumb.png') no-repeat center;
    background-size: contain;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

/* --------- NEIGHBORS ----------- */

.neighbors {
    border: solid;
    border-color: var(--pink);
    border-width: 0.5px 0.5px 0px 0.5px;
    width: 170px;
    background-color: white;
    display: block;
    height: fit-content;
}

.neigharea {
    gap: 5px;
    padding: 5px;
}

/* -------------------------- MEIO ----------------------------- */

.main_column {
    text-rendering: optimizeSpeed;
    flex: 1;
    border: solid;
    border-color: rgb(121, 121, 121) var(--shadow) var(--shadow) rgb(121, 121, 121);
    border-width: 1px 1px 0px 1px;
    width: 170px;
    background-color: white;
    display: block;
    height: fit-content;
    padding: 5px;
}

.welcomeText {

    background-color: white;
    margin-bottom: 10px;
    box-shadow: 0px 5px 0px 0px rgb(240, 212, 222), inset 0px -5px 0px 0px rgb(240, 212, 222);
    border-width: 1px;
    border-style: solid;
    border-color: var(--pinkshad);
    border-image: initial;
    padding: 10px;
    border-radius: 5px;

}

.welcomeText h2.fromTitle {
    margin: -7px -7px 5px;
}

h2.fromTitle {
    font-family: "Press Start 2P"; 
    font-weight: 100;
    font-size: 5.5pt;
    color: white;
    text-shadow: 
        1px 1px var(--shadow), 
        0px 1px var(--shadow), 
        1px 0px var(--shadow), 
        0px -1px var(--shadow), 
        -1px 0px var(--shadow), 
        -1px -1px var(--shadow), 
        1px -1px var(--shadow), 
        -1px 1px var(--shadow);
    text-align: left;
    background-color: var(--pink);
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0px 0px 5px;
}

.welcomeText p {
    font-family: 'MS UI Gothic';
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

.welcomeText b {
    color: var(--p-dark);
}


.welcomeGif {
    height: 30px;
    vertical-align: middle;
    top: 200px;
}

.main_content{
    width: 200px;
    background-color: white;
    margin-bottom: 10px;
    box-shadow: 0px 5px 0px 0px rgb(240, 212, 222), inset 0px -5px 0px 0px rgb(240, 212, 222);
    border-width: 1px;
    border-style: solid;
    border-color: var(--pinkshad);
    border-image: initial;
    padding: 10px;
    border-radius: 5px;

}

.thanks {

    width: auto;
    background-color: white;
    margin-bottom: 10px;
    box-shadow: 0px 5px 0px 0px rgb(240, 212, 222), inset 0px -5px 0px 0px rgb(240, 212, 222);
    border-width: 1px;
    border-style: solid;
    border-color: var(--pinkshad);
    border-image: initial;
    padding: 10px;
    border-radius: 5px;

}



/* ------- DIREITA --------- */

.columnRight {

    border: solid;
    border-color: var(--lightblack) var(--lightblack) var(--shadow) var(--shadow);
    border-width: 0px 0px 1px 1px;
    width: 170px;
    background-color: white;
    display: block;
    height: fit-content;
}  

/* CALENDARIO */
.calendarImg img {
    width: 170px;
}
.calendar {
    background: white;
    border-style: solid;
    border-color: var(--pinkshad2);
    border-width: 1px;
    width: 170px;
    font-size: 11px;
}

.calendar-header {
    font-family: 'MS UI Gothic';
    font-size: 17px;
    text-align: center; 
    margin-bottom: 5px;
    color: var(--p-outline);
    background-color: var(--p-catchlight);
    border-radius: 600px;
    background-position: 1px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0px;
}

.day {
    text-align: center;
    padding: 3px;
    border: 1px solid var(--pinkshad2);
    color: var(--p-outline);
}

/* DIA ATUAL */
.today {
    background: hotpink;
    color: white;
    font-weight: bold;
}

.updates {
    background: white;
    border: 1px solid rgb(255, 149, 193);
    padding: 10px;
    border-radius: 10px;
}

.guestbook {
    background: white;
    border: 1px solid rgb(255, 149, 193);
    padding: 10px;
    border-radius: 10px;
}

.stats {
    background: white;
    border: 1px solid rgb(255, 149, 193);
    padding: 10px;
    border-radius: 10px;
}

.strawberries {
    background-image: url("pngs/div.gif");
    height: 10px;
    border: none;
    margin: 0px;
}


/* caixas */
.box {
    background: white;
    border: 1px solid rgb(255, 149, 193);
    padding: 10px;
    border-radius: 10px;
}

/* footer */
footer {
    margin-top: 15px;
    background-image: url("bgs/xadrez_azul.png");
    border: 1px solid rgb(92, 231, 255);
    text-align: center;
    padding: 10px;
}

/* links bem old */
a {
    color: rgb(0, 204, 255);
    text-decoration: underline;
}

a:hover {
    color: rgb(0, 81, 255);
}