/* ===== General/Base Styles ===== */
body {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    max-width: 70%;
    min-width: 900px;
    height: 100%;
    margin: auto;
    text-align: center;
    border-left: 3px solid #877e7e;
    border-right: 3px solid #877e7e;
    background-color: #afa79c;
}

main { background-color: rgb(247, 242, 236); }

h3 {
    font: 30px/20px 'Trebuchet MS', sans-serif;
    color: #af4b4b;
}

h5 {
    width: 50%;
    padding: 10px 0 10px 0;
    margin: auto;
    background-color: #f6c0c0;
    border-radius: 10px;
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    font: 20px/20px 'Trebuchet MS', sans-serif;
    color: #524d47;
}

a { text-decoration: none; }

p {
    font-size: 15px;
    color: #524d47;
}

hr {
    width: 99%;
    border-top: 5px dotted #afa79c;
    border-bottom: none;
}

.hr-white {
    width: 60%;
    border-top: 5px dotted #f7f2ec;
}

.hr-grey {
    width: 60%;
    border-top: 5px dotted #afa79c;
    border-bottom: none;
}

/* ===== Navigation Bar ===== */
header {
    top: 0;
    width: 70%;
    min-width: 900px;
    margin: auto;
    position: fixed;
    z-index: 5;
}

nav {
    background-color: #f7f2ec;
    border-bottom: 5px dotted #afa79c;
    list-style: none;
    margin: auto;
}

nav ul li, a {
    display: inline-block;
    color: #524d47;
    padding: 0px 10px 0px 10px;
}

nav ul a {
    padding: 5px 10px 5px 10px;
    background-color: rgb(246, 192, 192);
    border: 2px solid white;
    border-radius: 10px;
    text-decoration: none;
}

#navbar-container {
    display: flex;
    justify-content: space-between;
}

#navbar-logo {
    padding: 5px 0 0 5px;
}

#navbar-sections {
    padding-right: 20px;
}


/* ====== About HTML ====== */

/* = Home Section = */
#home-image {
    height: 100%;
    max-width: 100%; 
    max-height: 100%; 
    height: auto;
    display: flex; 
    justify-content: center;
    padding-top: 75px;
}

/* = About Section = */
#about-section {
    background-color: rgb(246, 192, 192);
    width: 100%;
    padding: 20px 0 20px 0;
}

#about-text, #learning-section p {
    padding: 0 125px 0 125px;
    font-size: 15px;
}

/* = Learning Section = */
#certificates-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.certificates-img-container {
    width: 275px;
    height: auto;
    display: inline-block;
}

#certificate-python {
    display: inline-block;
    width: 100%;
    height: auto;
}

#certificate-html {
    display: inline-block;
    width: 100%;
    height: auto;
}

/* = 30 Nites of Code = */
#nites-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: auto;
}

.nites-div {
    padding: 0 10px 0 10px;
    align-content: center;
}

.nites-link {
    text-decoration: none;
    font: 20px/20px 'Trebuchet MS', sans-serif;
    color: #af4b4b;
}

.nites-pets {
    background-color: #f7f2ec;
    border: 5px #afa79c dotted;
    border-radius: 50%;
}

/* = Progress Bar = */
.progress-bar-row {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    width: 80%;
    margin: auto;
    padding-top: 10px;
}

.progress-bar-container { 
    background-color: #f7f2ec; 
    width: 40%; 
    margin: auto;
    border-radius: 15px;
    border: 2px solid #afa79c;
    margin-top: 10px;
} 

.skill { 
    background-color: #af4b4b; 
    color: white; 
    padding: 1% 1% 1% 3%; 
    text-align: left; 
    font-size: 15px; 
    border-radius: 15px;
} 

.python { width: 60%; }
.sql { width: 20%;}
.html { width: 50%; }
.css { width: 40%; }
.javascript { width: 10%; }
.figma { width: 60%; }


/* ====== Projects HTML ====== */

#projects-section {
    background-color: #f7f2ec;
    width: 90%;
    margin: auto;
    padding: 0px 0 20px 0;
}

#projects-container {
    padding: 0 75px 0 75px;
    font-size: 15px;
}

.future-text {
    font-size: 13px;
    width: 75%;
    margin: auto;
    padding: 10px 0 10px 0;
}

.project-links {
    text-decoration: none;
    width: 100%;
    margin: auto;
}

/* = Cats in Crocs =*/
#cic-container { width: 100%; }

/* Cic Cats*/
#cic-cats { display: inline-block; }

.cic-cats-img {
    width: 18%;
    padding: 5px;
}

/* Cic Intro */
#cic-intro {
    display: flex;
    flex-wrap: wrap;
}

.cic-intro-container { width: 50%; }

.cic-intro-container p { margin: 0; }

.cic-intro-img {
    width: 90%;
    border-radius: 10px;
    padding: 5px;
}

/* Cic Puzzles*/
#cic-puzzles {
    display: inline-block;
    justify-content: center;
}

.cic-puzzles-img {
    width: 32%;
    padding: 3px;
}


/* ====== Contact Page ====== */

#contact-section {
    width: 90%;
    margin: auto;
    padding: 0px 0 50px 0;
    display: flex;
}

/* Contact Links */
.contact-container-1 {
    width: 30%;
    padding-top: 10px;
}

.contact-icon {
    padding-top: 5px;
    width: 120px;
}

/* Contact Form */
.contact-container-2 { width: 60%; }

#contact-form {
    width: 100%;
    text-align: left;
}

.contact-label { display: block; }

.contact-input {
    width: 90%;
    padding: 10px 0 10px 0;
    margin: 5px 0 15px 0;
    border-radius: 10px;
}

#submit-button {
    padding: 10px;
    border: 5px solid white;
    border-radius: 10px;
    background-color: #f6c0c0;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #524d47;
    font-size: 15px;
}

/* ====== Footer ====== */

footer {
    background-color: #f7f2ec;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 5px dotted #afa79c;
}

footer p { color: #524d47; }