@font-face {
    font-family: 'msgothic';
    src: url('MSGOTHIC.TTF');
}

body {
    font-family: 'msgothic', sans-serif;
    color: #f8f8f2;
    background-color: #282a36;
    margin: 0;
    padding: 0;
}

/* Containers */
div {
    border: 1px solid #f8f8f2;
    border-radius: 12px;
    margin: 12px;
    padding: 16px;
    transition: border-color 0.3s ease;
}

div:hover {
    border-color: #ff5555;
}

/* Top Navigation */
.topnav {
    background-color: #282a36;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #44475a;
}

.topnav a {
    color: #f8f8f2;
    padding: 14px 20px;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.topnav a:hover {
    background-color: #f8f8f2;
    color: #282a36;
}

.topnav a.active {
    color: #ff5555;
}

/* Links */
a {
    color: #f8f8f2;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    text-decoration: none;
}

/* Accent colors */
a#spotify:hover { color: #50fa7b; }
a#apple:hover   { color: #ff79c6; }
a#other:hover   { color: #f1fa8c; }
a#tiktok:hover  { color: #8be9fd; }

span {
    color: #44475a;
}