:root {
    --primaryColor: #051b24;
    --secondaryColor: #051216;

    --borderColor: #07303f;
    --borderRadius: 7px;

    --primaryText: cornsilk;
    --secondaryText: #e8dbc9;

    --boxColor: #052b3a;
    --boxShadow: -3px 3px 10px 1px rgba(0,0,0,0.33);

    --introBoxColor: #22819e50;
    --introBoxBorderColor: #22819e;

    --buttonColor: #052b3a;

    --headerFont: 'Bungee', cursive;
    --basicFont: 'Baloo 2', cursive;
    --textShadow: -4px 4px 3px rgba(0, 0, 0, 0.12);
}

*{
    transition: 0.5s;
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin: 0;
    background-color: var(--primaryColor);
}

h1 { font-size: 55px; }
h2 { font-size: 35px; }
h3 { font-size: 30px; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 15px; }

h1, h2, h3, h4, h5, h6, strong {
    color: var(--primaryText);
    font-family: var(--headerFont);
    text-shadow: -1px 1px 2px var(--secondaryColor), -6px 4px 2px rgba(0, 0, 0, 0.12);
    margin: 21px 0px 16px;
    text-align: center;
}

p, li, span, input, textarea {
    margin: 0px;
    color: var(--secondaryText);
    font-family: var(--basicFont);
    text-shadow: var(--textShadow);
}

div p:last-of-type {
    margin-bottom: 21px;
}

a {
    text-decoration: none;
    color: var(--introBoxBorderColor);
    padding: 2px 5px;
    border-radius: var(--borderRadius);
}
a:hover {
    color: var(--primaryText);
    background-color: var(--buttonColor);
    border: 2px solid var(--borderColor);
}

ul {
    list-style: none;
    padding: 0;
}
 
hr {
    color: var(--borderColor);
}

.style-one {
    background-color: var(--primaryColor);
    border-bottom: 2px solid var(--borderColor);
    overflow: auto;
    
}

.style-two {
    background-color: var(--secondaryColor);
    border-bottom: 2px solid var(--borderColor);
    overflow: auto;
}

.main-container {
    width: 1200px;
    margin: 0 auto;
}

#greet-container {
    display: grid;
    text-align: center;
    align-content: center;
    min-height: 10em;
}

#intro-container {
    background-color: var(--secondaryColor);
    border: 2px solid var(--borderColor);
    border-radius: var(--borderRadius) var(--borderRadius) 0px 0px;
    border-bottom: none;
    box-shadow: var(--boxShadow);

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3em 27em;
    grid-template-areas: 
        'navigation navigation'
        'left-column right-column'
    ;
}

.navigation-container {
    grid-area: navigation;
    border-bottom: 2px solid var(--borderColor);
    border-radius: var(--borderRadius) var(--borderRadius) 0px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--primaryColor);
}

.aesthetic-control-buttons {
    display: flex;
    padding-left: 15px;
}

.control-button {
    background-color: blue;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    margin-right: 15px;
    box-shadow: -1px 1px 3px 1px rgba(0, 0, 0, 0.699);
}
#control-1 {
    background-color: rgba(255, 0, 0, 0.699);
}

#control-2 {
    background-color: rgba(255, 255, 0, 0.699);
}

#control-3 {
    background-color: rgba(0, 128, 0, 0.699);
}

#navigation {
    padding-right: 15px;
}

#navigation li {
    display: inline;
    margin-left: 5px
}


.left-container {
    grid-area: left-column;
    margin-top: 50px;
}

#hero-image {
    display: block;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    /* object-fit: contain; */
    border: 3px solid var(--borderColor);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
}

#theme-swatch-container {
    display: flex;
    justify-content: center;
}

.theme-swatch {
    height: 30px;
    width: 30px;
    border: 2px solid var(--borderColor);
    border-radius: var(--borderRadius);
    background-color: blanchedalmond;
    margin-right: 7px;
    cursor: pointer;
    box-shadow: -2px 2px 7px 2px rgba(0,0,0,0.33), 1px -1px 3px 4px rgba(0, 0, 0, 0.1) inset;
}

