*{
box-sizing: border-box;
}
@font-face {
    font-family: 'Sabrina';
    src: url('fonts/SABRINAS.TTF') format('truetype');
}

@font-face {
    font-family: "estrellitas";
    src: url(fonts/FontdinerdotcomSparkly.ttf) format('truetype');
}

@font-face {
    font-family: "jheri";
    src: url(fonts/Jheri\ Curls.ttf);
}

body{

    background-image: url("https://i.pinimg.com/736x/6a/6c/ba/6a6cbad3f0013a5b52d3412ec59dced3.jpg");

    background-attachment: fixed;

    margin: 0;

    padding: 40px;

    font-family: 'Times New Roman', Times, serif;

    cursor:
    url(https://cdn.cursors-4u.net/cursors/animated/cat-paw-curl-f8836eeb-32.ani),
    url(https://cdn.cursors-4u.net/cursors/animated/cat-paw-curl-f8836eeb-32.png),
    auto !important;
}

.website{

    width: 1200px;

    margin: auto;

    background-image: url("https://i.pinimg.com/736x/53/e8/58/53e858c8fce0cb4f0d8f95e08f0b1b3d.jpg");

    border: 6px solid #e7a6b7;

    border-radius: 25px;

    padding: 20px;

    box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
}

header{

    background-image: url("https://i.pinimg.com/1200x/76/e9/9f/76e99fad415753d6052991fa1551cae2.jpg");

    background-size: cover;

    background-position: center;

    position: relative;

    min-height: 320px;

    height: auto;

    border-radius: 20px;

    margin-bottom: 20px;

    padding: 20px;

    border: 4px solid white;

    overflow: hidden;

    box-shadow:
    0 0 20px #ffd6e7,
    inset 0 0 20px rgba(255,255,255,0.5);
}

header::before{

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

    background: rgba(255,255,255,0.15);

    left: 0;

    top: 0;

    backdrop-filter: blur(1px);
}

.layout{

    display: grid;

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

    gap: 20px;
}

.left-sidebar,
.right-sidebar{

    background-color: white;

    min-height: 600px;

    border-radius: 20px;

    padding: 20px;

    border: 4px solid #e7a6b7;
}

main{

    background-color: white;

    min-height: 600px;

    border-radius: 20px;

    padding: 20px;

    border: 4px solid #e7a6b7;
}

footer{

    margin-top: 20px;

    background-color: white;

    border-radius: 20px;

    padding: 20px;

    border: 4px solid #e7a6b7;

    text-align: center;
}

.card{

    background: rgba(255,240,245,0.8);

    backdrop-filter: blur(5px);

    border: 3px solid #E7A6B7;

    border-radius: 20px;

    padding: 15px;

    margin-bottom: 20px;

    transition: 0.3s;

    box-shadow:
    0 0 10px #ffd6e7,
    0 0 20px #fff;
}


.card:hover{

    transform: scale(1.02);

    box-shadow:
    0 0 15px #ffb6d9,
    0 0 30px white,
    0 0 40px pink;
}


p{

    color: #CF7486;

    font-family: "Pixelify Sans", sans-serif;
}

.marquee-container{

width: 100%;

overflow: hidden;

white-space: nowrap;

position: relative;

margin-top: 30px;
}

.title-marquee{

display: inline-block;

padding-left: 100%;

animation:
slideText 12s linear infinite,
glow 3s infinite alternate;

font-family: "jheri";

font-size: 70px;

color: #cf7486;

text-shadow:
3px 3px white,
6px 6px #f7c6d7;}
@keyframes slideText{

0%{
transform: translateX(0);
}

100%{
transform: translateX(-100%);
}
}

.subtitle{

    text-align: center;

    color: white;

    font-family: "estrellitas";

    font-size: 50px;

    margin-top: 10px;

    text-shadow: 2px 2px #cf7486;
}

.nav{

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 20px;

    position: relative;

    z-index: 5;
}

.nav a{

    background: #fff0f5;

    padding: 10px 25px;

    border-radius: 15px;

    border: 3px solid #e7a6b7;

    text-decoration: none;

    color: #cf7486;

    font-family: "jheri";

    transition: 0.3s;

    box-shadow: 0 0 10px rgba(255,182,193,0.5);
}

.nav a:hover{

    transform: translateY(-5px) scale(1.05);

    background: white;

    box-shadow:
    0 0 10px pink,
    0 0 20px white;
}

.sparkle-overlay{

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    opacity: 0.3;

    pointer-events: none;
}


.header-gif{

    position: relative;

    align-items: center;

    top: 10px;

    right: 10px;

    border-radius: 100px;

    animation: float 3s ease-in-out infinite;

    z-index: 5;

    margin-left: 18px;

    margin-bottom: 0px;
}

@keyframes float{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-10px);
    }

    100%{
        transform: translateY(0px);
    }
}

.Left-gif,
.Left-gif2{

    width: 100%;

    border-radius: 15px;
}

.card1{

    background-image: url("https://i.pinimg.com/736x/64/a2/d2/64a2d28d38a03405b4d626d1eb8aa130.jpg");

    background-size: cover;

    border-radius: 20px;

    padding: 20px;

    text-align: center;

    border: 3px dashed #e7a6b7;

    box-shadow: 0px 0px 10px rgba(255,182,193,0.8);
}

.pfp{

    height: 120px;

    border-radius: 100px;

    border: 4px solid white;

    box-shadow: 0px 0px 10px pink;
}

.status{

    color: #CF7486;

    background: rgba(255,255,255,0.5);

    padding: 10px;

    border-radius: 10px;

    text-align: center;
}

iframe{

    border: 3px solid #E7A6B7;

    border-radius: 20px;

    background-color: white;
}

.strawberry1{

    position: fixed;

    width: 80px;

    left: 10px;

    top: 20px;

    z-index: 999;
}

.strawberry2{

    position: fixed;

    width: 80px;

    right: 10px;

    bottom: 20px;

    z-index: 999;
}

.bow1{

    position: fixed;

    width: 90px;

    top: 200px;

    right: 30px;

    z-index: 999;
}

.spin{

    animation: spin 8s linear infinite;

    width: 120px;

    display: block;

    margin-top: 20px;

    margin-left: 28px;

    border-radius: 20px;

}

@keyframes spin{

from{
transform: rotate(0deg);
}

to{
transform: rotate(360deg);
}

}

.glitter{

    background: linear-gradient(
    pink,
    white,
    pink
    );

    background-size: 400%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: glitter 4s linear infinite;
}

.glitter{

color: #ff6fa5;

font-family: "jheri";

font-size: 45px;

text-align: center;

text-shadow:
2px 2px white,
0 0 10px #ffb6d9,
0 0 20px pink,
0 0 30px white;

animation: sparkleText 3s infinite alternate;

margin-bottom: 15px;
}

@keyframes sparkleText{

from{

transform: scale(1);

text-shadow:
2px 2px white,
0 0 10px #ffb6d9,
0 0 20px pink;

}

to{

transform: scale(1.03);

text-shadow:
2px 2px white,
0 0 20px #ff69b4,
0 0 35px white;

}
}
.window{

border: 3px solid #e7a6b7;

background: white;

border-radius: 10px;

overflow: hidden;
}

.window-top{

background: pink;

padding: 5px;

color: white;
}
@media(max-width: 900px){

.layout{

    grid-template-columns: 1fr;
}

.website{

    width: 95%;
}


.subtitle{

    font-size: 25px;
}

}
h2{

font-family: "jheri";

font-size: 38px;

color: #cf7486;

text-align: center;

background: rgba(255,255,255,0.5);

border-radius: 15px;

padding: 8px;

border: 2px dashed #e7a6b7;

box-shadow: 0 0 10px rgba(255,255,255,0.7);

margin-bottom: 15px;

letter-spacing: 1px;
}
html{

scroll-behavior: smooth;
}
.window-content{

padding: 15px;
}
.hearts{

position: fixed;

left: 20px;

bottom: 20px;

width: 100px;

pointer-events: none;

opacity: 0.8;
}
html{

scroll-behavior: smooth;
}

.window{

border: 3px solid #e7a6b7;

background: white;

border-radius: 15px;

overflow: hidden;

margin-top: 20px;

box-shadow:
0 0 10px pink,
0 0 20px white;
}

.window-top{

background: linear-gradient(
to right,
#ffb6d9,
#ffd9ec
);

padding: 8px;

color: white;

font-family: "jheri";

font-size: 20px;
}

.window-content{

padding: 15px;
}

.hearts{

position: fixed;

left: 20px;

bottom: 20px;

width: 100px;

pointer-events: none;

opacity: 0.8;

z-index: 999;
}

iframe{
width: 100%;
max-width: 100%;
display: block;
margin-bottom: 20px;
}

.anime-gif{
    border-radius: 100px;
    border: 5px solid #CF7486;
    margin-bottom: 20px;
}
img:hover{

transform: scale(1.05) rotate(2deg);

filter: brightness(1.1);

}
.nav{

display: flex;

justify-content: center;

gap: 20px;

margin-top: 30px;

flex-wrap: wrap;

position: relative;

z-index: 5;
}

@keyframes glow{

from{
text-shadow:
0 0 10px white,
0 0 20px pink;
}

to{
text-shadow:
0 0 20px white,
0 0 40px hotpink;
}
}

.obsessed{

width: 180px;

border-radius: 20px;

display: block;

margin: 10px auto;

border: 4px solid #e7a6b7;

box-shadow:
0 0 10px pink,
0 0 20px white;

transition: 0.3s;
}
.obsessed:hover{

transform: scale(1.05) rotate(-2deg);

filter: brightness(1.1);
}
#loader{

position: fixed;

top: 0;
left: 0;

width: 100%;
height: 100%;

background: #ffd9ec;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

z-index: 99999;

transition: 1s;
}

