/* 
 * CreativeDavid Global Components CSS Stylesheet
 */
 
:root {
    --site: hsl(204deg 70% 53%);
    --site-light: hsl(204deg 70% 75%);
    --site-super-light: hsl(204deg 70% 94%);
    --site-dark: hsl(204deg 70% 45%);
}

html {
    font-size: 22px;
}
body {
    font-size: 1rem;
    font-family: 'Lato', sans-serif;
    background-color: white;
    color: black;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1,h2,h3 {
    display: block;
    margin: 0;
    padding: 0;
}
p {
    margin: 0 0 .5rem;
}
a {
    display: inline-block;
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Global Utilities */

.fixed-width,
.page-header,
.content-section {
    /* QUESTION: is it better to do this or to be 100% width and have
       padding left and right instead of margin auto? */
    width: 85%;
    max-width: 1200px;
    margin: auto;
}
.full-width {
    display: flex;
    width: 100%;
    height: auto;
}

.two-cols,
.three-cols {
    display: flex;
}
.two-cols > div {
    flex-basis: 50%;
}
.three-cols > div {
    flex-basis: 33%;
}

.two-col-inner.padding-right {
    padding-right: 1.5rem;
}
.two-col-inner.padding-left {
    padding-left: 1.5rem;
}

.rounded-corners {
    border-radius: 1rem;
}

/* Button Styles */

.cta-btn-2 {
    position: relative;
    margin-top: 1.5rem;
    display: inline-block;
    padding: .5rem 1.6rem;
    font-size: .9rem;
    font-weight: 400;
    color: black;
    background-color: var(--site-super-light);
    border-radius: 10px;
    text-decoration: none;
    overflow: hidden;
    transition: all .2s;
}
.cta-btn-2::before {
    z-index: 0;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: calc(100% + 5px);
    right: -20%;
    bottom: 0;
    background-color: var(--site);
    transition: all .35s;
    transform: skewX(-45deg);
}
.cta-btn-2 span {
    position: relative;
    z-index: 10;
}
.cta-btn-2:hover {
    color: white;
    box-shadow: 0 10px 20px -10px rgb(0 0 0 / 40%);
    transform: translateY(-7px);
}
.cta-btn-2:hover::before {
    left: -15%;
}

/* Logo Navbar */

.nav {
    position: relative;
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 5px rgb(0 0 0 / 15%);
    background-color: white;
    z-index: 100;
}
.nav > div,
.nav .logo,
.nav .menu-container {
    position: relative;
    height: 100%;
}
.nav > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nav .logo,
.logo-accent {
    transition: all .2s;
}
.nav .logo {
    display: flex;
    align-items: center;
    color: white;
    background-color: var(--site);
    transform: skewX(-25deg) translateX(-170px);
    padding-left: 200px;
    padding-right: 40px;
    margin: 0;
}
.nav .logo h1 {
    transform: skewX(25deg);
    font-size: 2.3rem;
}

.logo-accent {
    position: absolute;
    width: 1rem;
    background-color: hsl(204deg 80% 74%); /* TODO: move to variable */
    height: 100%;
    left: 402px;
    top: 0;
    transform: skewX(-25deg);
}

.nav .logo:hover {
    padding-left: 210px;
    padding-right: 50px;
}
.logo:hover + .logo-accent {
    width: 2rem;
    left: 428px;
}

/* Footer */

.footer {
    position: relative;
    background: linear-gradient(315deg, var(--site-light), var(--site));
    padding: 220px 0 50px;
    overflow: hidden;
    z-index: 1;
}
.footer::before {
    display: block;
    content: '';
    position: absolute;
    top: -350px;
    left: -25vw;
    right: -25vw;
    height: 500px;
    border-radius: 100%;
    background-color: white;
    box-shadow: 0 0 50px rgb(0 0 0 / 25%);
}

.footer > div,
.footer .three-cols {
    height: 100%;
}
.footer .three-cols > div {
    display: flex;
    flex-direction: column;
}

.footer ul {
    padding-bottom: 60px;
}
.footer ul li {
    margin-bottom: .5rem;
}

.footer h3 {
    color: white;
    font-size: 1.25rem;
    padding-bottom: 1rem;
}
.copyright {
    color: var(--site-light);
    font-size: .85rem;
    margin-top: auto;
}

.footer a {
    color: rgb(255 255 255 / 65%);
    padding: .25rem .5rem;
    border-radius: 5px;
}
.footer a:hover {
    color: white;
    background-color: rgb(255 255 255 / 25%);
}
.footer a.email {
    padding: 0;
}
.footer a.email:hover {
    text-decoration: underline;
    background-color: transparent;
}

.social {
    display: flex;
    padding: 1rem 0;
}
.social a {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 40px;
    padding: 0;
    background-color: var(--site-dark);
    border-radius: 6px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32%;
    margin-right: .5rem;
    transition: transform .15s;
}
.social a:hover {
    background-color: rgb(255 255 255 / 85%);
    transform: translateY(-6px);
    box-shadow: 0 8px 10px -5px rgb(255 255 255 / 35%);
}
.social a span {
    background-color: rgb(255 255 255 / 65%);
    display: block;
    width: 30px;
    height: 30px;
    transform: rotateZ(45deg);
    position: absolute;
    bottom: -19px;
    right: -19px;
}
.social a:hover span {
    display: none;
}
.social a svg {
    fill: white;
    width: 38%;
}
.social a:hover svg {
    fill: var(--site);
}
.social .youtube svg {
    width: 32%;
}
.social .linkedin svg {
    width: 28%;
}