/*
    RESUME STYLING
*/

body {font-family: 'Inter', sans-serif; font-size: 20px; line-height: 1.5em; letter-spacing: -0.035em; color: #000; background-color: #fff;}

html, body, a {cursor: none !important;}

.serif {font-family: 'Times New Roman', Times, serif;}

a {color: #000; text-decoration: none; transition: color 0.2s ease-in-out;}
a:hover {color: rgba(0,0,0,0.5);}

.nowrap {white-space: nowrap;}

.header, .footer {padding: 2em 1em;}
.header {padding-top: 4em;}
.section {padding: 4em 1em;}
.header, .section, .footer {max-width: 1440px; margin: 0 auto; position: relative; z-index: 1;}
.footer {font-size: 0.825em; opacity: 0.3;}

.container {position: relative; padding: 0 15px;}
.row {display: flex; width: 100%; flex-wrap: wrap; position: relative; margin: 0 -15px;}
.col {display: block; flex-basis: 0; flex-grow: 1; width: 100%; max-width: 100%; padding: 0 15px; position: relative;}
.col-1 {max-width: 6%;}
.col-2 {max-width: 12%;}
.col-3 {max-width: 25%;}
.col-4 {max-width: 33.33%;}
.col-5 {max-width: 42%;}
.col-6 {max-width: 50%;}
.col-7 {max-width: 58%;}
.col-8 {max-width: 66.67%;}
.col-9 {max-width: 75%;}
.col-10 {max-width: 88%;}
.col-11 {max-width: 94%;}
.col-12 {max-width: 100%;}

.h-full {min-height: 100vh; justify-content: center; display: flex; flex-direction: column;}

.pb-1 {padding-bottom: 1em;}


hr {margin: 1em 0; padding: 0; height: 0px; border-top: 3px solid #000;}
.hr-sm {margin: 2em 0; width: 10em;}

.text-left {text-align: left;}
.text-center {text-align: center;}
.text-right {text-align: right;}

h1,h2,h3,h4,h5,h6,p {padding: 0; margin: 0;}
p {padding-bottom: 1.5em;}
p:last-child {padding-bottom: 0;}
address {font-style: normal;}

.nowrap {white-space: nowrap;}

.h1 {padding-bottom: 0; font-size: 4em; line-height: 1.3em; font-weight: 600;}
.h2 {padding-bottom: 0.5em; font-size: 2.25em; line-height: 1.3em; font-weight: normal;}
.h3 {padding-bottom: 0.5em; font-size: 1.5em; line-height: 1.3em; font-weight: 600;}
.h4 {padding-bottom: 0.5em; font-size: 1.15em; line-height: 1.3em; font-weight: 400;}
.h4:before {content: ''; display: block; margin: 1em 0; border-top: 3px solid #000; width: 2em;}
.h5 {padding-bottom: 0.5em; font-size: 0.825em; text-transform: uppercase; letter-spacing: 0.5em;}
.h6 {}

.bold {font-weight: bold;}
.normal {font-weight: normal;}

.text-leadin {font-size: 2em; line-height: 1.4em; letter-spacing: -0.05em;}
.text-xlg {font-size: 1.5em; line-height: 1.5em;}
.text-lg {font-size: 1.25em; line-height: 1.5em;}
.text-md {font-size: 1.15em; line-height: 1.5em;}
.text-sm {font-size: 0.85em; line-height: 1.5em;}

.item-spacer {padding-bottom: 4em;}

.tag {display: inline-block; vertical-align: baseline; white-space: nowrap; padding: 0.25em 0.85em; border-radius: 2em; margin: 0 1em 1em 0; background-color: rgba(0,0,0,0.15); transition: all 0.25s ease-in-out;}
.tag:hover {color: #fff; background-color: rgba(0,0,0,1);}

.btn {display: inline-block; border: 1px solid #000; font-size: 0.875em; vertical-align: baseline; white-space: nowrap; padding: 0.25em 0.85em; border-radius: 2em; margin: 0 1em 1em 0; background-color: rgba(0,0,0,0.15); transition: all 0.25s ease-in-out;}
.btn:hover {color: #fff; background-color: rgba(0,0,0,1);}

.lightmode-message {display: inline-block;}
.darkmode-message {display: none;}

.footer-spacer {display: inline-block; width: 3em;}

.fa, .fa-brands {padding-left: 0.5em;}
.social-links [class*=fa] {padding-left: 1em;}

.overlay {visibility: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; background: rgba(0,0,0,0.5); backdrop-filter: blur(64px);}

/*
    Panel that holds the contact form
*/
.panel {visibility: hidden; position: fixed; top: 0; right: 0; width: 70%; max-width: 600px; min-width: 320px; z-index: 10;}

@media screen and (min-width: 769px) {
    .pl-1 {padding-left: 1em;}
    .pl-2 {padding-left: 2em;}
    .pl-3 {padding-left: 3em;}
    .pl-4 {padding-left: 4em;}
    .pl-5 {padding-left: 5em;}
}
@media screen and (max-width: 768px) {
    body {font-size: 1em;}
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 ,.col-10, .col-11 ,.col-12 {flex: none; max-width: none;}
    .text-leadin {font-size: 2em;}
    .text-right {text-align: left;}
}

/*
    BACKGROUND GRADIENT
*/

body {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradient 25s ease-in-out infinite;
}
body:after {content: ''; display: block; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255,255,255,0.8);}

@keyframes gradient {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

/*
    DARK MODE
*/
@media (prefers-color-scheme: dark) {
    body {background-color: #000; color: #fff;}
    body:after {background: rgba(0,0,0,0.7);}
    hr, .h4:before {border-color: #fff;}
    .darkmode-message {display: inline-block;}
    .lightmode-message {display: none;}
    a {color: #fff;}
    a:hover {color: rgba(255,255,255,0.5);}
    .tag, .btn {background-color: rgba(255,255,255,0.09);}
    .tag:hover, .btn:hover {color: #000; background-color: rgba(255,255,255,1);}
    .btn {border-color: #fff;}
}

/*
    CURSOR
*/

.cursor {position: fixed; opacity: 0; pointer-events: none; mix-blend-mode: difference; width: 3em; height: 3em; border-radius: 50%; background-color: #fff; transition: transform 350ms ease; transform: translate(-50%, -50%) scale(.3); z-index: 1000;
}