/* ==========================================================
   Retrocomic v1.1
   Windows 98 Inspired Theme
========================================================== */

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

html{
    overflow-y:scroll;
}

body{

    font-family:Verdana, Geneva, sans-serif;

    color:#000;

    background:linear-gradient(
        #62C0FF 0%,
        #87D9FF 45%,
        #BFEFFF 100%
    );

    min-height:100vh;
}

/* ==========================
   Sky Background
========================== */

.background{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-20;

}

/* ==========================
   Browser Window
========================== */

.browser{

    width:960px;

    margin:35px auto;

    background:#C0C0C0;

    border-top:2px solid #FFFFFF;
    border-left:2px solid #FFFFFF;

    border-right:2px solid #404040;
    border-bottom:2px solid #404040;

    box-shadow:8px 8px 20px rgba(0,0,0,.35);

}

/* ==========================
   Title Bar
========================== */

.titlebar{

    height:30px;

    background:linear-gradient(#0B57C2,#2576E8);

    color:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8px;

    font-weight:bold;

    user-select:none;

}

.title-left{

    display:flex;

    align-items:center;

    gap:8px;

}

.window-icon{

    width:16px;
    height:16px;

    background:white;

    border:1px solid navy;

}

/* ==========================
   Window Buttons
========================== */

.title-buttons{

    display:flex;

    gap:4px;

}

.title-buttons button{

    width:22px;
    height:20px;

    background:#C0C0C0;

    border-top:2px solid white;
    border-left:2px solid white;

    border-right:2px solid #404040;
    border-bottom:2px solid #404040;

    cursor:pointer;

    font-size:12px;

}

.title-buttons button:hover{

    background:#DADADA;

}

.title-buttons button:active{

    border-top:2px solid #404040;
    border-left:2px solid #404040;

    border-right:2px solid white;
    border-bottom:2px solid white;

}

/* ==========================
   Toolbar
========================== */

.toolbar{

    display:flex;

    gap:6px;

    padding:8px;

    background:#D4D0C8;

    border-bottom:2px solid #9A9A9A;

}

.toolbar button{

    width:34px;
    height:28px;

    background:#C0C0C0;

    border-top:2px solid white;
    border-left:2px solid white;

    border-right:2px solid #404040;
    border-bottom:2px solid #404040;

    cursor:pointer;

}

.toolbar button:hover{

    background:#E5E5E5;

}

.toolbar input{

    flex:1;

    border:2px inset gray;

    padding:4px 8px;

    background:white;

}

/* ==========================
   Content
========================== */

.content{

    padding:18px;

}

/* ==========================
   Windows
========================== */

.window{

    margin-bottom:18px;

    background:#C0C0C0;

    border-top:2px solid white;
    border-left:2px solid white;

    border-right:2px solid #404040;
    border-bottom:2px solid #404040;

}

.window-header{

    background:linear-gradient(#0B57C2,#2E82FF);

    color:white;

    padding:6px 10px;

    font-weight:bold;

}

.logo-area{

    padding:20px;

    text-align:center;

}

.logo-area img{

    max-width:100%;

    image-rendering:pixelated;

}

/* ==========================
   Welcome
========================== */

.welcome{

    display:flex;

    gap:20px;

    padding:20px;

}

.avatar{

    width:180px;

    height:180px;

    object-fit:cover;

    border:2px inset gray;

    background:white;

}

.description{

    flex:1;

}

.description h2{

    margin-bottom:12px;

}

.description p{

    line-height:1.6;

    margin-bottom:18px;

}

/* ==========================
   Navigation
========================== */

.nav{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.nav a{

    color:#0000CC;

    text-decoration:none;

    font-size:18px;

    font-weight:bold;

}

.nav a:hover{

    color:red;

    text-decoration:underline;

}

/* ==========================
   Site Info
========================== */

.stats{

    padding:18px;

}

.stats p{

    margin-bottom:8px;

}

/* ==========================
   Status Bar
========================== */

.statusbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:6px 10px;

    background:#C0C0C0;

    border-top:2px solid white;

    font-size:13px;

}

#clock{

    font-weight:bold;

}

/* ==========================
   Floating Clouds
========================== */

.cloud{

    position:fixed;

    background:white;

    border-radius:100px;

    opacity:.8;

    z-index:-10;

}

.cloud::before{

    content:"";

    position:absolute;

    width:45px;

    height:45px;

    background:white;

    border-radius:50%;

    top:-18px;

    left:18px;

}

.cloud::after{

    content:"";

    position:absolute;

    width:60px;

    height:60px;

    background:white;

    border-radius:50%;

    top:-30px;

    right:18px;

}

@keyframes drift{

    from{

        transform:translateX(-250px);

    }

    to{

        transform:translateX(calc(100vw + 300px));

    }

}

/* ==========================
   Responsive
========================== */

@media(max-width:980px){

.browser{

    width:95%;

}

.welcome{

    flex-direction:column;

    align-items:center;

}

.avatar{

    width:220px;
    height:220px;

}

}

/* ======================================
Comic Reader
====================================== */

.comicPage{

padding:25px;

text-align:center;

}

.comicPage img{

max-width:100%;

margin:25px auto;

display:block;

image-rendering:pixelated;

border:2px solid gray;

}

.comicPage p{

font-size:18px;

line-height:1.8;

margin-top:20px;

}

.comicNav{

display:flex;

justify-content:space-around;

padding:20px;

flex-wrap:wrap;

}

.comicNav a{

font-size:22px;

font-weight:bold;

text-decoration:none;

color:#0000CC;

}

.comicNav a:hover{

color:red;

text-decoration:underline;

}



/* ==========================================
   Character Database
========================================== */

.character-intro{

    padding:20px;

    text-align:center;

}

.character-intro h2{

    margin-bottom:10px;

    font-size:24px;

}

.character-intro p{

    line-height:1.6;

}


/* ==========================================
   Character List
========================================== */

.character-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/* ==========================================
   Character Card
========================================== */

.character-card{

    display:flex;

    gap:25px;

    padding:25px;

}

.character-portrait{

    width:250px;

    min-width:250px;

    height:300px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:white;

    border-top:2px solid #404040;

    border-left:2px solid #404040;

    border-right:2px solid white;

    border-bottom:2px solid white;

}

.character-portrait img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

    image-rendering:auto;

}