#loader p{

font-size: 25px;

font-family: "jheri";

color: #cf7486;
}

.diary-header{

text-align: center;

padding: 30px;
}

.diary-title{

font-family: "jheri";

font-size: 70px;

color: #cf7486;

text-shadow:
3px 3px white,
0 0 20px pink;

margin-bottom: 10px;
}

.diary-main{

padding: 20px;
}

.diary-post{

background: rgba(255,240,245,0.8);

border: 4px dashed #e7a6b7;

border-radius: 25px;

padding: 20px;

margin-bottom: 40px;

box-shadow:
0 0 15px pink,
0 0 30px white;

transition: 0.3s;
}

.diary-post:hover{

transform: scale(1.01);

box-shadow:
0 0 20px hotpink,
0 0 40px white;
}

.diary-post h2{

margin-top: 0;
}

.diary-post img{

width: 100%;

border-radius: 20px;

margin-top: 15px;

border: 3px solid white;

box-shadow:
0 0 10px pink;
}
.music-title{

font-family: "jheri";

font-size: 70px;

text-align: center;

color: #cf7486;

text-shadow:
3px 3px white,
0 0 20px pink;

margin-top: 20px;
}

.music-header{

text-align: center;

padding: 20px;
}
.music-player{

display: flex;

justify-content: center;

margin-top: 20px;
}

