section.about > .title,
section.gallery > .title,
section.albums > .title,
section.projects > .title,
section.contact > .title,
section.youtube_feed > .title,
section.spotify_showcase > .title,
section.tiktok_feed > .title,
section.twitch_feed > .title,
section.etsy_shop > .title,
section.links > .title
{
    font-size: 25px;
    font-weight: bold;
}

    /* HERO */

section.hero > .title
{
    font-size: 60px;
    font-weight: bold;
}

section.hero > .background
{
    filter: brightness(0.6);
    mask-image: linear-gradient(black, transparent 90%);
}

    /* ALBUMS */ /* PROJECTS */

:is(.album_popup, .project_popup)
{
    transition: 0.3s;
}

:is(.album_popup, .project_popup) > .close_button
{
    border-radius: 6px;
    opacity: 0.6;
    transition: 0.3s;
}

:is(.album_popup, .project_popup) > .close_button:hover
{
    background-color: rgba(255, 255, 255, 0.2);
}

:is(.album_popup, .project_popup) > .close_button:active
{
    background-color: rgba(255, 255, 255, 0.4);
}

:is(.album_popup, .project_popup) > .panel
{
    border-radius: 25px 25px 0 0;
    background-color: var(--dark);
    color: var(--white);
    transition: 0.3s;
}

:is(.album_popup, .project_popup):not(.active) > .panel
{
    transform: translateY(100%);
    opacity: 0;
}

:is(.album_popup, .project_popup) > .panel > .name
{
    font-size: 25px;
    font-weight: bold;
}

.project_popup > .panel > .content > .description
{
    font-size: 15px;
}

    /* ALBUMS */

section.albums > .albums_container > .album
{
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--normal_font);
    color: var(--white);
    border-radius: 8px;
    transition: 0.3s;
}

section.albums > .albums_container > .album > .image
{
    border-radius: 8px 8px 0 0;
}

section.albums > .albums_container > .album > .image > img
{
    transition: 0.3s;
}

section.albums > .albums_container > .album > .name
{
    font-size: 19px;
}

section.albums > .albums_container > .album > .images_count
{
    font-size: 11px;
}

section.albums > .albums_container > .album > .curtain
{
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

section.albums > .albums_container > .album:hover > .image > img
{
    transform: scale(1.1);
    filter: brightness(0.6);
}

section.albums > .albums_container > .album:active > .curtain
{
    background-color: rgba(255, 255, 255, 0.2);
}

section.albums > .albums_container > .album:active > .image > img
{
    transform: scale(1.2);
    filter: brightness(0.8);
}

    /* PROJECTS */

section.projects > .projects_container > .project
{
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--normal_font);
    color: var(--white);
    border-radius: 8px;
    transition: 0.3s;
}

section.projects > .projects_container > .project > .image
{
    border-radius: 8px 8px 0 0;
}

section.projects > .projects_container > .project > .image > img
{
    transition: 0.3s;
}

section.projects > .projects_container > .project > .name
{
    font-size: 19px;
}

section.projects > .projects_container > .project > .description
{
    font-size: 11px;
}

section.projects > .projects_container > .project > .curtain
{
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.3s;
}

section.projects > .projects_container > .project:hover > .image > img
{
    transform: scale(1.1);
    filter: brightness(0.6);
}

section.projects > .projects_container > .project:active > .curtain
{
    background-color: rgba(255, 255, 255, 0.2);
}

section.projects > .projects_container > .project:active > .image > img
{
    transform: scale(1.2);
    filter: brightness(0.8);
}

    /* CONTACT */

section.contact > .contact_details > div > .label
{
    font-size: 16px;
}

section.contact > .contact_details > div > .value
{
    font-size: 14px;
}

    /* PROFILE */

section.profile > .background.empty
{
    background-color: rgba(255, 255, 255, 0.1);
}

section.profile > .profile_container > .avatar
{
    border-radius: 12.5%;
    border-color: var(--dark);
}

section.profile > .profile_container > .name
{
    font-size: 35px;
    font-weight: bold;
}

section.profile > .profile_container > .bio
{
    font-size: 15px;
}

    /* YOUTUBE FEED */

section.youtube_feed  > .user_details > .avatar
{
    border-radius: 10px;
}

section.youtube_feed > .user_details > .username
{
    font-size: 20px;
    font-weight: bold;
}

section.youtube_feed > .user_details > .subscribers
{
    font-size: 14px;
}

section.youtube_feed > .user_details > .link
{
    border-radius: 6px;
    transition: 0.3s
}

section.youtube_feed > .videos_container > .video
{
    border-radius: 10px;
}

section.youtube_feed > .videos_container > .video::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    opacity: 0;
    transition: 0.3s;
}

section.youtube_feed > .videos_container > .video:hover::after
{
    opacity: 0.75;
}

section.youtube_feed > .videos_container > .video:active::after
{
    opacity: 0.1;
}

section.youtube_feed > .videos_container > .video > .thumbnail
{
    border-radius: 10px;
}

