/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/*COMMENT */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

:root{
    font-size: 16px;
    --fonts: Arial, sans-serif;
    --white: #fff;
    --black: #000000;
    --canary: #F2D230;
    --palm: #05A678;
    --pewter: #3b3b3b;
    --sky: #49A3F2;
    --baby: #F2BDBD;
    
    /*LIGHT MODE*/
    --header-bg:var(--canary);
    --resume-bg:var(--baby);
    --services-bg:var(--palm);
    --game-bg:var(--canary);
    --contact-bg:var(--baby);
    --footer-bg:var(--black);
    --text-color:var(--black);
    --h1-color:var(--white);
    --main-nav-a:var(--black);
    --header-text:var(--white);
    --h2-color:var(--black);
    --footer-color:var(--white);
    --game-p:var(--black);
    --columns-article-bg:var(--white);
    --columns-h3-color: #000075; 
    --columns-p-color: #3C0123;
    --services-inner-bg:var(--white);
    --services-h3-color:var(--columns-p-color);
    --services-h3-p:var(--pewter);
    --portfolio-bg:var(--sky);
    --game-form-bg:var(--white);
    --game-label:var(--black);
    --contact-form-bg:var(--white);
    --error-msg: #FF0000;
  }

  /*DARK MODE*/

body.dark-mode {
    --header-bg: #dcd0ff;
    --resume-bg: black;
    --services-bg: #050a30;
    --game-bg: #8B5F2D;
    --contact-bg: #3C0123;
    --footer-bg: var(--black);
    --text-color:var(--white);
    --main-nav-a:var(--white);
    --header-text:var(--white);
    --h2-color:var(--white);
    --game-p:var(--white);
    --columns-article-bg:var(--sky);
    --columns-h3-color:var(--black);
    --columns-p-color:var(--pewter);
    --services-inner-bg:var(--black);
    --services-h3-color:var(--white);
    --services-h3-p:var(--white);
    --portfolio-bg:var(--black);
    --game-form-bg:var(--black);
    --game-label:var(--white);
    --contact-form-bg: #8B5F2D;
    --error-msg: var(--canary);

}

/*THEME TOGGLE/CONTROL*/
#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
}

#theme-icon {
    width: 40px;
    height: 40px;
}


body {
    width: 1280px;
    font-family: "Noto+Sans", Arial, sans-serif;
    line-height: 1.5;
    background-color: var(--white);
    color: var(--black);
    padding: 20px;
    margin: 0 auto;
    padding: 0;
}

/*HEADER*/
header {
    background-color: var(--header-bg);
    color: var(--text-color);
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#site-logo {
    height: 100px;      
    width: auto;
}

#main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}

#main-nav a {
    font-family: "Sigmar", "Noto+Sans", sans-serif;
    text-decoration: none;
    color: black;
    font-size: 1.5rem;
    padding: 5px;
}


#main-nav a:hover, #main-nav a:focus { 
    background-color: #0073e6;
    color: white;
    outline: 3px solid var(--canary); 
    outline-offset: 2px;
}

#profile-picture {
    width: 200px;
    height: auto;
    border-radius: 50%;
    margin: 2rem auto;
    display: block;
    flex-shrink: 0; 
}

#header-text {
    font-family: "Noto+Sans", sans-serif;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: 2rem;
    color: black;
    text-align: left;
}

#logo-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#tag-line {
    font-size: 0.9rem;
    font-style: italic;
    font-weight: 500;
    color: black;
    margin-top: -10px; 
    margin-left: 5px; 
    line-height: 1; 
}


.header-content-group {
    display: flex; 
    align-items: center; 
    gap: 30px; 
    margin: 2rem auto; 
    max-width: 1280px; 
    padding: 0 100px; 
    text-align: left; 
}


/* Responsive adjustment for small screens: stack content vertically */
@media (max-width: 768px) {
    .header-content-group {
        flex-direction: column;
        text-align: center; 
        padding: 0 20px; 
    }
    .header-content-group #profile-picture {
        margin: 0 auto 1.5rem auto; 
    }
    .header-content-group #header-text {
        text-align: center;
    }
}

