/* ================================================================================================================== */
/* INLINE VARS */ 
/* ================================================================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap');

:root {
    --clr-primary:           #006969; /*/ DARING ORANGE */
    --clr-secondary:         #238261; /*/ STEADFAST BLUE */
    --clr-tertiary:          #deeaea; /*/ OFF WHITE */
    
    --font-primary:         'Hepta Slab', Arial, sans-serif; 
    --font-secondary:       'Hepta Slab', Arial, sans-serif; 

    --main-margin:          10px;
    --main-border-radius:   15px;
    
    --theme-bg:             #deeaea;
    --theme-text:           #253e4e;
}

@media only screen and (min-width: 768px) 
{
    :root { 
        --main-margin:           15px;
        --main-border-radius:    20px;
    }
}

@media only screen and (min-width: 992px) 
{
    :root { 
        --main-margin:           20px;
        --main-border-radius:    25px;
    }
}

@media only screen and (min-width: 1200px) 
{
    :root { 
        --main-margin:           25px;
        --main-border-radius:    30px;
    }
}

@media only screen and (min-width: 1600px) 
{
    :root { 
        --main-margin:           30px;
        --main-border-radius:    35px;
    }
}

/* ================================================================================================================== */
/* BASIC SETTINGS */
/* ================================================================================================================== */

html, body 
{ 
    font-family:    var(--font-primary);
    font-weight:    400;

    min-height:     100%;
    max-width:      100%;
    height:         100%;
    
    background:     var(--theme-bg);
    color:          var(--theme-text);
    position:       relative;
    
    padding:        0;
    margin:         0;
}

/* ##*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*# */
/* ##**  TYPOGRAPHYS *########################################################################### */
/* ##*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*#*# */

body { 
    font-size: clamp(15px, 2vw, 17px); 
    line-height: 1.5em; 
    font-weight: 400;
} 

@media only screen and (min-width : 768px)
{
    body { font-size: clamp(16px, 2vw, 18px); line-height: 1.5em; } 
}

@media only screen and (min-width : 992px)
{
    body { font-size: clamp(17px, 2vw, 19px); line-height: 1.5em; } 
}

@media only screen and (min-width : 1200px)
{
    body { font-size: clamp(18px, 2vw, 20px); line-height: 1.5em; } 
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-secondary); letter-spacing: 1px; text-wrap: balance; }
h1 { font-weight: 600; font-size: 2.4em; line-height: 1.1em; margin-bottom: 0.5em; }
h2 { font-weight: 600; font-size: 1.8em; line-height: 1.1em; }
h3 { font-weight: 400; font-size: 1.5em; line-height: 1.1em; }

h1 small { font-family: var(--font-primary); font-weight: 400; color: var(--clr-primary); display: inline-block; font-size: .7em; line-height: 1.1em; font-style: italic;  }
p { margin-bottom: 1.3em; }
p.lead { font-weight: 500; }

a { color: var(--clr-secondary); }
a:hover { color: var(--clr-primary); }

.footer p { 
    text-align: center;
    font-size: .8em;
    margin: 0;
}

/* ================================================================================================================== */
/* LOGO */
/* ================================================================================================================== */

.logo { 
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    align-content: stretch;
    flex-wrap: wrap;
    flex-direction: column;
}

.logowrapper {
    padding: 15px;
    background-color: rgba(250,250,250,.65);
    border-radius: 15px;
}

.logo img { width: 100%; max-width: 300px; }

/* ================================================================================================================== */
/* SPACER */
/* ================================================================================================================== */

.spacer { margin: 2em 0 0; }

/* ================================================================================================================== */
/* PANES */
/* ================================================================================================================== */

.pane {
    display: block;
    position: relative;
}

.pane.hero { 
    background-image: url('../img/profile.jpg');
    background-size: cover;
    background-position: left center;
}

.pane.content { 
    overflow: hidden;
    background-image: url('../img/background.png');
    background-size: cover;
    background-position: bottom right;
}

.padding { padding: 5%; }

@media only screen and (min-width : 768px)
{
    .padding { padding: 8%; }
}

@media screen and (orientation: landscape) 
{
    .panes { height:100vh; width:100vw;}
    .pane { float: left; }
    .pane.hero { width: 35vw; height: 100vh; }
    .pane.content { width: 65vw; height: 100vh; overflow-y: auto; }
}

@media screen and (orientation: portrait) 
{
    .pane { float: none; }
    .pane.hero { height: 40vh; }
}

/* ================================================================================================================== */
/* CARDS */
/* ================================================================================================================== */

.card {
    background-color: white;
    border-radius: 10px;
    padding: 15px;
}

.card h3 {
    margin-top: 0;
}


/* ================================================================================================================== */
/* SOCIAL BUTTONS */
/* ================================================================================================================== */

.sociallink {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-color: var(--clr-primary);
    color: white;
    font-size: 25px;
    line-height: 50px;
    margin: 0 5px;
    text-align: center;
}

.sociallink:hover {
    background-color: var(--clr-secondary);
    color: white;
}