:root {
    /*--background-color: #000000;*/
    /*--secondary-background-color: #009637;*/
    --global-padding-default: 5vw;
    --global-padding-scaled: 10vw;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: content-box;
    border-collapse: collapse; 
    border-spacing: 0;
}

body {
    /*background-color: var(--secondary-background-color);*/
    overflow-x: hidden;
    border: 0;
    padding: 0;
    margin: 0;
}

.wrapper {
    padding: var(--global-padding-default);
    margin: 0;
}

.monogram-r {
    position: fixed;
    z-index: 9000;
    
}

.monogram-v {
    position: fixed;
    z-index: 10000;
}

.monogram-v img {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 9001;
}

.monogram-r img {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 10001;
}

.cta {
    position: fixed;
    z-index: 300;
    padding: 0;
    margin: 0;
    border: 0;
    top: var(--global-padding-default);
    right: var(--global-padding-default);
}

.intro {
    position: fixed;
    z-index: 200;
    padding: 0;
    margin: 0;
    border: 0;
    bottom: var(--global-padding-default);
    left: var(--global-padding-default);
    
}

.summary {
    /*z-index: 999999;*/
    position: relative;
    padding: 0;
    margin: 0;
    border: 0;
    margin-top: 100px;
}



.bio {
    /*z-index: 20;*/
    padding: 0;
    margin: 0;
    border: 0;
    
}

.contact {
    position: fixed;
    z-index: 200;
    padding: 0;
    margin: 0;
    border: 0;
    bottom: var(--global-padding-default);
    left: var(--global-padding-default);
    
}

img.vessel {
    padding: 0;
    margin: 0;
}


a:link {
    /*color: #000000;*/
    text-decoration: none;
}

a:visited {
    /*color: #000000;*/
}

a:hover {
    /*color: #000000;*/
    text-decoration: underline;
}

a.bodyLink:link {
    text-decoration: underline;
}



p.paraText {
    font-family: Helvetica, Arial, sans-serif;
    /*color: #000000;
    /*padding-left: var(--global-padding-default);*/
    font-size: 12px;
    line-height: 140%;
}

@media screen and (max-width: 640px) { 
    p.paraText {
        /*color:rgb(255, 213, 0); */
        /*max-width: 70%;*/
    }
    .vessel {
        width: 100%;
    }
    .wrapper {
        padding: var(--global-padding-scaled);
    }
    .cta {
        top: var(--global-padding-scaled);
        right: var(--global-padding-scaled);
    }
    .intro {
        bottom: var(--global-padding-scaled);
        left: var(--global-padding-scaled);
        max-width: 66%;
    }
    .summary {
        margin-top: calc(var(--global-padding-scaled)*2);
        width: 75%;
    }
    .bio {
        width: 75%;
    }
    .monogram-r {
        top: var(--global-padding-scaled);
        left: var(--global-padding-scaled);
        max-width: calc(var(--global-padding-scaled)/1.8);
    }
    .monogram-v {
        bottom: calc(var(--global-padding-scaled)*0.9);
        right: var(--global-padding-scaled);
        max-width: calc(var(--global-padding-scaled)/1.8);
    }
    .contact {
        bottom: var(--global-padding-scaled);
        left: var(--global-padding-scaled);
        max-width: 66%;
    }
}

/* Medium devices (tablets, 640px and up) */
@media screen and (min-width: 640px) { 
    p.paraText {
        /*color:red; */
        font-size: 16px;
        line-height: 130%;
        /*max-width: 70%;*/
    }
    p.reelTitle {
        font-size: 16px;
    }
    .vessel {
        width: 100%;
    }
    .wrapper {
        padding: var(--global-padding-scaled);
    }
    .cta {
        top: var(--global-padding-scaled);
        right: var(--global-padding-scaled);
    }
    .intro {
        bottom: var(--global-padding-scaled);
        left: var(--global-padding-scaled);
        max-width: 50%;
    }
    .summary {
        margin-top: calc(var(--global-padding-scaled)*2);
        width: 75%;
    }
    .bio {
        width: 75%;
    }
    .monogram-r {
        top: var(--global-padding-scaled);
        left: var(--global-padding-scaled);
        max-width: calc(var(--global-padding-scaled)/2);
    }
    .monogram-v {
        bottom: var(--global-padding-scaled);
        right: var(--global-padding-scaled);
        max-width: calc(var(--global-padding-scaled)/2);
    }
    .contact {
        bottom: var(--global-padding-scaled);
        left: var(--global-padding-scaled);
        max-width: 75%;
    }
 }

/* Large devices (desktops, 1024px and up) */
@media screen and (min-width: 1024px) { 
    p.paraText {
        /*color:blue;
        /* padding-left: var(--global-padding-reduced);*/
        /*max-width: 70%;*/
    }
    .vessel {
        width: 50%;
    }
    .wrapper {
        padding: var(--global-padding-default);
    }
    .cta {
        top: var(--global-padding-default);
        right: var(--global-padding-default);
    }
    .intro {
        bottom: var(--global-padding-default);
        left: var(--global-padding-default);
        max-width: 33.3%;
    }
    .summary {
        margin-top: calc(var(--global-padding-default)*2);
        width: 50%;
    }
    .bio {
        width: 50%;
    }
    .monogram-r {
        top: var(--global-padding-default);
        left: var(--global-padding-default);
        max-width: calc(var(--global-padding-default)/2);
    }
    .monogram-v {
        bottom: var(--global-padding-default);
        right: var(--global-padding-default);
        max-width: calc(var(--global-padding-default)/2);
    }
    .contact {
        bottom: var(--global-padding-default);
        left: var(--global-padding-default);
        max-width: 33.3%;
    }
 }


/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) { 
    p.paraText {
        /*color:green; */
        /*max-width: 70%;*/
    }
   .wrapper {
        padding: var(--global-padding-default);
    }
    .cta {
        top: var(--global-padding-default);
        right: var(--global-padding-default);
    }
    .intro {
        bottom: var(--global-padding-default);
        left: var(--global-padding-default);
        max-width: 33.3%;
    }
    .summary {
        margin-top: calc(var(--global-padding-default)*2);
        width: 40%;
    }
    .bio {
        width: 40%;
    }
    .monogram-r {
        max-width: calc(var(--global-padding-default)/2);
    }
    .monogram-v {
        max-width: calc(var(--global-padding-default)/2);
    }
    .contact {
        bottom: var(--global-padding-default);
        left: var(--global-padding-default);
        max-width: 40%;
    }
 }

/* XXLarge devices (larger desktops, 1440px and up) */
@media screen and (min-width: 1440px) { 
    p.paraText {
       /* color:purple;*/
       /*max-width: 70%;*/
    }
    .wrapper {
        padding: var(--global-padding-default);
    }
    .cta {
        top: var(--global-padding-default);
        right: var(--global-padding-default);
    }
    .intro {
        bottom: var(--global-padding-default);
        left: var(--global-padding-default);
        max-width: 33.3%;
    }
    .summary {
        margin-top: calc(var(--global-padding-default)*2);
        width: 40%;
    }
    .bio {
        width: 40%;
    }
    .monogram-r {
        max-width: calc(var(--global-padding-default)/2);
    }
    .monogram-v {
        max-width: calc(var(--global-padding-default)/2);
    }
    .contact {
        bottom: var(--global-padding-default);
        left: var(--global-padding-default);
        max-width: 40%;
    }
 }