@media (max-width: 768px) {

    #main-nav ul {
        flex-direction: column;
        align-items: center; 
        width: 100%;
        padding: 10px 0;
    }

    #main-nav li {
        margin: 5px 0; 
    }
    
  
    #logo-group {
        align-items: center;
    }
}


/*RESUME SECTION*/
.resume {
    background-color: var(--resume-bg);
    padding: 4rem 2rem;
    max-width: 1280px;
    margin: 0 auto;   
    text-align: center;
    border-top: none; 
}

.resume h2 {
    font-family: "Sigmar", "Noto+Sans", sans-serif;
    font-size: 2.5rem;
    color: var(--h2-color);
    margin: 0 0 2rem 0; 
    padding-top: 0;
}

#resumedownload {
    font-size: 1.2rem;
    color: var(--h2-color);
}

.columns h3 {
    font-family: "Noto+Sans", sans-serif;
    font-size: 1.5rem;
    color: var(--columns-h3-color);
    margin-bottom: 1rem;
}

.columns p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--columns-p-color);
    margin-bottom: 1.5rem;
}

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

.columns li {
    font-size: 1rem;
    line-height: 1.5;
    padding-left: 1.5rem;
		text-align: left;
    position: relative;
    margin-bottom: 0.75rem;
}

.columns li::before {
    content: "•";
    color: #F2BDBD;
    font-weight: bold;
    position: absolute;
    left: 0;
} 

#column2list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 10px; 
    padding: 0; 
    list-style-type: none;
  }
  
  #column2list li {
    padding: 5px 0;
    position: relative;
    padding-left: 1em; 
  }

  .case-study-item {
    margin-bottom: 100px; 
}

  .case-study-item h4 {
    font-weight: bold; 
    font-size: 1.1rem; 
    color: var(--columns-h3-color); 
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    text-align: left;
}

.case-study-item p {
    font-size: 16px; 
    color: black; 
    line-height: 1.5;
    margin-bottom: 1rem;
    text-align: left;
}

.case-study-item p a {
    color: var(--columns-h3-color); 
    text-decoration: underline; 
    font-weight: 600; 
    
}

#linkedin {
    color: var(--services-h3-p);
    font-size: 20px;
}

.case-study-image {
    max-width: 100%; 
    height: auto;
    max-height: 250px; 
    object-fit: cover; 
    display: block; 
    margin: 10px 0 15px 0; 
}

#column3p {
    margin-bottom: 55px;
}

/*SERVICES SECTION*/
.services {
    background-color: var(--services-bg);
    padding: 4rem 2rem;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.services h2 {
    font-family: "Sigmar", "Noto+Sans", sans-serif;
    font-size: 2.5rem;
    color: var(--h2-color);
    margin-bottom: 3rem;
}


.main-service, .album-service, .movie-service {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    background: var(--services-inner-bg);
    padding: 2rem;
    border: 5px solid #49A3F2;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.main-service {
    display: block; 
}

.main-service img, .album-service img, .movie-service img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    max-height: 400px; 
    object-fit: cover;
}

.main-serviceinfo, .album-serviceinfo, .movie-serviceinfo {
    text-align: left;
    max-width: 600px;
}

.services h3 {
    font-family: "Noto+Sans", sans-serif;
    font-size: 2rem;
    color: var(--services-h3-color);
    margin-bottom: 1rem;
}

.services p {
    font-size: 1.1rem;
    color: var(--services-h3-p);
    line-height: 1.6;
}


.service-links ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.service-links a {
    text-decoration: none;
    font-size: 1.2rem;
    color: #FFF;
    padding: 0.5rem 1rem;
    border: 2px solid #F2BDBD;
    border-radius: 5px;
    transition: background 0.3s ease, color 0.3s ease;
}

.service-links a:hover {
    background: #0073e6;
    color: #FFF;
}