.theme-swatch:hover {
    box-shadow: -2px 2px 7px 4px rgba(0, 0, 0, 0.5);
    border: 2px solid var(--borderColor);
}

#creme-theme {
    background-color: #F3F2EE;
}

#blue-theme {
    background-color:#7db0de;
}

#green-theme {
    background-color: #103d23;
}

#dark-theme {
    background-color: #07303f;
}

.right-container {
    grid-area: right-column;
    display: flex;
    align-items: center;
}
#objective-statement-shadow {
    background-color: var(--boxColor);
    border-radius: var(--borderRadius);
    width: 300px;
    height: 121px;
    padding: 30px 0px 0px 30px;
}

#objective-statement {
    width: 300px;
    height: 121px;
    padding: 10px;
    border: 2px solid var(--introBoxBorderColor);
    background-color: var(--introBoxColor);
    position: relative;
}

#objective-statement p {
    margin: 0px;
}

.corner {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid var(--introBoxBorderColor);
    background-color: var(--primaryColor);
    position: absolute;
}

#top-left-corner {
    top: -7px;
    left: -7px;
}
#top-right-corner {
    top: -7px;
    right: -7px;
}

#bottom-right-corner {
    bottom: -7px;
    right: -7px;
}
#bottom-left-corner {
    bottom: -7px;
    left: -7px;
}

#about-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 100px;
    margin-bottom: 24px;
}

#about-me {
    margin: 0px 25px;
    text-align: center;
}
#about-me p {
    padding: 0px 12px;
}

.social-links {
    display: flex;
    justify-content: space-evenly;
}

#expertise-container {
    margin: 0px 25px 24px;
    text-align: center;
}

#expertise {
    display: flex;
    justify-content: space-evenly;
    border-radius: var(--borderRadius);
    background-color: var(--boxColor);
    text-align: center;
}

#projects-container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    background-color: var(--primaryColor);
    margin-bottom: 30px;
}

.project {
    background-color: var(--secondaryColor);
    border-radius: var(--borderRadius);
    box-shadow: var(--boxShadow);
    display: flex;
    flex-direction: column;
    margin: 16px;
    width: 360px;
}

.thumbnail {
    margin: 20px 20px 0px;
    border-radius: var(--borderRadius);
    height: 200px;
}

.project-title {
    margin: 0px;
    padding: 6px 0;
}

.project-info {
    margin: 10px 20px;    
}

.project-details {
    text-align: center;
    padding: 0px 5px;
}

.project-links {
    margin: 5px 0px;
    display: flex;
    justify-content: space-between;
}

#contact-form {
    display: flex;
    flex-direction: column;
    max-width: 650px;
    border-radius: var(--borderRadius);
    margin: 0px auto 32px;
    padding: 18px;
    background-color: var(--primaryColor);
}

::placeholder {
    color: var(--primaryText);
    opacity: 1;
}

.input-field {
    padding: 7px 15px;
    margin: 9px;
    border: none;
    border-radius: var(--borderRadius);
    background-color: var(--secondaryColor);
    font-size: 14px;
    resize: none;
}

#contact-button {
    color: var(--secondaryText);
    padding: 10px 0px;
    margin: 9px;
    border: 1px solid var(--borderColor);
    border-radius: var(--borderRadius);
    background-color: var(--buttonColor);
    font-size: 16px;
}

@media screen and (max-width: 1221px) {
    .main-container {
        width: 90%;
    }
}
@media screen and (max-width: 840px) {
    #intro-container {
        grid-template-columns: 1fr;
        grid-template-areas: 
        'navigation'
        'left-column'
        'right-column'
        ;
    }

    .right-container {
        justify-content: center;
        margin-bottom: 75px;
    }
    #about-container {
        gap: 0px;
    }
    
}
@media screen and (max-width: 800px) {
    #objective-statement-shadow {
        width: 225px;
    }

    #objective-statement {
        width: 225px;
        padding-bottom: 5px;
    }

    #objective-statement h3 {
        line-height: 0.9;
    }

    #expertise-container h4 {
        margin-top: 0px;
        
    }
}