*{
    margin:0px;
    padding:0px;
    text-decoration: none;
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    display: block;
    position: relative;
    width: 100%;
    height: 100vh;
    z-index: 1;
    overflow: hidden;
    background-color: black;
    padding-bottom: 50px;
}

body::before {
    content: "";
    position: fixed;
    background-image: url(images/backgrounds/background.jpg);
    background-size: 100%;
    z-index: -1;
    filter: blur(15px);
    inset: -50px;
}

.navbar {
    margin-right: 11vw;
    font-size: clamp(24pt, 2.1vw, 25pt);
    font-family: "Crimson Text";
    font-style: italic;
    font-weight: 500;
}

.navbar li {
    list-style: none;
    padding: 1.2vw;
}

.navbar a {
    color: rgb(224, 224, 224);
    transition: transform 0.1s ease;
    display: inline-block;
    text-shadow: 4pt 3pt 10pt rgb(0, 0, 0);
}

.navbar a:hover {
    color: rgb(255, 255, 255);
    transform: scale(1.1);
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3.5vw 0;
/*    background-color: rgba(137, 43, 226, 0.327);*/
}

.header-container {
    width: clamp(300px, 55vw, 1000px);
    color: white;
    /*background-color: rgba(0, 255, 255, 0.315); */
}

.text {
    padding: 4vw 0;
}

.title {
    font-size: clamp(40pt, 5vw, 50pt);
    font-weight: 700;
    font-family: 'Crimson Text';
    font-style: italic;
    text-shadow: 4pt 3pt 10pt rgba(0, 0, 0, 0.541);
}

.subtitle {
    font-size: clamp(23pt, 2.8vw, 66pt);
    font-weight: 650;
    font-family: "Crimson Text";
    text-shadow: 4pt 3pt 10pt rgba(0, 0, 0, 0.564);
}


.image {
    padding: 0;
/*    background-color: rgba(0, 0, 255, 0.158); */
}

#portrait {
    width: clamp(322px, 23vw, 400px);
    border-radius: 5px;
    -webkit-filter: drop-shadow( 10pt 10pt 10pt rgba(0, 0, 0, .541));
    filter: drop-shadow( 10pt 10pt 10pt rgba(0, 0, 0, .541));
}

@media only screen and (max-width: 800px) {
    body {
        overflow-y: auto;
        width: unset;
        height: unset;
    }    

    body::before {
        background-size: 1300px;
        padding-bottom: 30px;
    }

    .header-container {
        width: 100%;
        padding-top: 40px;
    }

    .title {
        padding-left: clamp(8px, 9vw, 50px);
        padding-right: clamp(8px, 9vw, 50px);
        font-size: clamp(38pt, 13vw, 50pt);
    }

    .subtitle {
        padding-left: clamp(8px, 9vw, 50px);
        font-size: clamp(10pt, 6vw, 21pt);
    }

    .navbar {
        margin-left: clamp(60px, 20vw, 80px);
        margin-top: 80px;
        /*background-color: rgba(240, 248, 255, 0.26);*/
    }

    .navbar li {
        padding: 6px 0;
    }

    .image {
        margin-top: 50px;
        display: flex;
        justify-content: center;
        /*background-color: rgba(240, 248, 255, 0.26);*/
    }

    #portrait {
        width: clamp(230px, 70vw, 330px);
    }

    .image::after{
        content: "";
        position: absolute;
        width: 80%;
        margin-top: clamp(210px, 73vw, 290px);
        height: 2px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.7) 40%,
            white 50%,
            rgba(255,255,255,.7) 60%,
            transparent 100%
        );
        border-radius: 999px;   
        pointer-events: none;
    }

    .container {
        display: flex;
        align-items: start;
        flex-direction: column-reverse;
        /*background-color: rgba(137, 43, 226, 0.288);*/
        padding: 0;
    }
}