@charset "UTF-8";
body {
	height: 100%;
	width: 100%;
	margin: 0;
	background: #fff;
}
/*Back to top Icon*/
.top-button {
	width:50px;
	height:50px;
	background:#bbb;
	position:fixed;
	bottom:25px;
	right:25px;
}
.top-button a {
	width:50px;
	height:50px;
	display:block;
}
.top-button::after {
	content:'Back to Top';
	display:block;
	color:red;
	margin-top:3px;
	margin-left:-12px;
	width:75px;
}
/*Body Content*/
.container {
	margin: auto;
	position: center;
	min-height: 100%;
}
.container section {
    padding: 20px 5%;
    box-sizing: border-box;
    /*Offset screen scroll for jumping to section via links in services summary*/
    scroll-margin-top:100px; /*Currently based off of default website navbar. Change if page gets custom navbar*/
    scroll-snap-margin-top:100px;
}
.container section:nth-child(even) {
    /*background-color:#f8fafd;*/
    background-color:#fafafa;
}
.container section:nth-child(odd) {
    background-color:#fff;
}

/* Profile section */
.section-profile {
    margin:20px auto;
}
.section-profile p {
    font-family: 'Nunito-SemiBold', 'Arial', sans-serif;
}
.section-profile .profile-grid {
    display:grid;
    grid-template-columns:320px auto;
    max-width:1080px;
    margin:auto;
}
.section-profile .profile {
    
}
.section-profile .profile-photo {
    width:100%;
    max-width:320px;
    margin:auto;
    display:block;
}
.section-profile .profile-email {
    margin:0px auto 20px auto;
    width: fit-content;
}
.section-profile .profile-email a {
    text-decoration:none;
    font-family: 'Nunito-SemiBold', 'Arial', sans-serif;
    color: #4CC2E7;
    text-align: center;
}
.section-profile .profile-email-icon {
    display:inline-block;
    width:18px;
    margin:auto 5px -4px auto;
}
.section-profile .profile-socialmedia {
    margin:auto;
    display:flex;
    flex-direction:row;
    width:100%;
    max-width:240px;
    margin:10px auto;
    justify-content: space-evenly;
}
.profile-socialmedia .instagram, .profile-socialmedia .bsky, .profile-socialmedia .linkedin {
    width: 50px;
    margin: auto;
    transform:scale(0.95);
}
.profile-socialmedia .instagram:hover, .profile-socialmedia .bsky:hover, .profile-socialmedia .linkedin:hover {
    transform:scale(1);
}
.section-profile .profile-bio {
    margin:auto;
}
.section-profile .profile-clients h3 {
    text-align: center;
    /*font-family: 'Palanquin', 'Arial Bold', sans-serif;*/
    font-family: 'Nunito-SemiBold', 'Arial', sans-serif;
}
.section-profile .profile-logos {
    display:block;
    width:100%;
    margin:auto;
    max-width:720px;
}

