//* =======================================
CHARLIE'S CORNER
STYLE.CSS
======================================= */

html{
scroll-behavior:smooth;
}

body{
margin:0;
padding:0;

font-family:"Trebuchet MS",sans-serif;

background-color:#ffe8f5;

background-image:
radial-gradient(#ffffff 2px, transparent 2px),
radial-gradient(#ffd4ec 2px, transparent 2px);

background-size:40px 40px;
background-position:0 0,20px 20px;

color:#ff5ca8;
}

/* MAIN CONTENT */

#container{
width:900px;
margin:auto;
padding:20px;

margin-left:180px;
margin-right:180px;
}

/* SIDEBARS */

.sidebar{
position:fixed;
left:10px;
top:20px;

width:140px;

z-index:1000;
}

.rightbar{
position:fixed;
right:10px;
top:20px;

width:140px;

z-index:1000;
}

.sidebar img,
.rightbar img{
width:120px;
display:block;
margin-bottom:10px;
}

.mini-box{
background:white;
border:3px dotted hotpink;

border-radius:10px;

padding:10px;
margin-bottom:10px;

font-size:12px;
line-height:1.5;
}

/* WINDOWS */

.window{
background:white;

border:4px solid #ffb8da;

border-radius:20px;

box-shadow:0 0 15px #ffd6eb;

padding:15px;

margin-bottom:20px;
}

.titlebar{
background:#ffd7ec;

border-radius:12px;

padding:10px;

text-align:center;

font-weight:bold;

margin-bottom:15px;
}

/* BANNER */

.banner{
text-align:center;
}

.banner h1{
font-size:3em;

margin:10px;

color:white;

text-shadow:
0 0 5px hotpink,
0 0 10px hotpink,
0 0 15px deeppink;
}

/* LINKS */

a{
color:#ff5ca8;
text-decoration:none;
font-weight:bold;
}

a:hover

/* NAVIGATION */

.nav{
display:flex;

justify-content:center;

gap:10px;

flex-wrap:wrap;
}

.nav a{
background:#ffe5f3;

padding:8px 15px;

border-radius:999px;

transition:0.3s;
}

.nav a:hover

/* TWO COLUMN SECTION */

.grid{
display:grid;

grid-template-columns:1fr 1fr;

gap:20px;
}

/* PLAYLISTS */

.playlist-grid{
display:grid;

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

gap:15px;
}

.playlist-card{
background:#fff5fb;

border:3px dashed #ffb8da;

border-radius:15px;

padding:15px;

transition:0.3s;
}

.playlist-card:hover{
transform:scale(1.02);
}

/* IMAGE GALLERY */

.gallery{
display:grid;

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

gap:10px;
}

.gallery img{
width:100%;

border-radius:10px;

border:3px solid #ffd0e8;
}

/* BLINKIES */

.blinkies{
display:flex;

flex-wrap:wrap;

justify-content:center;

gap:5px;
}

.blinkies img{
height:20px;
}

/* STAMPS */

.stamps{
display:flex;

flex-wrap:wrap;

justify-content:center;

gap:5px;
}

.stamps img{
height:56px;
}

/* MARQUEE */

marquee{
color:#ff69b4;

font-weight:bold;

font-size:18px;
}

/* FOOTER */

.footer{
text-align:center;
}

/* BLINK ANIMATION */

.blink{
animation:blink 1s infinite;
}

@keyframes blink{

50%{
opacity:0.3;
}

}

/* DIVIDERS */

.divider{
text-align:center;

font-size:20px;

margin:10px 0;
}

/* BUTTON COLLECTION */

.button-88x31{
display:flex;

flex-wrap:wrap;

justify-content:center;

gap:5px;
}

.button-88x31 img{
width:88px;
height:31px;
}

/* MOBILE */

@media(max-width:1300px){

.sidebar,
.rightbar{
display:none;
}

#container{
width:95%;
margin:auto;
}

}

@media(max-width:700px){

.grid{
grid-template-columns:1fr;
}

.playlist-grid{
grid-template-columns:1fr;
}

.gallery{
grid-template-columns:1fr 1fr;
}

}