section.youtube_feed > .videos_container > .video > .title
{
    font-size: 14px;
    font-weight: bold;
    color: var(--white);
}

section.youtube_feed > .videos_container > .video > .meta
{
    font-size: 10px;
    color: var(--white);
}

    /* SPOTIFY SHOWCASE */

/* PLAYLIST */

section.spotify_showcase > .playlist_container > .playlist_header
{
    border-radius: 10px 10px 0 0;
    background-color: rgba(255, 255, 255, 0.1);
}

section.spotify_showcase > .playlist_container > .playlist_header > .playlist_cover
{
    border-radius: 8px;
}

section.spotify_showcase > .playlist_container > .playlist_header > .playlist_info > .playlist_name
{
    font-size: 50px;
    font-weight: bold;
    color: var(--white);
}

@media (max-width: 600px)
{
    section.spotify_showcase > .playlist_container > .playlist_header > .playlist_info > .playlist_name
    {
        font-size: 30px;
    }
}

section.spotify_showcase > .playlist_container > .playlist_header > .playlist_info > .playlist_details
{
    font-size: 15px;
    color: var(--white);
}

section.spotify_showcase > .playlist_container > .playlist_tracks > .track
{
    border-radius: 4px;
    color: var(--white);
    transition: 0.3s;
}

section.spotify_showcase > .playlist_container > .playlist_tracks > .track:hover
{
    background-color: rgba(255, 255, 255, 0.1);
}

section.spotify_showcase > .playlist_container > .playlist_tracks > .track:active
{
    background-color: rgba(255, 255, 255, 0.2);
}

section.spotify_showcase > .playlist_container > .playlist_tracks > .track > .track_number
{
    font-size: 16px;
}

section.spotify_showcase > .playlist_container > .playlist_tracks > .track > .track_cover
{
    border-radius: 4px;
}

section.spotify_showcase > .playlist_container > .playlist_tracks > .track > .track_title
{
    font-size: 14px;
}

section.spotify_showcase > .playlist_container > .playlist_tracks > .track > .track_subtitle
{
    font-size: 12px;
}

section.spotify_showcase > .playlist_container > .playlist_tracks > .track > .track_duration
{
    font-size: 13px;
}

/* ALBUM */

section.spotify_showcase > .album_container > .album_info > .album_cover
{
    border-radius: 10px;
}

section.spotify_showcase > .album_container > .album_info > .album_name
{
    font-size: 20px;
    color: var(--white);
}

section.spotify_showcase > .album_container > .album_info > .album_details
{
    font-size: 13px;
    color: var(--white);
}

section.spotify_showcase > .album_container > .album_tracks > .track
{
    border-radius: 4px;
    color: var(--white);
    transition: 0.3s;
}

section.spotify_showcase > .album_container > .album_tracks > .track:hover
{
    background-color: rgba(255, 255, 255, 0.1);
}

section.spotify_showcase > .album_container > .album_tracks > .track:active
{
    background-color: rgba(255, 255, 255, 0.2);
}

section.spotify_showcase > .album_container > .album_tracks > .track > .track_number
{
    font-size: 16px;
}

section.spotify_showcase > .album_container > .album_tracks > .track > .track_title
{
    font-size: 14px;
}

section.spotify_showcase > .album_container > .album_tracks > .track > .track_subtitle
{
    font-size: 12px;
}

section.spotify_showcase > .album_container > .album_tracks > .track > .track_duration
{
    font-size: 13px;
}

/* ARTIST */

section.spotify_showcase > .artist_container > .artist_details > .image
{
    border-radius: 10px;
}

section.spotify_showcase > .artist_container > .artist_details > .name
{
    font-size: 40px;
    font-weight: bold;
}

section.spotify_showcase > .artist_container > .artist_details > .link
{
    border-radius: 6px;
    transition: 0.3s;
}

section.spotify_showcase > .artist_container > .latest_releases > .releases_container > .release
{
    position: relative;
    border-radius: 8px;
    color: var(--white);
}

section.spotify_showcase > .artist_container > .latest_releases > .releases_container > .release::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    opacity: 0;
    transition: 0.3s;
}

section.spotify_showcase > .artist_container > .latest_releases > .releases_container > .release:hover::after
{
    opacity: 0.75;
}

section.spotify_showcase > .artist_container > .latest_releases > .releases_container > .release:active::after
{
    opacity: 0.1;
}

section.spotify_showcase > .artist_container > .latest_releases > .releases_container > .release > .cover
{
    border-radius: 6px;
}

section.spotify_showcase > .artist_container > .latest_releases > .releases_container > .release > .title
{
    font-size: 15px;
}

section.spotify_showcase > .artist_container > .latest_releases > .releases_container > .release > .subtitle
{
    font-size: 12px;
}

    /* TIKTOK FEED */

section.tiktok_feed > .account_container > .avatar
{
    border-radius: 12px;
}

section.tiktok_feed > .account_container > .account_details > .username
{
    font-size: 20px;
}

