@font-face {
    font-family: "Babydoll";
    src: url("fonts/Baby Doll.ttf");
}

@font-face {
    font-family: "Starborn";
    src: url("fonts/Starborn.ttf");
}


body{

    background-image: url("images/bg.jpg");
    background-repeat: repeat;

    font-family:"Babydoll";

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

    min-height:100vh;

    padding:40px;
}

/* ---------- CARD ---------- */

.card{

    width: 90%;
    max-width: 1000px;
    margin: auto;

    background:rgba(255,255,255,.88);

    border-radius:14px;
    

    padding:35px;

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

}


/* ---------- TITLE ---------- */

.site-title{

    text-decoration:none;

    color:#1f3f7c;
    font-family:"starborn";

    font-size:50px;

    font-weight:bold;

    display:block;

    text-align:center;

    margin-bottom:18px;

}

.site-title:hover{

    opacity:.75;

}


/* ---------- DIVIDER ---------- */

.divider{

    height:2px;

    background:#2e56a3;

    margin-bottom:30px;

}


/* ---------- LAYOUT ---------- */

.layout{

    display:grid;

    grid-template-columns:260px 1fr 250px;

    gap:35px;

    align-items:start;

}

/* ---------- LEFT SIDE ---------- */

.sidebar{

    display:flex;

    flex-direction:column;

}


.profile{

    width:100%;

    height:auto;

    border-radius:8px;

    margin-bottom:22px;

}


/* ---------- NAV ---------- */

.sidebar nav{
    display:flex;
    flex-direction:column;
    gap:14px;
}


nav a{

    text-decoration:none;

    color:#20478c;

    font-size:23px;

    font-weight:bold;

    transition:.25s;

}


nav a:hover{
    color:#ff4b9c;
    transform: translateY(-2px);
}


/* ---------- RIGHT SIDE ---------- */

.main-content{

    display:flex;

    flex-direction:column;

    gap:45px;

}


/* ---------- HEADINGS ---------- */

h2{

    color:#ff4b9c;
    font-family:"Starborn";

    font-size:35px;

    margin-bottom:18px;

}


/* ---------- CURRENTLY ---------- */

.currently p{

    font-size:15px;

    margin-bottom:5px;

    color:#222;
}


.currently strong{

    color:#111;
font-family:"Babydoll";
} 


/* ---------- UPDATES ---------- */

.updates ul{

    padding-left:25px;

}


.updates li{

    font-size:15px;

    margin-bottom:12px;

}
/* ---------- CUSTOMIZATION ---------- */
::selection {
  background-color: #FF4B9C;
  color: white;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #fff8fc;
}

::-webkit-scrollbar-thumb {
  background: #222B70;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #242C85;
}
a {
    transition: .25s;
}
img {
    transition: .3s;
}

img:hover {
    transform: scale(1.04);
}
/* ------- sticky note ------*/
.sticky-note {
    position: absolute;
    top: 180px;
    right: 120px;

    width: 300px;
    min-height: 330px;

    background: #fff7b8;

    padding: 35px 25px 25px;

    box-sizing: border-box;

    transform: rotate(2deg);

    border-radius: 4px;

    box-shadow:
        5px 7px 15px rgba(0,0,0,0.15);

    transition: .3s;
}


.sticky-note:hover {
    transform: rotate(0deg) translateY(-5px);
}


/* little tape on top */
.tape {
    position: absolute;

    top: -14px;
    left: 85px;

    width: 130px;
    height: 35px;

    background: rgba(255,180,200,0.7);

    transform: rotate(-4deg);
}


.sticky-note h3 {
    font-family: "Starborn";
    color: #ff4ea3;

    font-size: 28px;

    margin-top: 15px;
}


.sticky-note p {
    font-family: "Babydoll";

    font-size: 15px;

    color: #222;

    line-height: 1.4;
}


.sticky-note textarea {

    width: 100%;
    height: 90px;

    background: rgba(255,255,255,.7);

    border: 2px dashed #3559a8;

    border-radius: 8px;

    padding: 10px;

    resize: none;

    font-family: "Babydoll";

    font-size: 16px;

    box-sizing: border-box;
}


.sticky-note button {

    width: 100%;

    margin-top: 12px;

    padding: 10px;

    border: none;

    border-radius: 10px;

    background: #ff4ea3;

    color:white;

    font-family:"Starborn";

    font-size:18px;

    transition:.2s;
}


.sticky-note button:hover {
    transform: scale(1.05);
}
/* -------- foottteeerrr ------- */
footer {
    margin-top: 40px;
    padding: 15px;
    text-align: center;

    font-family: "Courier New", monospace;
    font-size: 13px;
    color: #666;

    background: rgba(255, 255, 255, 0.6);
    border-top: 2px dashed #222B70;

    backdrop-filter: blur(3px);
  
}

/* -------- About page -------- */

.about-title{
    text-align:center;
    margin-top:-20px;
    margin-bottom:5px;
}

.about-page .about-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:28px;
    margin:8px 0;
}

.about-page .about-nav a{
    text-decoration:none;
    color:#20478c;
    font-size:22px;
    font-weight:bold;
    transition:.25s;
}

.about-page .about-nav a:hover{
    color:#ff4b9c;
    transform:translateY(-2px);
}

.about-page .diary,
.about-page .open-book{
    display:block;
    width:850px;
    max-width:100%;
    margin:0 auto;
}

.click-text{
    text-align:center;
    margin-top:8px;
    font-size:18px;
    color:#20478c;
}

#openedBook{
    text-align:center;
}.

.about-page .diary{
    width:550px;
    max-width:100%;
}
  
.diary{
    display:block;
    margin:0 auto;
}

.about-page .open-book{
    display:block;
    width:650px;
    max-width:100%;
    margin:0 auto;
  
}
.click-text{
text-align:center;
}

/* ---------- BLOG MESSAGES ---------- */

.message{
    background:#ffffff;

    border:2px solid #20478c;
    border-radius:18px;
    padding:20px;
    width:640px;
    max-width:100%;
    margin-bottom:-20px;
    box-shadow:4px 4px 12px rgba(0,0,0,.08);
    transition:.25s;
}

.message:hover{
    transform:translateY(-7px);
}

.message h3{
    font-family:"Starborn";
    color:#ff4b9c;
    font-size:22px;

    margin:0 0 10px;
}

.message p{
    color:#333;
    font-size:17px;
    line-height:1.7;
}
.blog-intro{
    text-align:left;
    color:#555;
    font-size:18px;
    margin-top:-50px;
    margin-bottom:5px;
}