/* =========================
   BACKGROUND
========================= */

body.inicio {
    background-image: url("EllieWebCam.gif");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* =========================
   LOGO
========================= */

#logo {
    position: fixed;
    top: 75px;
    left: 75px;
    z-index: 1000;
}

#logo img {
    width: 500px;
    height: auto;
    transition: transform 0.2s ease;
}

#logo img:hover {
    transform: scale(1.1);
}

/* =========================
   START BUTTON
========================= */

#start-button {
    display: inline-block;
    
    position: fixed;

    left:-30px;
    top: 400px;
}

#start-button img {
    width: 370px;     
    height: auto;

    transition: transform 0.3s ease;
}

#start-button img:hover {
    transform: translateX(30px);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.4));
}

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

#socials {
    position: fixed;
    bottom: 20px;
    right: 20px;

    display: flex;
    flex-direction: row;
    gap: 10px;
}

#socials img {
    width: 70px;
    height: 70px;
    transition: transform 0.2s ease;
}

#socials img:hover {
    transform: scale(1.1);
}

/* =========================
   Reset
========================= */
:root{

    --content-width:1100px;
    --gap:20px;

}

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

#right-sidebar {
    padding: 20px;
}

#right-sidebar h2 {
    margin-bottom: 15px;
}

.about-image {
    margin-bottom: 20px;
}

#right-sidebar p {
    line-height: 1.6;
}

/*==================================================
FUENTES
==================================================*/

body{

    font-family:"Didact Gothic", sans-serif;
    color:#4e2624;
}

h1,h2,h3{

    font-family:"Cal Sans", sans-serif;
    color:#f08c9b;
}

/* =========================
   LOBBY BACKGROUND Y BANNER
========================= */

#news-banner{
    position: relative;

    height: 90px;
   
    background-image:url("Banner.png");
    background-size:cover;
    background-position:center 0px;

    overflow:hidden;
    border-bottom: 3px solid #7d94cd;

}

#news-container{
    position:absolute;

    left:3px;
    right:3px;

    top: 67px;
    transform:translateY(-65%);

    overflow:hidden;
}

#news-track{

    display:flex;
    width:max-content;
    animation:ticker 35s linear infinite;
}

#news-track span{

    white-space:nowrap;

    padding-right:80px;

    font-family:"Cal Sans", sans-serif;
    font-size:25px;

    color:#536799;
}

@keyframes ticker{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-65%);
    }

}

#presenter {
    position: absolute;
    right: 35px;
    top: 53px;
    transform: translateY(-50%);

    z-index: 2;
}

#presenter img {
    width: 110px;
    height: auto;
}

body {
    margin: 0;
    padding: 0;

    background-image: url("zapallosis.png");
    background-repeat: repeat;
    background-size: 220px;
    color: #4e2624;
}

/*==================================================
LAYOUT
==================================================*/

#layout{
    
    position: relative;
    display:grid;

    grid-template-columns:280px 1fr 280px;

    gap:var(--gap);

    max-width:var(--content-width);

    margin: 35px auto 0 auto;

    padding:0 20px;

}

/*====================================
IZQUIERDO ARRIBA
====================================*/  

#left-sidebar{
    grid-column:1;
    grid-row:1 / 4;

    display:flex;
    flex-direction:column;
    gap:20px;
}

.image-button{

    display:flex;
    justify-content:center;
    align-items:center;
    width:230px;
    height:70px;

    background-size:100% 100%;
    background-repeat:no-repeat;

    transition:.2s;
}

.image-button:hover{
    transform:translateX(8px);
}

.menu-card a{
    
    text-decoration: none;
    color:#553635;

    font-family:"winky Rough", sans-serif;
    font-size:20px;

    transform: rotate(-2deg);
}

#btn-inicio{
    background-image:url("Marcador1.png");
}

#btn-galeria{
    background-image:url("Marcador2.png");
}

#btn-sketchbook{
    background-image:url("Marcador3.png");
}

#btn-libretas{
    background-image:url("Marcador4.png");
}

#sidebar-logo{

    text-align: left;
    margin-bottom:0px;
}

#sidebar-logo img{

    width:250px;
    height:auto;

    transition:transform .2s ease;
}

#sidebar-logo img:hover{

    transform:scale(1.05);
}

/*====================================
IZQUIERDO CENTRO
====================================*/

