:root {
    /* Colors: */
    --color1-blue: #1265Ba;
    --color2-green: #60b37b;
    --color3-yellowgreen: #99bc00;
    --color4-teal: #00968b;
    --accent-gray: #343633;
}

* {
    box-sizing: border-box;

}

body {
    font-family: "Markazi Text", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

h1 {
    margin: 0;
    padding: 10px 10px 30px 10px;
    font-weight: 700;
    font-size: 64px;
}

h2 {
    margin: 0;
    padding: 30px 10px 30px 10px;
    font-weight: 700;
    font-size: 52px;
}

h3 {
    margin: 0;
    padding: 0px 10px 0px 10px;
    font-weight: 600;
    font-size: 36px;
}

p,
ul {
    padding: 0px 10px 0px 10px;
    font-size: 30px;
    font-weight: 400;
    margin: 10px 0px 30px 10px;
}

ul {
    padding-left: 30px;
}

a {
    /* text-decoration:none; */
    color: var(--color4-teal);
}

img {
    padding: 20px;
}

.header-banner {
    height: 80px;
    background-position: left;
    padding-bottom: 30px;
    color: #ffffff;
}

.row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    padding: 10px;
}

.cell {
    flex-grow: 1;
    flex-basis: 100%;
}

#sidebar {
    align-self: flex-start;
    top: 0;
    flex-basis: 30%;
    text-align: center;
    font-size: 36px;
    font-weight: 600;
}

@media (min-width: 770px) {
    #sidebar {
        position: sticky;
        /* Not sure of the difference btw these two? */
        position: -webkit-sticky;
    }
}

#content {
    flex-basis: 70%;
}

.sidebar-item {
    text-decoration: none;
    padding: 0px 10px 0px 10px;
    margin: 0px 60px 40px 60px;
    border-right: solid;
    display: block;
}

/* Sliding color code from https://stackoverflow.com/questions/17212094/fill-background-color-left-to-right-css */
#about-link {
    color: var(--color1-blue);
    margin-top: 60px;
    background: linear-gradient(to right, white 50%, var(--color1-blue) 50%) left;
    background-size: 200%;
    transition: .3s ease-out;
}

#about-link:hover {
    color: white;
    border-color: var(--color1-blue);
    background-position: right;
}

#projects-link {
    color: var(--color2-green);
    background: linear-gradient(to right, white 50%, var(--color2-green) 50%) left;
    background-size: 200%;
    transition: .3s ease-out;
}

#projects-link:hover {
    color: white;
    border-color: var(--color2-green);
    background-position: right;
}

#resume-link {
    color: var(--color3-yellowgreen);
    background: linear-gradient(to right, white 50%, var(--color3-yellowgreen) 50%) left;
    background-size: 200%;
    transition: .3s ease-out;

}

#resume-link:hover {
    color: white;
    border-color: var(--color3-yellowgreen);
    background-position: right;
}

#contact-link {
    color: var(--color4-teal);
    background: linear-gradient(to right, white 50%, var(--color4-teal) 50%) left;
    background-size: 200%;
    transition: .3s ease-out;
}

#contact-link:hover {
    color: white;
    border-color: var(--color4-teal);
    background-position: right;
}

#intro-block {
    padding-left: 30px;
}

.section {
    min-height: calc(100vh);
}

.hello {
    color: var(--color1-blue);
}

#intro {
    font-size: 30px;
    color: var(--color1-blue);
}

#projects {
    color: var(--color2-green);
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
}

/* Basic card code from https://www.w3schools.com/howto/howto_css_cards.asp */
.project-card {
    background-color: var(--color2-green);
    color: #ffffff;
    /* Add shadows to create the "card" effect */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    /* flex: 1 1 0;
    width: 0; */
    flex-basis: 30%;
    margin: 10px 10px 10px 10px;
    max-height: 250px;
}

/* On mouse-over, add a deeper shadow */
.project-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
    padding: 10px 10px;
}

.break {
    flex-basis: 100%;
    height: 0;
}

#resume {
    color: var(--color3-yellowgreen);
}

#contact {
    color: var(--color4-teal);
}

#contact p {
    color: var(--accent-gray);
}

@media (max-width: 768px) {
    .row {
        flex-wrap: wrap;
    }
}