body, html {
    font-family: 'Copperplate', 'Georgia', serif;
    color: white; 
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

a {
    color: white;
}

h1 {
    white-space: nowrap;
    margin-bottom: 0px;
    margin-top: 0px;
}
h2 {
    white-space: nowrap;
    margin-bottom: 0px;
    margin-top: 0px;
}

#button2 {
    position: absolute;
    bottom: 10px;
    right: 180px;
    padding: 10px 20px;
    background-color: black;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.8em;
}


/* 'mobile' */
@media (min-width: 0px) {
    .title {
        font-family: 'Copperplate', 'Georgia', serif;
        position: absolute;
        top: 50%;
        /* right: 0; */
        left: 10;
        /* width: 50%; /* Extend to the center */
        padding: 20px;
        text-align: right;
        /* display: flex; */
        /* align-items: center;  */
        /* justify-content: center; */
        font-size: 2.6em;
        background-color: #000000;
        color: #FFFFFF;
    }
    .next {
        position: absolute;
        top: 50%;
        right: 0;
        /* right: 10; */
        /* width: 50%; /* Extend to the center */
        padding: 20px;
        text-align: left;
        /* display: flex; */
        /* align-items: center;  */
        /* justify-content: center; */
        font-size: 1.6em;
        background-color: #000000;
        color: #FFFFFF;
    }
    #bottom-nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 6vh; /* Height of the stripe */
        background-color: black;
        text-align: center;
        font-size: 6vw;
        padding: 10px;
    }
    h1 {
        font-size: 6vw; 
    }
    h2 {
        font-size: 4vw; 
    }
    #player {
        font-size: 4vw;
        position: absolute;
        top: 70%;
        /* top: 66.67%; /1* 2/3 of the viewport height *1/ */
        left: 50%;
        transform: translateX(-50%);
        /* width: 80%;  */
        background-color: black;
        padding: 20px;
        text-align: center; /* Example text alignment */
    }
    .full-screen-image {
        width: 100%;
        height: 100%;
        background-image: url('/images/photos/covershot2024.jpg');
        background-size: cover;
        background-color: black;
        background-position: top;
        background-repeat: no-repeat;
    }
}

/* full size */
@media (min-width: 800px) {
    .title {
        font-family: 'Copperplate', 'Georgia', serif;
        position: absolute;
        top: 50%;
        left: 10;
        padding: 20px;
        text-align: right;
        /* display: flex; */
        /* align-items: center;  */
        /* justify-content: center; */
        background-color: #000000;
        color: #FFFFFF;
    }
    #bottom-nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 4vw; /* Height of the stripe */
        background-color: black;
        text-align: center;
        font-size: 3vw;
    }
    #player {
        font-size: 2.5em;
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translateX(-50%);
        /* width: 80%;  */
        background-color: black;
        padding: 20px;
        text-align: center; /* Example text alignment */
    }
    h1 {
        font-size: 4vw; 
    }

    h2 {
        font-size: 2vw; 
    }
    .full-screen-image {
        width: 100%;
        height: 100%;
        background-image: url('/images/photos/covershot2024.jpg');
        background-size: contain;
        background-color: black;
        background-position: top;
        background-repeat: no-repeat;
    }
}