#left-middle{
    grid-column:1;
    grid-row:2;

    width:280px;
    height:350px;

    background-image:url("CheckList.png");
    background-repeat:no-repeat;
    background-size:100% 100%;

    position:relative;
    margin-top: -250px;

}

.checklist-content{

    position:absolute;

    top:20px;
    left: 16px;
    right:38px;
    bottom:20px;

    overflow-y:auto;
    overflow-x: hidden;

    transform: rotate(-1deg);

}

.checklist-content h2{

    text-align:center;

    margin-top:55px;
    margin-bottom:30px;
    margin-left: 20px;

    font-size:23px;
    letter-spacing:2px;

    color:#536799;
}

.checklist-content li{

    margin-bottom:13px;
    padding-left:10px;
    font-size:20px;
    line-height:1;

    font-family:"winky Rough", sans-serif;
    color:#40405e;
}

.checklist-content li a{

    display:block;
    text-decoration:none;
    color:#40405e;

    padding-left:5px;
    transition:.2s;

}

.checklist-content li a:hover{
    background:rgba(243,170,181,.25);
    transform:translateX(3px);
}
.checklist-content li a::before{
    content:"☐ ";
    color:#536799;
}
.checklist-content li a:hover::before{
    content:"☑ ";
}

/*====================================
IZQUIERDO INFERIOR
====================================*/
#player{
    position:relative;
    width:270px;
    margin-top: -630px;
    margin-left: -400px;
    transition: transform .2s ease;

}

#player-base{
    width:100%;
    display:block;
}

#player:hover{

    animation: playerShake .35s ease;

}

@keyframes playerShake{

    0%   { transform: rotate(0deg); }

    20%  { transform: rotate(-1deg) translateX(-2px); }

    40%  { transform: rotate(1deg) translateX(2px); }

    60%  { transform: rotate(-0.8deg) translateY(-1px); }

    80%  { transform: rotate(0.8deg) translateY(1px); }

    100% { transform: rotate(0deg); }

}

.btn{
    position:absolute;
    width:270px;
    margin-top: -232px;
    margin-left: 0px;
    cursor:pointer;}

.btn:hover{
    transform:translateY(1px);
}

#play{
    width:80px;
    left:120px;
    bottom:75px;
    z-index: 1000;
}

#prev{
    width:71px;    
    left:105px;
    bottom:55px;
}
#next{
    width:76px;
    left:140px;
    top:292px;
}
#volup{
    width:45px;    
    left:175px;
    top: 338px;
}

#voldown{
    width: 45px;    
    left:100px;
    top:298px;
}

/*====================================
CENTRO SUPERIOR
====================================*/

#center-top{
    grid-column:2;
    grid-row:1;

    background-image:url("papelconagujero.png");
    background-size:100% 100%;

    background-repeat:no-repeat;

    height: 750px;
    padding:35px;

    position:relative;

    overflow-y:auto;

    padding-right:10px;

}

.paper-content{
    height:100%;
    overflow-y:auto;
    padding-right:10px;

    display: flex;
    align-items: flex-start;
}

#center-top h1{
    margin-top:-20px;
    margin-bottom: 9px;
    margin-left: 250px;
}

#center-top p{
    margin-top:0px;
    margin-left:30px;
    margin-right:14px;
    line-height:18px;
    text-align:left;
}

#updates{
    display:flex;
    flex-direction:column-reverse;
}

.update{
    margin-bottom:15px;
    padding-bottom:15px;
    border-bottom:2px dashed #d8b2bb;
}

.update h2{
    font-size:28px;
    margin-left:20px;
}

.update h3{
    font-size:18px;
    color:#7d94cd;
    margin-left:20px;
}

/*================= Barra de Scroll ===================*/

::-webkit-scrollbar{
    width:14px;
}

::-webkit-scrollbar-track{
    background:#fdeff3;
    border-radius:10px;
}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
        #f7c4d1,
        #f3aab5,
        #de8fa0
    );

    border-radius:999px;
    border:2px solid #fdeff3;
}

/*====================================
CENTRO MEDIO
====================================*/
#center-middle{

    grid-column:2;
    grid-row:2;

    background-image:url("papel.png");
    background-size:100% 100%;
    background-repeat:no-repeat;

    height:650px;  
    padding:35px;

}