.character-info{

    flex:1;

}

.character-info h2{

    font-size:28px;

    margin-bottom:15px;

    color:#000080;

}

.character-stats{

    background:#E8E8E8;

    padding:12px;

    margin-bottom:18px;

    border:2px inset #999;

}

.character-stats p{

    margin-bottom:7px;

}

.character-stats p:last-child{

    margin-bottom:0;

}

.character-info h3{

    margin-bottom:8px;

}

.character-description{

    line-height:1.7;

}


/* ==========================================
   Locked Characters
========================================== */

.locked-character{

    display:flex;

    gap:25px;

    padding:25px;

    align-items:center;

}

.locked-portrait{

    width:250px;

    min-width:250px;

    height:300px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#111;

    color:#00FF00;

    font-family:"Courier New",monospace;

    font-size:70px;

    font-weight:bold;

    border:4px inset #777;

}

.locked-character h2{

    color:#555;

    margin-bottom:15px;

}

.locked-character p{

    margin-bottom:10px;

}


/* ==========================================
   Character Back Button
========================================== */

.character-back{

    padding:18px;

    text-align:center;

}

.character-back a{

    color:#0000CC;

    font-size:18px;

    font-weight:bold;

    text-decoration:none;

}

.character-back a:hover{

    color:red;

    text-decoration:underline;

}


/* ==========================================
   Loading / Error
========================================== */

.loading{

    text-align:center;

    padding:30px;

}

.character-error{

    padding:25px;

    text-align:center;

}

.character-error h2{

    color:#CC0000;

    margin-bottom:10px;

}


/* ==========================================
   Character Mobile Layout
========================================== */

@media(max-width:700px){

    .character-card{

        flex-direction:column;

        align-items:center;

    }

    .character-info{

        width:100%;

    }

    .locked-character{

        flex-direction:column;

        text-align:center;

    }

}

/* ==========================================
   BUILT-IN MUSIC PLAYER
========================================== */

.music-player{
    padding:20px;
    background:#d4d0c8;
}


/* ==========================================
   MUSIC DISPLAY
========================================== */

.music-display{
    background:#000;
    border:3px inset #777;
    padding:15px;
    text-align:center;
    margin-bottom:15px;
    font-family:"Courier New",monospace;
}

.music-status{
    color:#00ff00;
    font-size:12px;
    letter-spacing:2px;
    margin-bottom:8px;
}

.music-title{
    color:#00ff00;
    font-size:22px;
    font-weight:bold;
}

.music-artist{
    color:#00aa00;
    font-size:14px;
    margin-top:5px;
}


/* ==========================================
   MUSIC CONTROLS
========================================== */

.music-controls{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:15px;
}

.music-controls button{
    min-width:55px;
    height:32px;
    font-family:"MS Sans Serif",Arial,sans-serif;
    font-weight:bold;
    cursor:pointer;
    background:#d4d0c8;
    border-top:2px solid white;
    border-left:2px solid white;
    border-right:2px solid #404040;
    border-bottom:2px solid #404040;
}

.music-controls button:active{
    border-top:2px solid #404040;
    border-left:2px solid #404040;
    border-right:2px solid white;
    border-bottom:2px solid white;
}


/* ==========================================
   PROGRESS BAR
========================================== */

.music-progress{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
}

.music-progress span{
    font-family:"Courier New",monospace;
    font-size:13px;
    min-width:35px;
}

.music-progress input{
    flex:1;
}


/* ==========================================
   VOLUME
========================================== */

.volume-control{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
    font-size:14px;
}

.volume-control input{
    flex:1;
}


/* ==========================================
   PLAYLIST
========================================== */

.music-playlist{
    border:2px inset #999;
    background:#fff;
}

.playlist-title{
    background:#000080;
    color:white;
    font-weight:bold;
    padding:6px 10px;
    font-size:14px;
}

#playlist{
    padding:5px;
}

.playlist-track{
    display:block;
    width:100%;
    text-align:left;
    border:none;
    background:white;
    padding:7px 10px;
    font-family:"Courier New",monospace;
    cursor:pointer;
}

.playlist-track:hover{
    background:#000080;
    color:white;
}

.playlist-track.active{
    background:#000080;
    color:white;
    font-weight:bold;
}


/* ==========================================
   MOBILE
========================================== */

@media(max-width:700px){

    .music-controls{
        flex-wrap:wrap;
    }

    .music-controls button{
        min-width:60px;
    }

}


/* ==========================================
   CUSTOM RETRO CURSOR
========================================== */

/*
   Put your cursor image here:

   cursors/cursor.png

   Recommended size:
   32x32 pixels
   or
   48x48 pixels
*/

html,
body{
    cursor:url("../cursors/cursor.png"), auto;
}


/* Keep the custom cursor when hovering over things */

a,
button,
input,
select,
textarea{
    cursor:url("../cursors/cursor.png"), pointer;
}