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

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

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

body{
    cursor: url('https://cdn.cursors-4u.net/css-previews/fast-blinking-hello-kitty-de7b2692-css.webp') 0 0, auto !important;
    background:#ffd5e8;
    font-family: "DotGothic16", sans-serif;
    font-size:12px;
    padding:40px;
    box-sizing: border-box;
}

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

.page{
    width:1100px;
    margin:auto;
    padding:4px;
    background:#ffeef6;
    box-sizing: border-box;
}

.textoN{
  text-align:justify;
    font-family: "DotGothic16", sans-serif;
    font-size:12px;
        hyphens: auto;
    overflow-wrap: break-word;
  }

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

header{
    margin-bottom:4px;
}

.banner{
    height:40px;
    background: linear-gradient(
        to bottom,
        #d8f2ff 0%,
        #eefbff 100%
    );
    border:1px dashed black;
    padding:4px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    gap:4px;
    box-sizing:border-box;
}

.bannerleft{
      position: relative;
    overflow: hidden;
    border:1px solid #ffcee5;
    padding:4px;
    width:20%;
    height:28px;
    background-color:white;
    color:black;
    text-align:center;
        transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.bannerleft:hover{
    transform:scale(1.02);
    box-shadow:
        0 0 12px rgba(255,180,220,.4);

}

.bannerleft::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    repeating-linear-gradient(
        -45deg,
        #ff6db212 0px,
        #ff6db212 1px,
        transparent 1px,
        transparent 10px
    );
    animation:bannerMove 8s linear infinite;
    pointer-events:none;
}

.bannerleft > *{
    position:relative;
    z-index:2;
}

@keyframes bannerMove{
    from{
        background-position:0 0;
    }

    to{
        background-position:220px 220px;
    }
}

.bannercenter{
  line-height:15px;
  padding-top:0px;
  height:28px;
    position:relative;
    overflow:hidden;
    border:1px solid #ffcee5;
    padding:4px;
    width:60%;
    background:linear-gradient(
        to bottom,
        #ffd9ea 0%,
        #fff8fb 100%
    );
    color:black;
    text-align:center;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.bannercenter:hover{
    transform:scale(1.02);
    box-shadow:
        0 0 12px rgba(255,180,220,.4);

}

.bannercenter::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.12) 0px,
        rgba(255,255,255,.12) 1px,
        transparent 1px,
        transparent 10px
    );
    animation:bannerMove 8s linear infinite;
    pointer-events:none;
}

.bannercenter > *{
    position:relative;
    z-index:2;
}

@keyframes bannerMove{
    from{
        background-position:0 0;
    }

    to{
        background-position:220px 220px;
    }
}

.bannerright{
  height:28px;
      position: relative;
    overflow: hidden;
    border:1px solid #ffcee5;
    padding:4px;
    width:20%;
    background-color:white;
    color:black;
    text-align:center;
        transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.bannerright:hover{
    transform:scale(1.02);
    box-shadow:
        0 0 12px rgba(255,180,220,.4);

}

.bannerright::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    repeating-linear-gradient(
        -45deg,
        #ff6db212 0px,
        #ff6db212 1px,
        transparent 1px,
        transparent 10px
    );
    animation:bannerMove 8s linear infinite;
    pointer-events:none;
}

.bannerright > *{
    position:relative;
    z-index:2;
}

@keyframes bannerMove{
    from{
        background-position:0 0;
    }

    to{
        background-position:220px 220px;
    }
}

.banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:4px;
}

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

main{
    display:grid;
    grid-template-columns:
    18%
    minmax(0,64%)
    18%;
    gap:4px;
    min-width: 0;
    box-sizing:border-box;
}

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

.left,
.center,
.right{
    display:flex;
    flex-direction:column;
    gap:4px;
    box-sizing: border-box;
}

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

.box{
    background:white;
    border:1px dashed black;
    padding:4px;
    box-sizing: border-box;
}

/* ========================= */
/* ALTURAS */
/* ========================= */

#calendar{
      font-family: "DotGothic16", sans-serif;
    font-size:12px;
    width:100%;
    height:100%;
    background-color:white;
    border:1px solid #ffcee5;
        background:linear-gradient(
        to bottom,
        #ffd9ea 0%,
        #fff8fb 100%
    );
    padding:4px;
    color:black;
}

#calendarHeader{
  background-color:white;
        font-family: "DotGothic16", sans-serif;
    font-size:12px;
}

.calendarDayOfTheWeek{
  background-color:white;
        font-family: "DotGothic16", sans-serif;
    font-size:12px;
    color:black;
}

.calendarCell{
      font-family: "DotGothic16", sans-serif;
    font-size:12px;
        position: relative;
    overflow: hidden;
    border:none;
        transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.calendarCell:hover{
    transform:scale(1.02);
    box-shadow:
        0 0 12px rgba(255,180,220,.4);

}

.calendarCell::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    repeating-linear-gradient(
        -45deg,
        #ff6db212 0px,
        #ff6db212 1px,
        transparent 1px,
        transparent 10px
    );
    animation:bannerMove 8s linear infinite;
    pointer-events:none;
}

.calendarCell > *{
 position:relative;
    z-index:2;
}

@keyframes bannerMove{
    from{
        background-position:0 0;
    }

    to{
        background-position:220px 220px;
    }
}

.calendarToday{
      font-family: "DotGothic16", sans-serif;
    font-size:12px;
    color:white;
        background: linear-gradient(
        to bottom,
        #d8f2ff 0%,
        #eefbff 100%
    );
    border:1px dashed black;
}

.cal{
  height:250px;
}

.links{
    height:130px;
}

.music{
    height:120px;
}

.buttons{
    height:250px;
}

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

.welcome{
    height:auto;
    text-align:justify;
}

.welcome img{
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.welcome img:hover{
    transform: scale(1.05);
    box-shadow: 0 0 12px #6dc6ff40;
}

.intro{
    position: relative;
    overflow: hidden;
    border:1px solid #ffcee5;
    padding:4px;
    width:100%;
    height:auto;
    overflow-y:auto;
    background-color:white;
    color:black;
    box-sizing:border-box;
}

.intro::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            -45deg,
            #ff6db212 0px,
            #ff6db212 1px,
            transparent 1px,
            transparent 10px
        );
    animation: introMove 8s linear infinite;
    pointer-events: none;
}

.intro > *{
    position: relative;
    z-index: 2;
}

@keyframes introMove{
    from{
        background-position: 0 0;
    }

    to{
        background-position: 220px 220px;
    }
}

.stamps{
    margin-top:4px;
    overflow:hidden;
}

.stamps-track{
    display:flex;
    gap:8px;
    width:max-content;
    animation:stampsScroll 30s linear infinite;
}

.stamps img{
    display:block;
    flex:0 0 auto;
}

@keyframes stampsScroll{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(calc(-50% - 4px));
    }
}

.gallery{
    height:280px;
}

.guestbook{
    height:260px;
}

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

.guestbook{
    border:1px solid #ffcee5;
    background:linear-gradient(#ffd9ea,#fff8fb);
    padding:4px;
}

.guestbook iframe{
    width:100%;
    height:350px;
    border:none;
}

.updates{
    height:180px;
}

.diary{
    height:420px;
}

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

footer{

    margin-top:15px;
    height:90px;
    background:white;
    border:3px solid #ffc9de;
    border-radius:15px;
    display:flex;
    justify-content:center;
    align-items:center;
}