#center-middle h2{ 
    text-align:center; 
    margin-bottom:0px; 
    font-size: 30px;
    letter-spacing: 3px;
} 
    
.guestbook-intro{ 
    text-align:center; 
    margin-bottom:20px;

} 

#mailbox{ 
    height:300px; 
    overflow-y:auto; 
    padding:15px; 
} 
    
.letter{ 
    background:white; 
    border:2px solid #e4d5d8; 
    border-radius:12px; padding:15px; 
    margin-bottom:15px; box-shadow:0 2px 8px rgba(0,0,0,.08); 
    transition:.2s; 
} 

.letter:hover{ 
    transform:translateY(-3px); 
} 

.letter-header{ 
    display:flex; 
    justify-content:space-between; 
    margin-bottom:10px; 
    font-size:14px; 
    color:#7c6f73; 

} 

.letter-subject{ 
    font-family:"Cal Sans", sans-serif; 
    font-size:22px; color:#536799; 
    margin-bottom:12px; border-bottom:1px solid #e8d7db; 
    padding-bottom:8px; 

} 

.letter-body{ 
    line-height:1.7;    
} 

/*====================================
CENTRO INFERIOR
====================================*/
#center-bottom{

    position:relative;

    overflow-y:auto;

    height:300px;
    width:400px;

    background-image:url("Carta.png");
    background-size:100% 100%;
    background-repeat:no-repeat;

    margin-top:-190px;
    padding:35px;

    box-shadow:0 6px 12px rgba(0,0,0,.2);

    transform:translateX(-50%) rotate(10deg);

}

.letter-card{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%, -50%);

    width:80%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

}

.guestbook-text{

    margin-top:10px;

}

.guestbook-button{

    display:inline-block;
    padding:14px 35px;
    background:#f3aab5;
    color:white;

    text-decoration:none;
    border-radius:12px;
    font-family:"Cal Sans", sans-serif;
    transition:.25s;
    margin-top:20px;

}

.guestbook-button:hover{

    transform:translateY(-3px);
    background:#ef95a4;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.guestbook-button:active{
  
    transform:translateY(0);
}
/*====================================
PANEL DERECHO SUPERIOR
====================================*/
#right-top{
    grid-column:3;
    grid-row:1;

    background:#fdedf0;
    border:3px solid #f3aab5;
    border-radius:20px;
    padding:20px;

    box-sizing:border-box;
    text-align: center;
}

#right-top h2 {
    text-align: center;
    letter-spacing: 3px;
    font-size: 50px;
    margin-bottom: 0px;
}

#right-top p {
    margin-top: -10px;
    margin-bottom: 10px;
}

.inline-icon{

    width:23px;
    height:14px;
    vertical-align:middle;
    margin:0px;
}

.about-image-container {

    text-align: center;
    width:100px;
}

.about-image {
    display: block;
    width: 239px;
    margin-top: -10px;
}

/*====================================
PANEL DERECHO INFERIOR
====================================*/

#right-bottom{
    grid-column:3;
    grid-row:2;

    background-image:url("Posit1.png");
    background-size:100% 100%;

    background-repeat:no-repeat;

    height:300px;  
    padding:35px;

    transform: rotate(7deg);
    position: relative;
    margin-top: -25px;
    box-shadow:0 6px 12px rgba(0,0,0,.2);

}

.postit-content{

    position:absolute;

    top:50px;
    left:50px;
    right:50px;
    bottom:50px;

    overflow-y:auto;

}

/*====================================
Decoración
====================================*/

.decoration{

    position: absolute;
    pointer-events:none;
    z-index:-1;

}

.sticker1{

    top:580px;
    left:350px;
    width:150px;
    transform:rotate(5px);

}

.stickertuki{

    top:60px;
    left:670px;
    width:125px;
    transform:rotate(10px);
    z-index: 50;

}

.sticker2{

    top:800px;
    left:1130px;
    width:130px;
    transform:rotate(10deg);
    z-index: 50;
}

.escarabajo{
    top:1190px;
    left:600px;
    width:200px;
    z-index: 50;

}

.sutontocompleto{
    top:1150px;
    left:1300px;
    width:300px;
    z-index: -1;
    transform:rotate(-20deg);
} 

.lapiz{

    position: absolute;
    width: 600px;
    right: -400px;
    bottom: -50px;
    z-index: 50;
    pointer-events: none;

}