section.tiktok_feed > .account_container > .account_details > .stats_container > div > .value
{
    font-size: 15px;
    font-weight: bold;
}

section.tiktok_feed > .account_container > .account_details > .stats_container > div > .label
{
    font-size: 13px;
}

section.tiktok_feed > .account_container > .account_details > .link
{
    font-size: 15px;
    border-radius: 6px;
    transition: 0.3s;
}

section.tiktok_feed > .videos_container > .video
{
    border-radius: 10px;
    color: var(--white);
}

section.tiktok_feed > .videos_container > .video::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    opacity: 0;
    transition: 0.3s;
}

section.tiktok_feed > .videos_container > .video:hover::after
{
    opacity: 0.75;
}

section.tiktok_feed > .videos_container > .video:active::after
{
    opacity: 0.1;
}

section.tiktok_feed > .videos_container > .video > .thumbnail
{
    border-radius: 8px;
}

section.tiktok_feed > .videos_container > .video > .title
{
    font-size: 14px;
    font-weight: bold;
}

section.tiktok_feed > .videos_container > .video > .views
{
    font-size: 10px;
}

    /* TWITCH FEED */

section.twitch_feed  > .user_details > .avatar
{
    border-radius: 10px;
}

section.twitch_feed > .user_details > .username
{
    font-size: 20px;
    font-weight: bold;
}

section.twitch_feed > .user_details > .followers
{
    font-size: 14px;
}

section.twitch_feed > .user_details > .link
{
    border-radius: 6px;
    transition: 0.3s
}

section.twitch_feed > .recent_streams > .stream
{
    border-radius: 10px;
}

section.twitch_feed > .recent_streams > .stream::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    opacity: 0;
    transition: 0.3s;
}

section.twitch_feed > .recent_streams > .stream:hover::after
{
    opacity: 0.75;
}

section.twitch_feed > .recent_streams > .stream:active::after
{
    opacity: 0.1;
}

section.twitch_feed > .recent_streams > .stream > .thumbnail
{
    border-radius: 10px;
}

section.twitch_feed > .recent_streams > .stream > .title
{
    font-size: 14px;
    font-weight: bold;
    color: var(--white);
}

section.twitch_feed > .recent_streams > .stream > .meta
{
    font-size: 10px;
    color: var(--white);
}

    /* ETSY SHOP */

section.etsy_shop  > .shop_details > .icon
{
    border-radius: 10px;
}

section.etsy_shop > .shop_details > .name
{
    font-size: 20px;
    font-weight: bold;
}

section.etsy_shop > .shop_details > .stats
{
    font-size: 14px;
}

section.etsy_shop > .shop_details > .stats > .divider
{
    color: var(--white);
}

section.etsy_shop > .shop_details > .link
{
    border-radius: 6px;
    transition: 0.3s
}

section.etsy_shop > .products_container > .product
{
    border-radius: 10px;
}

section.etsy_shop > .products_container > .product::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    opacity: 0;
    transition: 0.3s;
}

section.etsy_shop > .products_container > .product:hover::after
{
    opacity: 0.75;
}

section.etsy_shop > .products_container > .product:active::after
{
    opacity: 0.1;
}

section.etsy_shop > .products_container > .product > .image
{
    border-radius: 10px;
}

section.etsy_shop > .products_container > .product > .title
{
    font-size: 14px;
    font-weight: bold;
    color: var(--white);
}

section.etsy_shop > .products_container > .product > .price
{
    font-size: 12px;
    color: var(--white);
}

    /* LINKS */

section.links > .links_container > .link
{
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--white);
    transition: 0.3s;
}

section.links > .links_container > .link > .icon
{
    transition: 0.3s;
}

section.links > .links_container > .link::after
{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url("https://staging.framee.me/assets/gfx/svg/diagonal_arrow_white.svg");
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: 0.3s;
}

section.links > .links_container > .link:hover::after
{
    opacity: 1;
}

section.links > .links_container > .link:hover > .icon
{
    transform: scale(0.85);
}

section.links > .links_container > .link:active::after
{
    background-color: rgba(0, 0, 0, 0.6);
}

    /* IMAGE POPUP */

.image_popup
{
    background-color: rgba(0, 0, 0, 0.85);
}

.image_popup > img
{
    border-radius: 10px;
}

.image_popup > .close_button
{
    border-radius: 6px;
    opacity: 0.6;
    transition: 0.3s;
}

.image_popup > .close_button:hover
{
    background-color: rgba(255, 255, 255, 0.2);
}

.image_popup > .close_button:active
{
    background-color: rgba(255, 255, 255, 0.4);
}

    /* IMAGES */

:is(.album_popup, .project_popup) > .panel img,
section.gallery img
{
    border-radius: 8px;
    transition: 0.25s;
}

:is(.album_popup, .project_popup) > .panel img:hover,
section.gallery img:hover
{
    filter: brightness(0.6);
    cursor: pointer;
}

:is(.album_popup, .project_popup) > .panel img:active,
section.gallery img:active
{
    filter: brightness(0.4);
}