/* Portfolio links section */
.portfoliolinks-grid, .shoplinks-grid {
    /*display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 15px;*/
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    margin: auto;
    max-width: 1080px;
}
.container .homelink-box {
    box-sizing:border-box;
    padding:5px;
    width:33%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.container .homelink-box .homelink-img {
    width:100%;
    margin:auto;
    max-width:480px;
}
.container .homelink-box h2 {
    text-align: center;
    font-family: 'Palanquin', 'Arial Bold', sans-serif;
    margin: 10px auto;
}
.container .homelink-box p {
    text-align: center;
    margin: 10px auto;
    font-family: 'Nunito-SemiBold', 'Arial', sans-serif;
}
.container .homelink-button {
    font-family: 'Palanquin', 'Arial Bold', sans-serif;
    text-decoration:none;
    padding:8px 30px;
    border-radius:30px;
    display:inline-block;
    margin:10px auto;
    border-style:solid;
    /*
    color:#fff;
    background-color:#4cc2e7;
    border-color:#4cc2e7;
    */
    background-color:#fff;
    color:#4cc2e7;
    border-color:#4cc2e7;
    display:block;
    width:max-content;
}
.container .homelink-button:hover {
    /*background-color:#fff;
    color:#4cc2e7;
    border-color:#4cc2e7;*/
    color:#fff;
    background-color:#4cc2e7;
    border-color:#4cc2e7;
}
.container .homelink-button:active {
    /*background-color:#fff;
    color:#e87928;
    border-color:#e87928;*/
    color:#fff;
    background-color:#e87928;
    border-color:#e87928;
}

/* youtube design section*/

.container .section-youtubedesign {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items: center;
}
.container .youtubedesign-content {
    margin:auto auto auto 20px;
    width:60%;
    max-width:600px;
}
.container .section-youtubedesign p {
    font-family: 'Nunito-SemiBold', 'Arial', sans-serif;
    margin:20px auto;
}
.container .ytdesign-button {
    font-family: 'Palanquin', 'Arial Bold', sans-serif;
    text-decoration:none;
    padding:8px 30px;
    border-radius:30px;
    display:inline-block;
    /*margin:10px auto;*/
    margin:10px auto 10px 0px;
    border-style:solid;
    color:#fff;
    background-color:#e13e3e;
    border-color:#e13e3e;
    display:block;
    width:max-content;
}
.container .ytdesign-button:hover {
    background-color:#fff;
    color:#e13e3e;
    border-color:#e13e3e;
}
.container .ytdesign-button:active {
    background-color:#fff;
    color:#a82d2d;
    border-color:#a82d2d;
}
.container .section-youtubedesign .youtubedesign-title {
    margin:auto 0px auto auto;
    width:100%;
    max-width:480px;
    position:relative;
    padding:50px 0px;
}
.container .section-youtubedesign h2 {
    text-align:center;
    font-family: 'PalanquinDark-SemiBold', 'Arial Bold', sans-serif;
    line-height:1.5em;
    position:relative;
    z-index:1;
}
.container .section-youtubedesign .title-l1 {
    font-size:1.75em;
}
.container .section-youtubedesigno .title-l2 {
    font-size:1.25em;
}
.container .section-youtubedesign .youtubedesign-icon-topleft {
    position:absolute;
    top:0;
    left:0;
    width:66px;
}
.container .section-youtubedesign .youtubedesign-icon-topright {
    position:absolute;
    top:0;
    right:0;
    width:62px;
}
.container .section-youtubedesign .youtubedesign-icon-bottomleft {
    position:absolute;
    bottom:0;
    left:0;
    width:63px;
}
.container .section-youtubedesign .youtubedesign-icon-bottomright {
    position:absolute;
    bottom:0;
    right:0;
    width:57px;
}

/* Shop Links section */


/* Media Queries */
@media screen and (max-width:798px) {
    .section-profile .profile-grid {
        display:block;
    }
    .section-profile {
        margin:auto;
    }
    .container .homelink-box {
        width:50%;
    }
}
@media screen and (max-width:680px) {
    .container .section-youtubedesign {
        flex-direction:column;
    }
    .container .section-youtubedesign .youtubedesign-title {
        margin:auto;
        max-width:none;
    }
    .container .section-youtubedesign .youtubedesign-content {
        margin:auto;
        width:100%;
    }
    .container .ytdesign-button {
        margin:10px auto;
    }
    .container .profile-bio-extended {
        display:none;
    }
}

@media screen and (max-width:480px) {
    .container .section-youtubedesign, .portfoliolinks-grid, .shoplinks-grid {
        flex-direction:column;
    }
    .container .homelink-box {
        width:100%;
    }
}

/* DARK MODE */
body.darkMode {
    background-color:#000;
}
.darkMode .latest-projects, .darkMode .testimonials, .darkMode .profile-section {
    background-color: #121212;
}
.darkMode .latest-projects h2, .darkMode .testimonials h2 {
    color:#81c9ec;
}
.darkMode .latest-projects h2::before,.darkMode .latest-projects h2::after,.darkMode .testimonials h2::before,.darkMode .testimonials h2::after {
    background-color:#81c9ec;
}
.darkMode .latest-projects article, .darkMode .testimonials article {
    background-color: #1e1e1e;
}
.darkMode .latest-projects article h3, .darkMode .latest-projects article h4 {
    color:#e1e1e1;
}
.darkMode .latest-projects article p, .darkMode .testimonials article p {
    color: #959595;
}
.darkMode .latest-projects article p.article-date {
    
}
.darkMode .profile .contact-tail {
    border-right: 25px solid #1e1e1e;
}
@media screen and (max-width:680px) {
    .darkMode .profile {
        background-color: #1e1e1e;
    }
}