@font-face {
    font-family: 'Sunspire-Regular';
    src: url('../fonts/sunspire.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html, body {
    font-family: 'Iceland', sans-serif;
    background-color: #0d0d0d;
    color: #ffffff;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    align-items: center;
    gap: 1.5rem;
}

/* Custom Scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: #d4145a #1f1f1f00;
}

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

::-webkit-scrollbar-track {
    background: #1f1f1f;
}

::-webkit-scrollbar-thumb {
    background-color: #d4145a;
    border-radius: 6px;
    border: 3px solid #1f1f1f;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a214d4;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Geo', sans-serif;
}

a, button {
    font-family: 'Sunspire-Regular', sans-serif;
    text-decoration: none;
    color: inherit;
}

/* Main layout */
.desktop {
    width: 100%;
    margin: 0 auto;
    position: relative;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(212, 20, 90, 0.2) 40%, rgba(212, 20, 90, 0.2) 73%, rgba(0, 0, 0, 0.2) 100% );
    background-color: #0d0d0d;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    scroll-snap-type: y proximity;
}

main > header,
.player-section,
.my-activities-section,
.portfolio-section,
main > footer,
.faq-item.expanded .faq-question {
    scroll-snap-align: start;
    scroll-margin-top: 2rem; /* Add some margin to the snap point */
}

.about-body {
    scroll-snap-align: start;
    scroll-margin-top: 3rem; /* Default for larger screens */
}

main {
    position: relative;
    z-index: 1;
}

