*
{
    margin: 0;
    padding: 0;

    box-sizing: border-box;

    border: none;
    font-style: normal;
    text-decoration: none;

    background-color: transparent;

    color: brown;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}

html, body 
{
    height: 100%;
    width: 100%;
}

body 
{
    display: flex;
    flex-direction: column;
    background-color: #ffe2bb;
}

/*Navigation menu*/
header 
{
    position: fixed;
    
    width: 100%;
    top: 0;
    
    background-color: #ffd6a0; 
}

#nav-toggle 
{
    width: 100%; 
    height: 75px;
    text-align: center;
}

#nav-list 
{
    display: flex;
    flex-direction: column;

    height: 0;
    overflow: hidden; 

    transition: height 0.15s ease;
}

#nav-list.open { height: calc(100vh - 75px); }

#nav-toggle, #nav-list li a
{
    font-size: 32px;
    font-family: "Oswald", sans-serif;
    line-height: 75px;

    transition: all 75ms ease;
}

#nav-list li 
{
    flex: 1;
    display: flex;

    justify-content: center; 
    align-items: center;
}

#nav-toggle:hover, #nav-list li a:hover
{
    color: darkred;
    text-decoration: underline;
} 

#nav-toggle:active, #nav-list li a:active { font-size: 30px; }

/*Footer*/
footer 
{
    margin-top: auto;
    padding: 20px;
    width: 100%;
    background-color: rgb(255, 214, 160);
    text-align: center;
}

footer ul  
{
    display: flex;
    justify-content: center;
    gap: 40px;
    list-style-type: none;
}

footer ul li a i 
{
    font-size: 40px;
    color: brown;
    transition: color 0.2 ease;
}

footer ul li a i:hover { color: darkred; }

/*Main*/
main 
{
    display: flex;

    flex-direction: column;
    align-items: center;
    gap: 25px;

    flex: 1;
    margin: 105px 25px 30px 25px;
}

/*Title, Subtitle + Text*/
.title, .subtitle, .text { text-align: center; }

.title 
{
    /* font-family: "Dela Gothic One", sans-serif; */
    font-family: "Rubik Dirt", system-ui;
    font-size: 40px;
}

.subtitle 
{
    font-family: "Lobster", sans-serif;
    font-size: 36px;
}

.text
{
    font-family: "Prata", cursive;
    font-size: 24px;
    line-height: 36px;
} 

/*Bio*/
.title.bio 
{
    font-size: 32px;
    margin-bottom: 15px; 
}

.subtitle.bio { font-size: 28px; }

.bio-sect { margin-bottom: 25px; }

/*Gallery*/
.gallery 
{
    display: grid;
    
    gap: 25px;
    margin-top: 20px;
}

.gallery-img 
{
    width: 100%;
    height: 450px;
    
    object-fit: cover;
    object-position: top; 
    
    border-radius: 10px;
    cursor: pointer;
}

.lightbox 
{
    display: none;
    position: fixed;
    
    top: 0; 
    left: 0;
    
    width: 100%; 
    height: 100%;
    
    background-color: rgba(0,0,0,0.9);
    
    justify-content: center;
    align-items: center;
    
    z-index: 1000;
}

.lightbox img 
{
    max-width: 80%;
    max-height: 75%;
}

#close, .lightbox button 
{
    position: absolute;
    font-size: 3em;
    color: white;
    cursor: pointer;
}

.lightbox button 
{
    top: 92.5%;

    cursor: pointer;
    transform: translateY(-50%);
    
    transition: all 0.2s ease;
}

#close 
{
    top: 20px;
    right: 30px;
}

#prev { left: 17.5%; }
#next { right: 17.5%; }

.lightbox button:hover, #close:hover { color: darkgray; }
.lightbox button:active, #close:active { scale: 95%; }

/*Discography*/
#discography { display: grid; }

.album-card 
{
    display: flex;
    flex-direction: column;
    padding: 25px 30px;
    border-radius: 15px;
    background-color: #ffd6a0;
}

.album-card img 
{
    width: 100%;
    border: 10px ridge darkred;
}

.album-body 
{
    margin-top: 15px;

    display: flex;
    flex-direction: column;
    
    gap: 15px;
    
    align-items: center;
    justify-content: space-between;
}

.album-link 
{
    margin: 0 auto;
    padding: 7.5px 20px;

    background-color: darkred;
    border-radius: 10px;

    color: white;
    font-size: 24px;
    font-family: "Oswald", sans-serif;

    transition: all 0.1s ease;
}

.album-link:hover { background-color: brown; }
.album-link:active { scale: 0.95; }

/*Contacts*/
.contact-container { align-self: flex-start; }

.contact-container * { text-align: center; }

.contact-container h3
{
    width: 100%;
    font-size: 32px;
    font-family: "Oswald", sans-serif;
    margin-bottom: 12.5px;
}

.contact-container ul 
{
    display: flex;
    flex-direction: column;

    list-style-position: inside;

    gap: 10px;
}

.contact-container ul li 
{
    font-family: "Prata", cursive;
    font-size: 22px;
}

.copy-btn
{   
    font-family: "Prata", cursive;
    
    font-size: 24px;
    line-height: 36px;

    font-style: italic;
    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;
}

.copy-btn:hover { text-decoration: underline; }
.copy-btn:active { color: darkred; }

.contact-buttons 
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/*Media request*/
@media only screen and (min-width: 768px) 
{
    #nav-toggle { display: none; }
    #nav-list 
    {
        height: 75px;
        font-size: 28px;
        flex-direction: row;
        gap: 25px;
    }

    .title { font-size: 48px; }

    .bio { text-align: left; }

    #prev { left: 10%; }
    #next { right: 10%; }

    .lightbox button { top: 50%; }
    .gallery { grid-template-columns: repeat(2, 1fr); }

    .list-container.contact span { display: inline; }
    .list-container.contact ul 
    {
        display: flex; 
        gap: 15px;
    }

    #discography 
    {
        grid-template-columns: 1fr 1fr;
    }

    .album-card { height: 100%; }

    .contact-container * { text-align: start; }
}

@media only screen and (min-width: 1024px) 
{
    .gallery { grid-template-columns: repeat(3, 1fr); }

    #nav-list li 
    {
        flex: none;
        width: 200px;
    }

    #discography { grid-template-columns: none; }
    
    .album-card 
    { 
        flex-direction: row;
        gap: 30px;
        align-items: center; 
    }
    
    .album-card img 
    {
        min-width: 300px;
        max-width: 450px; 
    }

    .album-body { margin-top: 0; }

    main#contacts 
    {
        margin-right: 100px;
        margin-left: 100px;
    }
}