*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    border: none;

}

:root{
    --intro-size:256px;
    --card-width:256px;
    --card-height:192px;
    --primary-color:#ffffff;
}

body{
    background-color: #50426E;
    color: var(--primary-color);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    overflow-x:hidden;
}

.background {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100lvw;
    height: 100lvw;
    z-index: -1;
}

/* Section header styling */
section .section-header{
    color: var(--primary-color);
    text-align: center;
    font-size: 36px;
    border-top: var(--primary-color) 2px solid;
    border-bottom: var(--primary-color) 2px solid;
    padding-left: 16px;
    padding-right: 16px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Intro styling */
.intro{
    position: relative;
    margin-top: 128px;
    left: calc(50% - 192px);
    top: calc(50% - 192px);
    text-align: left;

}
.intro .name h2{
    display: inline-block;
    position: relative;
    font-size: large;
    left: 112px;
    line-height: calc(var(--intro-size) / 4);
    width: calc(var(--intro-size) * 2);
}

.intro .bio p{
    display: inline-block;
    position: relative;
    font-size: medium;
    left: 128px;
    max-width: calc((var(--intro-size) * 2) - 128px);
    padding: 8px;
}

.intro .portrait{
    position: relative;
    z-index: 1;
    width: var(--intro-size);
    height: var(--intro-size);
    background-image: url("../resources/jamie.jpeg");
    border-radius: calc(var(--intro-size) / 2);
}

.intro .name{
    position: relative;
    left: calc(var(--intro-size) / 2);
    top: calc(var(--intro-size) - (var(--intro-size) * 2));
    width: calc(var(--intro-size) * 2);
    height: calc(var(--intro-size) / 4);
    background-color: rgba(0, 0, 0, 0.656);
    border-top-right-radius: calc(var(--intro-size) / 2);
}

.intro .bio{
    position: relative;
    left: calc(var(--intro-size) / 2);
    top: calc(var(--intro-size) - (var(--intro-size) * 2));
    width: calc(var(--intro-size) * 2);
    height: calc(var(--intro-size) / 2);
    background-color: rgba(0, 0, 0, 0.55);
}

/* Navbar styling */

.navbar{
    position: sticky;
    width: 100lvw;
    display: flex;
    flex-direction: row;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.427);
}

.navbar .link{
    background-color: rgb(0, 0, 0);
    border: var(--primary-color) 2px solid;
    margin-right: 16px;
    text-decoration: none;
    padding: 16px;
    color: var(--primary-color);
    border-radius: 32px;
    font-size: larger;
}

.navbar :first-child {
    margin-left: auto;
}

/* Section / deck styling */
section:first-of-type {
    margin-top: -112px;
}

.deck {
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 32px;
    padding-bottom: 32px;
    justify-content: center;
}
section h2 {
    text-align: center;
}

/* Card styling */

.card {
    width: var(--card-width);
    height: var(--card-height);
    margin-right: 16px;
    border-radius: 32px;
    text-decoration: none;
    border: var(--primary-color) 4px solid;
}

.card h3{
    position: relative;
    top: calc(var(--card-height) - 42px);
    background-color: rgba(0, 0, 0, 0.3);
    width: var(--card-width - 8px);
    padding-top: 5px;
    padding-bottom: 6px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    color: var(--primary-color);
}

.card p{
    display: none;
}

.card:hover{
    h3{
        background: none;
        color: aliceblue;
        top: calc(var(--card-height) - 8px);
    }
    p{
        justify-content: center;
        position: relative;
        top: -34px;
        border-radius: 28px;
        display: inline-block;
        width: calc(var(--card-width) - 8px);
        height: calc(var(--card-height) - 8px);
        background-color: rgba(0, 0, 0, 0.346);
        color: var(--primary-color);
    }
}

/* Music styling */
#music {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#music h2 {
    margin-bottom: 16px;
}

#music h3 {
    margin-top: 16px;
    font-size: x-large;
}

#music .video {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

#music .player{
    border-radius: 8px;
    width: calc(1920px / 2);
    height: calc(1080px / 2);
    margin-left: auto;
    margin-right: auto;
    filter: brightness(1);
    .play-button{
        filter: brightness(0);
    }
}

#music .player:hover{
    filter: brightness(1.2);

    .play-button{
        filter: brightness(0.8);
    }
}

#music .player:active{
    filter: brightness(0.8);

    .play-button{
        filter: brightness(0.2);
    }
}

#music .playlist{
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    background-color: rgba(0, 0, 0, 0.519);
    width: calc((1920px / 4) + 256px);
    height: fit-content;
    display: flex;
    flex-direction: column;

}

.playlist .item {
    display: flex;
    flex-direction: row;
    margin-top: 16px;
    margin-bottom: 16px;
}
.playlist .info{
    margin-left: 8px;
    display: flex;
    flex-direction: column;
}

.playlist .thumbnail {
    width: calc(1920px / 8);
    height: calc(1080px / 8);
}