/* Glow Effects */
.glows {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.glow-pink { background-color: #ff00c633; border-radius: 210px; filter: blur(145.8px); height: 420px; width: 420px; position: absolute; top: 314px; left: calc(100% - 420px); }
.glow-pink-2 { background-color: #ff00c633; border-radius: 210px; filter: blur(145.8px); height: 420px; width: 420px; position: absolute; top: 1435px; left: 55px; }
.glow-red { background-color: #ff000033; border-radius: 210px; filter: blur(145.8px); height: 420px; width: 420px; position: absolute; top: 310px; left: -260px; }
.glow-red-2 { background-color: #ff000033; border-radius: 478.5px/210px; filter: blur(145.8px); height: 420px; width: 957px; position: absolute; top: 946px; left: 228px; }
.glow-pink-3 { background-color: #ff7a0033; border-radius: 210px; filter: blur(145.8px); height: 420px; width: 420px; position: absolute; top: 1395px; left: calc(100% - 420px); }


/* Header */
.header {
    height: 322px;
    position: relative;
    width: 100%;
}

.header .navbar {
    height: 157px;
    position: absolute;
    top: 120px;
    width: 100%;
}

.header .border {
    background-color: #d4145a;
    height: 17px;
    position: absolute;
    top: 77px;
    transform: rotate(-8deg);
    width: 100%;
    left: 0;
}

.header .nav-button-group {
    display: flex;
    justify-content: right;
    gap: 13px;
    padding: 0 19px;
    position: absolute;
    top: 102px;
    left: -30px;
    transform: rotate(-8deg);
    width: 100%;
}

.header .button-upper-group, .header .button-lower-group {
    display: flex;
    gap: 13px;
}

.header .nav-button {
    width: clamp(100px, 44vw, 256px);
    height: clamp(50px, 10vw, 61px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .nav-button .rectangle {
    height: calc(100% - 2px);
    width: 100%;
    position: absolute;
    top: 2px;
}
.header .nav-button .text-wrapper {
    color: #ffffff;
    font-family: "Sunspire-Regular", Helvetica;
    font-size: clamp(23px, 7vw, 40px);
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
}

.header .nav-archive .rectangle { background-color: #d4145a; }
.header .nav-albums .rectangle { background-color: #a214d4; }
.header .nav-media .rectangle { background-color: #143ed4; }
.header .nav-contact .rectangle { background-color: #148ed4; }


.header .netcavy-title-group {
    position: absolute;
    top: 40px;
    width: 100%;
    text-align: right;
    transform: rotate(-8deg);
}

.header .text-wrapper-2 {
    color: #ffffff;
    font-family: "Sunspire-Regular", Helvetica;
    font-size: 65px;
    text-shadow: 0px 0px 25.5px #ffffff99;
    white-space: nowrap;
    height: 17px;
    position: absolute;
    width: 100%;
    top: -35px;
    left: -25px;
}

.header .netcavy-logo-icon {
    height: 202px;
    top: clamp(0px, 6.5vw, 900px);
    position: absolute;
}

/* About Section */
.about-section {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

.about-section .about-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 0;
    background-image: linear-gradient(to bottom right, rgba(212, 20, 90, 0.2), rgba(162, 20, 212, 0.2));
    background-size: 100% 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.about-section .about-content {
    display: flex;
    align-items: center;
    gap: 30px;
}


.about-section .about-title {
    text-align: center;
    position: relative;
    top: -31px;
}

.about-section .about-title h1 {
    font-size: 40px;
    color: #fff;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 20px;
    margin-bottom: 0;
}

.about-section .shinkonet-avatar {
    height: 208px;
    width: 208px;
}

.about-section .about-body {
    max-width: 865px;
}

.about-section .about-body p {
    font-size: 31px;
    color: #fff;
    line-height: 1.2;
}

.about-section .about-body-truncated {
    display: none;
}

.netcavy-logo-color {
    display: none;
}


/* Player Section */
.player-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px;
}

.player-section h2 {
    font-size: 40px;
}

.player-section .player-container {
    background-color: #d4145a;
    padding: 8px;
    border-radius: 20px;
    width: 100%;
    max-width: 841px;
    box-sizing: border-box;
}

.player-section .player-inner {
    background-color: #1f1f1f;
    padding: 10px;
    border-radius: 15px;
    width: 100%;
    box-sizing: border-box;
}

.player-section .player-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.player-section .player-controls .img-2 {
    width: 38px;
    height: 29px;
    cursor: pointer;
}

.player-section .player-info {
    text-align: center;
}

.player-section .player-info .text-wrapper-4 {
    font-family: "Sunspire-Regular", Helvetica;
    font-size: 24px;
}
.player-section .player-info .text-wrapper-5 {
    font-family: 'Iceland', sans-serif;
    font-size: 24px;
}

.youtube-responsive-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.youtube-responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* My Activities Section */
.my-activities-section {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.my-activities-section h2 {
    font-size: 40px;
}

.my-activities-section .activities-container {
    background-color: rgba(212, 20, 90, 0.6);
    width: 100%;
}

.my-activities-section .activities-body p {
    font-size: 31px;
    line-height: 1;
    text-align: center;
}

.my-activities-section .activities-body strong {
    font-size: 21px;
}

/* FAQ Section */
.faq-section {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.faq-section h2 {
    font-size: clamp(28px, 4vw, 40px);
}

.faq-section .faq-container {
    background-color: rgba(212, 20, 90, 0.6);
    border-radius: 42px;
    width: 100%;
    max-width: 1065px;
}

.faq-section .faq-item {
    padding: 20px;
}

.faq-section .faq-question {
    font-family: 'Geo', sans-serif;
    font-size: clamp(28px, 4vw, 36px);
    border-bottom: 2px solid #fff;
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.faq-arrow {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease-in-out;
}

.faq-item.expanded .faq-arrow {
    transform: rotate(180deg);
}

.faq-section .faq-answer {
    font-family: 'Iceland', sans-serif;
    font-size: 25px;
    text-align: left;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-in-out;
}

.faq-answer > .faq-answer-content {
    overflow: hidden;
}

.faq-item.expanded .faq-answer {
    grid-template-rows: 1fr;
}

.faq-item .faq-question {
    cursor: pointer;
}

.faq-section .faq-answer a {
    font-family: 'Iceland', sans-serif;
    color: aqua;
}

.faq-section .faq-answer .yellow-text { color: #f4ffb6; }
.faq-section .faq-answer .yellow-text-2 { color: #eef0af; }

.faq-section .faq-answer ul {
    padding-left: 20px;
    margin-top: 10px;
}

/* Portfolio Section */
.portfolio-section {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.portfolio-section h2 {
    font-size: 40px;
}
.portfolio-section .portfolio-intro {
    background-image: linear-gradient(to bottom right, rgba(212, 20, 90, 0.2), rgba(162, 20, 212, 0.2));
    width: 100%;
    padding: 20px;
    text-align: center;
    font-size: 31px;
}

.portfolio-section .portfolio-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    max-width: 1045px;
}

.portfolio-section .portfolio-button {
    height: 60px;
    width: 200px;
    color: #ffffff;
    font-family: "Sunspire-Regular", Helvetica;
    font-size: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
}

.portfolio-section .portfolio-button:hover {
    transform: scale(1.05);
}

.portfolio-section .portfolio-button:active {
    transform: scale(0.95);
}

.portfolio-section .portfolio-button.composers { background-color: #d4145a; }
.portfolio-section .portfolio-button.arranger { background-color: #a214d4; }
.portfolio-section .portfolio-button.vfx-2d { background-color: #6814d4; }
.portfolio-section .portfolio-button.animator-2d { background-color: #143ed4; }
.portfolio-section .portfolio-button.tech-artist { background-color: #148ed4; }
.portfolio-section .portfolio-button.rigging { background-color: #14d4a5; }
.portfolio-section .portfolio-button.char-design { background-color: #5cd414; }
.portfolio-section .portfolio-button.game-dev { background-color: #d49e14; }

/* Footer */
.footer {
    height: 225px;
    background-color: rgba(26, 26, 26, 0.64);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.footer .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.footer .socials {
    display: flex;
    gap: 11px;
}

.footer .socials svg {
    height: 62px;
}
.footer .socials .reddit svg {
    width: 54px;
    height: 54px;
}
.footer .socials .discord svg {
    width: 40px;
    height: 40px;
}

.footer .element-netcavy {
    color: #b8b8b8;
    font-family: "Iceberg", Helvetica;
    font-size: 13.4px;
}

.footer p {
    color: #f1f3f5;
    font-family: "Iceland", sans-serif;
    text-align: center;
}

/* Blazor Error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    color: #000; /* Added for better readability */
}

#blazor-error-ui.show {
    display: block;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.footer-logo-img svg {
    width: 315px;
    height: auto;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMWUiIGhlaWdodD0iMWUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjFlIiBoZWlnaHQ9IjFlIiBmaWxsPSIjNzA0REQ4Ii8+PC9zdmc+) repeat;
}

.link-aqua {
    font-family: 'Iceland', sans-serif;
    color: aqua;
}


/* Discography Page Styles */
.discography-page {
    padding: 20px;
}

.discography-page .section-title {
    text-align: center;
    margin: 30px 20px 20px;
    scroll-snap-align: start;
    scroll-margin-top: 2rem;
}

.discography-page .section-title h1 {
    font-family: 'Geo', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    color: #fff;
    text-shadow: 0 0 10px #d4145a, 0 0 20px #d4145a;
}

.album-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.album-card {
    background-color: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    flex: 0 1 310px; /* Don't grow, allow shrinking, with a 310px basis */
    border: 2px solid #d4145a;
    box-sizing: border-box;
}

.album-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(212, 20, 90, 0.4);
}

.album-media {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    background-color: #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
}

.album-embed, .album-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.album-embed {
    z-index: 2;
}

.album-image {
    z-index: 1;
}

.album-embed iframe, .album-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.album-image img {
    object-fit: cover;
}

.album-content {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    flex-grow: 1;
}

.purchase-button {
    display: block;
    background-color: #d4145a;
    color: #fff;
    padding: 10px 15px;
    text-align: center;
    font-family: 'Sunspire-Regular', sans-serif;
    font-size: 1rem;
    transition: background-color 0.2s ease-in-out;
    margin-top: auto;
    flex-shrink: 0;
}

.purchase-button:hover {
    background-color: #a214d4;
    color: #fff;
}

/* New Discography Styles */

.discography-page .section-title.text-left {
    text-align: left;
}

.discography-page .section-title.text-right {
    text-align: right;
}

.album-grid.featured-grid {
    flex-wrap: wrap;
}

.album-grid.grid-left {
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 20px;
}

.album-grid.grid-right {
    flex-direction: row-reverse;
    justify-content: flex-start;
    margin-right: 20px;
}

.album-card .album-content {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.album-grid.grid-right .album-card .album-content {
    align-items: flex-end;
    text-align: right;
}

.album-grid.grid-left .album-card .album-content {
    align-items: flex-start;
    text-align: left;
}

.album-title {
    font-family: 'Geo', sans-serif;
    font-size: 1.5rem;
    color: #f0f0f0;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
    padding: 0;
    height: 2.4em; /* 1.2em line-height * 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.album-details p {
    font-family: 'Iceland', sans-serif;
    font-size: 1.1rem;
    color: #ccc;
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

.my-track {
    font-style: normal;
    color: #ffafc9;
    margin: 0 0 0.5rem 0;
    padding: 0;
    font-family: 'Iceland', sans-serif;
    font-size: 1.1rem;
}

/* Archive Page Styles */
.archive-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 10px 10px 10px;
    font-size: 20px;
    min-height: 305px;
}

.archive-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 3.2rem;
}

.archive-link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease-in-out;
}

.archive-link:hover {
    transform: scale(1.05);
}

.archive-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: #1a1a1a;
    color: #ffffff;
    border: 2px solid #d4145a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.archive-item span {
    font-size: 1.5rem;
}

.archive-icon {
    width: 300px;
    height: 300px;
}

.archive-display {
    width: 100%;
    max-width: 1065px;
    align-items: center;
}

.archive-display .search-box {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    border: 2px solid #d4145a;
    background-color: #1f1f1f;
    color: #fff;
    box-sizing: border-box;
}

.archive-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 3.5rem;
}

.archive-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
}

.archive-table .filesize {
    background-color: rgba(255, 87, 87, 0.25);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8em;
}

.archive-table .track-cell {
    text-align: left;
    white-space: nowrap;
}

.archive-table .date-cell {
    color: #888;
    text-align: right;
    white-space: nowrap;
}

.archive-table .filesize-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

.archive-table .play-cell {
    text-align: center;
    width: 1%;
    white-space: nowrap;
}

.archive-table .download-cell {
    text-align: center;
    width: 1%;
    white-space: nowrap;
}

.archive-table .download-cell a {
    padding: 0.4rem;
    background-color: #d4145a;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.archive-table .play-button {
    padding: 0.4rem;
    background-color: #a214d4; /* A different color to distinguish */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.archive-table .play-button svg {
    stroke: white;
    fill: white;
}

.midi-player {
    border: 2px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    background-color: #000000;
    max-width: 300px;
    font-family: 'Iceland', sans-serif;
}

.midi-player-component {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(31, 31, 31, 0.9);
    border: 2px solid #d4145a;
    border-radius: 10px;
    padding: 15px;
    z-index: 1001;
    font-family: 'Iceland', sans-serif;
    color: #fff;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 0 15px rgba(212, 20, 90, 0.5);
    backdrop-filter: blur(5px);
    animation: slideInFromBottom 0.5s ease-out;
    transition: bottom 0.3s ease-in-out;
}

.midi-player-component.player-at-bottom {
    bottom: 240px;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.control-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.control-button .svg-container {
    display: inline-block;
    width: 24px;
    height: 24px;
}

.status-display {
    margin-top: 10px;
    font-family: monospace;
    text-align: left;
    min-height: 1.2em;
}

.status-display .timestamp {
    font-size: 1.1em;
}

.status-display .status-text {
    font-size: 1.1em;
}

.svg-container svg {
    width: 100%;
    height: 100%;
}

.volume-control-container {
    display: flex;
    align-items: center;
    flex: 1;
}

.volume-slider {
    width: 0;
    opacity: 0;
    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out;
    cursor: pointer;
    margin-left: 5px;
}

.volume-control-container:hover .volume-slider {
    width: 100px; /* Or whatever width you prefer */
    opacity: 1;
}

.timestamp-container {
    flex: 1;
    text-align: right;
}

.track-title-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding-top: 10px;
}

.track-title {
    display: inline-block;
    padding-left: 100%; /* Start off-screen */
    animation: marquee 15s linear infinite;
}

.track-title:hover {
    animation-play-state: paused;
}

.track-title span {
    display: inline-block;
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes slideInFromBottom {
    from {
        transform: translate(-50%, 100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}


.media-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 10px 10px 10px;
    font-size: 20px;
    width: 100%;
    max-width: 1065px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Tab container styles */
.tab-container {
    width: 100%;
    margin-top: 2rem;
}

.tab-row {
    display: flex;
    border-bottom: 2px solid #d4145a;
}

.tab-button {
    padding: 1rem 2rem;
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: #fff;
    font-size: 1.2rem;
    transition: background-color 0.3s;
}

.tab-button.active {
    background-color: #d4145a;
    font-weight: bold;
}

.tab-button:hover {
    background-color: #a214d4;
}

.tab-content {
    padding: 2rem;
}

.game-iframe-container {
    margin-top: 2rem;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
}

.game-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Music player styles */
.music-player {
    margin-bottom: 2rem;
}

.music-playlist {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.music-playlist-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #2a2a2a;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.music-playlist-item:hover, .music-playlist-item.active {
    background-color: #d4145a;
}

.music-playlist-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.contact-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 10px 10px 10px;
    font-size: 20px;
    width: 100%;
    max-width: 1065px;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 1150px) {
    .header .nav-button-group {
        flex-direction: column-reverse;
        align-items: flex-end;
    }

    .header {
        height: clamp(270px, 78vw, 360px);
    }

    .header .navbar {
        top: clamp(25px, calc(21.52vw - 40px), 85px);
    }

    .about-section .about-container {
        background-size: 100% 100%;
    }

    .about-section .about-content {
        flex-direction: column;
        gap: 0px;
    }

    .about-section .about-title {
        top: 0px;
    }

    .about-section .shinkonet-avatar {
        display: none;
    }

    .about-section .about-body-full {
        display: none;
    }

    .about-section .about-body-truncated {
        display: block;
        text-align: center;
        padding-right: 5px;
        padding-left: 5px;
    }

    .header .netcavy-title-group, .header .netcavy-logo-icon {
        display: none;
    }

    .netcavy-logo-color {
        display: block;
        position: absolute;
        top: 25px;
        left: clamp(0px, calc(9.26vw - 46.63px), 20px);
        width: 100%;
        text-align: left;
        transform: rotate(-8deg);
    }

    .netcavy-logo-color svg {
        width: clamp(300px, 95vw, 550px);
        height: auto;
    }

    .about-body {
        margin-top: 0;
        scroll-margin-top: 11rem;
    }

    .album-grid.grid-left {
        margin-left: 0px;
    }
    
    .album-grid.grid-right {
        margin-right: 0px;
    }
    .discography-page .section-title {
        text-align: center;
        margin: 30px 0px 20px;
    }
}

@media (max-width: 675px) {
    .album-grid.grid-left,
    .album-grid.grid-right {
        justify-content: center;
    }

    .archive-table .date-cell {
        display: none;
    }
}

@media (max-width: 375px) {
    .archive-table .filesize-cell {
        display: none;
    }
}