/* --- Variables --- */
:root {
    --primary-color-dark:#00756c;
    --primary-color:#3399FF;
    --accent-color:rgb(0, 127, 253);
    --font-color:#fff;
    --burger-color:#fff;
    --burger-background:rgba(0, 0, 0, 0);
    --menu-background:#333;
    --menu-speed: 1.3s;
}
/* --- General Styles --- */
* {
    font-family: Catamaran, Helvetica, Arial, sans-serif;
    box-sizing:border-box;
    margin:0;
    padding:0;
}
html {
    scroll-behavior: smooth;
}
body{
    color: #fff;
}
a {
    text-decoration:none;
}
.btn {
    border: none;
    background-color:#fff;
    color:#333;
    padding:0.5em 1em;
    text-decoration:none;
    font-weight:800;
}
.btn:hover {
    border:none;
    box-shadow: 0 6px 7px 0 rgba(0,0,0,0.14),
    0 1px 12px 0 rgba(0,0,0,0.12),
    0 4px 6px -3px rgba(0,0,0,0.3);
    transform: translateX(-4px) translateY(-3px);
}
.card {
    background-color: #fff;
    text-align:center;
    color:#000;
    margin:0 auto;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 
                0 1px 10px 0 rgba(0,0,0,0.12), 
                0 2px 4px -1px rgba(0,0,0,0.3);
    padding:1.5rem;
    height:100%;
    max-width:350px;
    border-radius:15px;
}
.card > a {
    padding-top:100px;
}
/* --- Landing Area --- */
.container {
    max-width:960px;
    margin:auto;
    overflow:hidden;
    padding:0 3rem;
}
#landing {
    color:#3399FF;
    background:url(../assets/portfolio-background-v1.png) no-repeat center center/cover;
    height:100vh;
    position:relative;
    background-color:#333;
}
#landing .landing-inner {
    height:100%;
}
.landing-inner {
    display:flex;
    flex-direction:column;
    align-items: flex-start;
    position: absolute;
    top:200px;
    right:250px;
    width:600px;
}
.landing-inner > h1 {
    font-size:3.2rem;
    font-family:Philosopher, sans-serif;
    background: -webkit-linear-gradient(#3399ff, #32ceff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.landing-inner > h1 > span {
    background: -webkit-linear-gradient(#fff, #fff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family:Philosopher, sans-serif;
}
#landing h2 {
    color:#fff;
    font-weight:400;
}
#landing p {
    padding:1rem 0;
    font-size:1.3rem;
    color:#fff;
}
.work-btn {
    margin-top:1rem;
}

/* --- Work Section --- */
#work {
    min-height:50vh;
    display:grid;
    grid-column-gap:128px;
    grid-row-gap:25px;
    justify-items:center;
}
#work h2 {
    color:#000;
    padding:8rem 0 4rem 0;
}
.work-image{
    flex-shrink:0;
    min-width:100%;
    max-width:100%;
}
div[class^="work-"]{
    align-self:stretch;
}
.work-1{
    grid-column:1;
    grid-row:2;
    padding-left:128px;
}
.work-2{
    grid-column:2;
    grid-row:2;
}
.work-3{
    grid-column:3;
    grid-row:2;
    padding-right:8rem;
}
.work-1 .work-display {
    background:url(../assets/globalmedic-thumbnail.png) no-repeat center;
}
.work-2 .work-display {
    background:url(../assets/map-thumbnail.png) no-repeat center;
}
.work-3 .work-display {
    background:url(../assets/humbieHelper.png) no-repeat center;
}
.work-info {
    display:none;
    text-align:center;
    text-decoration: none;
    color:#000;
    vertical-align: middle;
}
#work h2 {
    font-size:2.5rem;
    grid-column:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    font-family:Philosopher, Arial, Helvetica, sans-serif;
}
#work h3 {
    font-size:1.8rem;
    padding: 1rem;
}
.work-display {
    height:200px;
    margin:0 auto;
    border-radius:5px;
}
.btn-container {
    grid-column: 2;
    grid-row: 3;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.work-link {
    color:#000;
    font-weight:600;
    font-size:1.6rem;
}
.work-link:hover {
    text-decoration:underline;
}
.work-link:visited {
    color:#000;
}

/* --- About Section --- */
#about {
    min-height:80vh;
    position:relative;
    border-radius: 0 40% 0 0;
    margin-top:5rem;
    color:#000;
}
.about-wrap {
    max-width: 960px;
    margin:auto;
    overflow: hidden;
}
.about-wrap > ul {
    text-align:center;
    list-style:none;
    font-weight:400;
    font-size:1.1rem;
}
#about h2 {
    padding-top:3rem;
    padding-bottom:3rem;
    font-size: 2.5rem;
    text-align:center;
    font-family:Philosopher, Arial, Helvetica, sans-serif;
}
#about h3 {
    font-size: 1.8rem;
    text-align:center;
    padding:2rem 0 1em 0;
    font-family:Philosopher, Arial, Helvetica, sans-serif;
}
#about p {
    font-size:1.4rem;
    padding-bottom:1rem;  
}
.contact-info {
    text-align:center;
    font-size:1.3rem;
    padding-top:3rem;
    padding-bottom:3rem;
}

/* --- Contact Form --- */
.contact-page {
    color:#333;
    text-align:center;
}
.contact-page h1 {
    padding:7rem 0 2rem 0;
}
.contact-form {
    display: flex;
    flex-direction:column;
    margin-top:50px;
    margin-bottom:50px;
}
.contact-form textarea {
    resize:vertical;
}
.contact-card {
    max-width:500px
}
.contact-btn {
    padding: 0.5rem 0;
    margin-top:30px;
    background-color:#fff;
    border: 0.5px solid #a9a9a9;
}
.contact-btn:hover {
    cursor:pointer;
}
.contact-btn:active,
.contact-btn:focus {
    background-color:#3399ff;
    color:#fff;
    outline:none;
}
label {
    font-size:1.3rem;
    padding:0.25rem 0;
}
input, textarea {
    font-size:1.1rem;
    margin-bottom:1.25rem;
}
.back-btn {
    color:#000;
}
.form-link {
    color: #0000EE;
    text-decoration: underline;
}
.form-link:visited {
    color:#0000EE;
}