* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 30px;
    background: #e6edf6;
    font-family: "VT323", "Do Hyeon", "DotGothic16", monospace;
    font-size: 18px;
    color: #3f5873;
}

b {color:#968794;}
i {color:#a9becb;}

a {
    color: #555;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


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

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

::-webkit-scrollbar-thumb {
    background: #c7d8ec;
    border: 2px solid #e6edf6;
}

::-webkit-scrollbar-thumb:hover {
    background: #d9c4c7;
}

.container {
    max-width: 780px;
    margin: auto;
    background: #f4f8fd;
    border: 1px solid #b8cbe0;
}

.topbar {
    background: #d4e1f0;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #b8cbe0;
}

.site-name {
    font-size: 24px;
    letter-spacing: 1px;
}

.links a {
    color: #4a6a8a;
    text-decoration: none;
}

.links a:hover {
    text-decoration: underline;
}


.main-nav {
    background: #eef4fb;
    border-bottom: 1px solid #b8cbe0;
    padding: 6px 15px;
    display: flex;
    gap: 16px;
    font-size: 19px;
}

.main-nav a {
    color: #4a6a8a;
    text-decoration: none;
}

.main-nav a:hover {
    text-decoration: underline;
}

.main {
    display: flex;
    gap: 20px;
    padding: 20px;
}

.sidebar {
    width: 220px;
}

.profile-pic {
    height: 180px;
    background: #c7d8ec url("galaxy_y.jpg")
        center / cover;
    border: 1px solid #b8cbe0;
    margin-bottom: 15px;
}

.box {
    background: #eef4fb;
    border: 1px solid #b8cbe0;
    padding: 10px;
    margin-bottom: 15px;
}

.side-title {
    background: #fff;
    padding: 2px 0 2px 10px;
    margin-bottom: 5px;
    font-size: 20px;
    border-left: 5px solid #d9c4c7;
}

.content {
    flex: 1;
}

.content-title {
    background: #d4e1f0;
    padding: 2px 0 2px 10px;
    margin-bottom: 5px;
    font-size: 20px;
    border-left: 5px solid #d9c4c7;
}

.footer {
    background: #eef4fb;
    border-top: 1px solid #b8cbe0;
    padding: 8px;
    text-align: center;
    font-size: 16px;
    color: #5f7fa3;
}


@media (max-width: 768px) {
    .main {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }


    .main-nav {
        flex-direction: column;
        gap: 8px; 
        align-items: center;    

    }


    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    
    .links {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
}

.yt-embed-16-9 {
  width: 100%;
  aspect-ratio: 16 / 9; /* Use 4 / 3 for older video formats */
  height: auto;
}

.yt-embed-4-3 {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
}

a {
    display: block;
}

table {
    width: 100%;
    table-layout: fixed;
}

.vertical-top {
    vertical-align: top;
}

.pic-responsive {
  width: 100%;
  height: auto;
}

td img {
    width: 100%;
    height: auto;
    display: block;
}

.center-text {
    text-align: center;
}

.table-content-wrap {
    display: block;
    width: 100%;
}

@media screen and (max-width: 480px) {
    .table-content-wrap {
        word-break: break-all;
    }
}



/* Music Player CSS */

#musicplayer{
    width:100%; /* width of the player - make it 100% if you want it to fill your container */
    padding:10px;
    text-align:center; 
    display:flex;
    flex-direction:column;
    gap:10px;
}

.songtitle, .track-info, .now-playing{
    padding:5px;
}

.controls{
    display:flex; 
    flex-direction:column; 
    gap:10px;
}

.buttons{
    display:flex;
    justify-content:center;
    font-size:17px !important; /* size of controls */
    width:100%;
}

.buttons div{
    width:33.3%;
}

.playpause-track, .prev-track, .next-track{
    color:#3f5873; /* color of buttons */
    font-size:35px !important; /* size of buttons */
}

.volume-icon{
    font-size:22px !important; /* size of volume icon */
}

.seeking, .volume{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:5px;
}

.now-playing{
    font-weight:bold;
}

input[type=range]{
    -webkit-appearance:none; /* removes default appearance of the tracks */
    width:100%;
}

input[type=range]:focus{
    outline:none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:#3f5873; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0px; /* change to 5px if you want a circle seeker */
    background:#3f5873; /* color of seeker square */
    -webkit-appearance:none;
    margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
}

input[type=range]::-moz-range-track{
    width:100%;
    height:4px; /* thickness of seeking track */
    background:#3f5873; /* color of seeking track */
}

input[type=range]::-moz-range-thumb{
    height:10px; /* height of seeking square */
    width:10px; /* width of seeking square */
    border-radius:0px; /* change to 5px if you want a circle seeker */
    background:#3f5873; /* color of seeker square */
    border:none; /* removes weird border around seeker square in firefox */
}