.service-links {
    margin-top: 2rem;
    z-index: 10; 
    position: relative; 
}

/*PORTFOLIO SECTION*/
.portfolio {
    background-color: var(--portfolio-bg);
    padding: 4rem 2rem;
    max-width: 1280px;
    margin: 0 auto;   
    text-align: center;
    border-top: none; 
}

.portfolio h2 {
    font-family: "Sigmar", "Noto+Sans", sans-serif;
    font-size: 2.5rem;
    color: var(--h2-color);
    margin-bottom: 3rem;
}

#portfoliolink {
    font-size: 1.2rem;
    color: var(--h2-color);
}


.flexslider {
    margin: 0;
    padding: 0;
    max-width: 800px; 
    overflow: hidden; 
    margin-left: auto;
    margin-right: auto;
    padding-left: 75px;
    padding-right: 75px;
}

.flex-direction-nav a {
    overflow: visible !important; 
}


.flex-caption {
    width: 96%;
    padding: 2%;
    left: 0;
    bottom: 0;
    background: var(--canary);
    color: black;
    text-shadow: 0 -1px 0 rgba(0,0,0,.3);
    font-size: 18px;
    font-weight: bold;
    line-height: 18px;
}

li.css a {
    border-radius: 0;
}


.flexslider .slides img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

#behance {
    color: var(--services-h3-p);
    font-size: 20px;
}

/* GAME SECTION */
.game {
    background-color: var(--game-bg);
    padding: 4rem 2rem;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;    
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.game h2 {
    font-family: "Sigmar", "Noto+Sans", sans-serif;
    font-size: 2.5rem;
    color: var(--h2-color);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.game p {
    font-size: 1.2rem;
    color: var(--game-p);
    margin-bottom: 2rem;
}

#gametext {
    font-size: 1.5rem;
    font-weight: bold;
}

#game-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    background: var(--game-form-bg);
    padding: 2rem;
    border: 2px solid #333;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto;
}

#game-form label {
    font-size: 1.2rem;
    color: var(--game-label);
}

#user-guess {
    padding: 0.75rem;
    font-size: 1.1rem;
    border: 2px solid #333;
    border-radius: 8px;
    width: 100%;
    max-width: 300px;
    text-align: center;
}

#game-form button {
    padding: 0.75rem 2rem;
    font-size: 1.2rem;
    color: #FFF;
    background-color: #EF476F;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#game-form button:hover {
    background-color: #D43F61;
}



/* CONTACT INFO SECTION */
.contact-info {
    background-color: var(--sky); 
    padding: 4rem 2rem;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}

.contact-info h2 {
    font-family: "Sigmar", "Noto+Sans", sans-serif;
    font-size: 2.5rem;
    color: var(--black);
    margin-bottom: 1.5rem;
}

.contact-info p {
    font-size: 1.5rem;
    color: var(--black);
    line-height: 1.6;
    margin-bottom: 0;
}

/* BACK TO TOP BUTTON */
#back-to-top {
    display: block; 
    text-align: center; 
    margin: 3rem auto 2rem auto; 
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--columns-h3-color); 
    padding: 10px 20px;
    border: 2px solid var(--columns-h3-color);
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
    max-width: 200px; 
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    
}

#back-to-top:hover {
    background-color: var(--columns-h3-color);
    color: white; 
    cursor: pointer;
}

body.dark-mode #back-to-top {
    background-color: var(--canary); 
    color: var(--columns-h3-color); 
    border-color: var(--columns-h3-color);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2); 
}

body.dark-mode #back-to-top:hover {
    background-color: var(--columns-h3-color); 
    color: var(--canary); 
    transform: translateY(-2px); 
}

/* FOOTER*/
footer {
    background-color: var(--footer-bg);
    color: var(--footer-color);
    text-align: center;
    padding: 2rem 1rem;
    font-size: 1rem;
    letter-spacing: 0.5px;
    border-top: 4px solid #05A678; 
}

footer p {
    margin: 0;
    line-height: 1.6;
}