: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;
}


@font-face {
    font-family: "CustomFont-Regular";
    src: url("assets/typeface/CustomFont-Regular.otf") format("opentype");
}
    

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);
    
}

.container {
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    /*height: calc(100vh - var(--global-padding-scaled));*/
    display: flex;
    justify-content: space-around; 
    align-items: center; 
    
    /*background-color: blue;*/
}

.summary {
    /*z-index: 999999;*/
    
    padding: 0;
    margin: 0;
    border: 0;
    align-content: center;
    text-align: center;
    vertical-align: middle;
    /*background-color: violet;*/
}



.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: "CustomFont-Regular", 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%;*/
        font-size: 13px;
    }
    .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%;
    }
    .container {
        height: calc(100vh - 40vw);
    }
    .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%;
    }
    .container {
        height: calc(100vh - var(--global-padding-scaled)*2);
    }
    .summary {
        /*margin-top: calc(var(--global-padding-scaled)*2);*/
        width: 66%;
    }
    .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%;
    }
    .container {
        height: calc(100vh - var(--global-padding-scaled));
    }
    .summary {
        /*margin-top: calc(var(--global-padding-default)*2);*/
        width: 300px;
    }
    .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%;
    }
    .container {
        height: calc(100vh - var(--global-padding-scaled));
    }
    .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%;
    }
 }