html {
    color: white;
}

.gradient {
    background-color: #571E97;
    background: linear-gradient(135deg, #0075ac 0%, #571E97 100%);
}

.box-shadow {
    box-shadow: 0px 15px 15px 0px #00000050;
    z-index: 1;
    position: relative;
}

.text-font, section p, section a, section h5, footer {
    font-family: 'Panton Narrow';
    font-weight: 400 !important;
}

.title-font {
    font-family: 'Panton';
    font-weight: 800 !important;
}

.medium-title-font {
    font-family: 'Panton';
    font-weight: 600 !important;
}

.social-font, .social-font a {
    font-family: 'Againts';
    letter-spacing: 0.05rem;
}

.fa-youtubemusic:before {
    font-family: "icomoon";
    content: "\e900";
}

.custom-button {
    background-color: #571E97;
    color: white;
}

.custom-button:hover{
    background-color: #0075AC;
    color: white;
}

.white-links a, .release-hover a {
    color: white;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,transform .1s;
}


.white-links a:hover, .release-hover a:hover {
    color: #84D8FF;
    transform: scale(1.05);
}

#intro {
    position: relative;
}

#intro::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(135deg, #0075ac 0%, #571E97 100%);
    filter: url("../assets/grain.svg#grainy");
    content: '';
}

#intro-content {
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo {
    max-width: 70%;
    max-height: 40%;
}

.intro-shrink {
    width: 100%;
}

 @media (min-width: 992px) {
    #logo {
        max-width: 55%;
    }

    .intro-shrink {
        width: 50%;
        margin: 0 auto;
    }
} 

#transition {
    background-color: #2E2D2B;
    background: linear-gradient(180deg, #00000000 0%, #2E2D2B 100%);
    height: 15%;
    bottom: 0;
    z-index: -1;
}

#socials {
    background-color: #2E2D2B;
    color: white;
}

.modern-social-link {
    color: white;
    text-decoration: none;
    position: relative;
    padding-bottom: 4px;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* Create the modern underline effect */
.modern-social-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: #84D8FF;
    transition: width 0.3s ease;
    -webkit-transition: width 0.3s ease;
}

.modern-social-link:hover {
    color: #84D8FF;
}

/* Expand the underline on hover */
.modern-social-link:hover::after {
    width: 100%;
    left: 0;
    background: #84D8FF;
}

#main-release iframe {
    width: 100%;
}


@media (min-width: 992px) {
    #main-release-text {
        padding: 0 20%;
    }
}

.big-link {
    text-decoration: none;
    color: white;
}

.big-link:hover {
    opacity: 75%;
}

#releases {
    background-color: #2E2D2B;
}

.square-grid, .release-hover {
    display: grid;
    grid-auto-rows: 1fr;
}

.grid-big {
    grid-template-columns: repeat(3, 1fr);
}

.grid-small {
    grid-template-columns: repeat(4, 1fr);
}

.square-grid .square {
    aspect-ratio: 1/1;
    width: 100%;
}

.release-cover {
    margin-top: 12.5%;
}

.release-text {
    height: 12.5%;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
}

.square h5{
    font-size: 2vw;
    margin: 0 auto;
}

.square p {
    font-size: 2vw;
    margin: 0 auto;
}

.square-grid i {
    font-size: 4vw;
}

@media (max-width: 768px) {
    .grid-big {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-big h5 {
        font-size: 4vw;
    }

    .grid-big p {
        font-size: 3vw;
    }

    .grid-small {
        grid-template-columns: repeat(3, 1fr);
    }

    .square-grid i {
        font-size: 6vw;
    }
}

@media (max-width: 576px) {
    .grid-big {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-big h5{
        font-size: 6vw;
    }

    .grid-big p {
        font-size: 3vw;
    }

    .grid-small {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-small h5{
        font-size: 3vw;
    }

    .grid-small p {
        font-size: 2vw;
    }

    .grid-big i {
        font-size: 12vw;
    }
    .grid-small i {
        font-size: 8vw;
    }
}

.release-hover {
    transition: opacity .30s ease-in-out, background-color .30s ease-in-out, backdrop-filter .30s cubic-bezier(.27,.78,.39,.93);
    background-color: #1d272c80;

    position: absolute;
    width: 75%;
    height: 75%;
    top: 12.5%;
    left: 12.5%;
}

.release-hover {
    opacity: 0;
    backdrop-filter: blur(8px) opacity(0);
}

.release-hover:hover {
    opacity: 1;
    backdrop-filter: blur(8px) opacity(1);
}

.release-hover > div {
    position: relative;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.cover-0 {
    background-color: #436436;
}
.cover-1 {
    background-color: #AA4465;
}
.cover-2 {
    background-color: #CB7A01;
}
.cover-3 {
    background-color: #001427;
}
.cover-4 {
    background-color: #4E95BC;
}

#artists > div {
    overflow: hidden;
}

.artist {
    color: white;
}

.artist img {
    border-radius: 50%;
    max-height: 256px;
}

.artist a {
    text-decoration: none;
    color: white;
}

div .swiper-slide {
    width: auto;
}

div .swiper-scrollbar {
    height: 6px !important;
    background-color: rgb(255, 255, 255, 0.0);
}

div .swiper-scrollbar-drag {
    background-color: rgb(255, 255, 255, 0.75);
}

#infos a {
    color: #571E97;

    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#infos a:hover {
    color: #0075AC;
}

#infos object {
    filter: brightness(0);
}

#infos br {
    margin-bottom: 20px;
}

#col-1, #col-2 {
    background-attachment: fixed;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: center;
    z-index: -1;
}

#col-1 {
    background-image: url('../assets/col1.jpg');
    background-position-x: left;
}

#col-2 {
    background-image: url('../assets/col2.jpg');
    background-position-x: right;
}

#icons-2 {
    margin: 0 12.5%;
}

footer {
    height: 50px;
    line-height: 50px;
}

footer a {
    color: white;
}

.vh-75 {
    height: 75vh !important;
}

.main-release-cover {
    transition: transform .1s;
}

.main-release-cover:hover {

    transform: scale(1.03);
}

a:has(.main-release-cover):hover {
    opacity: 100% !important;
}


.artist {
    transition: transform .1s;
}

.artist:hover {

    transform: scale(0.95);
}

.icon-intro {
    flex: 0 0 0%;
}