iframe{

max-width: 100%;
}

.moodboard-grid{

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 12px;

margin-top: 15px;

grid-template-columns: repeat(3, 1fr);

}

.moodboard-grid{

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 12px;

}

.moodboard-grid img{

width: 100%;

border-radius: 15px;

border: 3px solid #e7a6b7;

box-shadow:
0 0 10px pink,
0 0 20px white;

transition: 0.3s;

display: block;

.moodboard-grid{

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 12px;

}

.moodboard-grid img{

width: 100%;

border-radius: 15px;

border: 3px solid #e7a6b7;

box-shadow:
0 0 10px pink,
0 0 20px white;

transition: 0.3s;

display: block;
}
}
.internet-box{

text-align: center;

padding: 10px;
}

.internet-pfp{

width: 180px;

border-radius: 20px;

border: 4px solid #e7a6b7;

box-shadow:
0 0 10px pink,
0 0 20px white;

margin-bottom: 15px;

transition: 0.3s;
}

.internet-pfp:hover{

transform: scale(1.05) rotate(2deg);
}

h3{

font-family: "jheri";

color: #cf7486;

font-size: 28px;

margin-top: 20px;

text-shadow:
0 0 10px white,
0 0 15px pink;
}

.music-page{

background-image: url("https://i.pinimg.com/736x/53/85/e4/5385e4098b793b01b269bd71d5e31ea2.jpg");

background-repeat: repeat;

background-attachment: fixed;

background-size: 300px;
}

.music-header {
    background-image: url(https://i.pinimg.com/736x/a0/29/7d/a0297d1337370bc3a916493995f0d3be.jpg);

    background-size: auto;
}

.diary-header{background-image: url(https://i.pinimg.com/736x/36/33/c6/3633c6ce4bc96b067847ec4a8c349547.jpg);

    background-size: auto;}

.diary-page{
    
background-image: url("https://i.pinimg.com/736x/d7/5a/2d/d75a2d8306ab6be95305b8fb851b203d.jpg");

background-repeat: repeat;

background-attachment: fixed;

background-size: 300px;
}