* {
    box-sizing: border-box;
}

img {
    display: block;
    max-inline-size: 100%;
}

.website-bg {
    background: #D9CEBF;
}

/* header */

.header-container {
    background: #937D62;
    margin: auto;
    padding: 0 5rem;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;   
}

.header-logo {
    width: 4rem;
    margin: 0.8rem;
}

.header-links {
    /* background: yellow; */
    align-content: center;
    margin: 0.8rem;
}

.nav-list {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    /* background: grey; */
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    list-style: none;
}

/* types of containers for flexbox */

/* homepage block with selfie */
.hero-block {
    background: #D9CEBF;
}

/* title of page (eg: Abue) */
.title-block {
    text-align: center;
}

.container {
    background: #C9BBA6;
    max-inline-size: 1600px;
    margin: auto;
    padding-bottom: 1rem;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.center-text {
    text-align: center;
}

.center-content {
    align-items: center;
}

.bottom-padding {
    padding-bottom: 4rem;
}

.top-padding {
    padding-top: 4rem;
}

.home-category {
    background: #A59178;
    padding: 2rem;
    margin: 0.5rem;
    text-align: center;
}

.portfolio-item {
    background: #A59178;
    padding: 2rem;
    margin: 0.5rem;
}

.program-item {
    background: #A59178;
    padding: 0.5rem;
    margin: 0.5rem;
    flex-grow: 1;
    text-align: center;
}

/* back arrows to go back a page */
.back-arrow-size {
    /* background: red; */
    margin: 1rem 2.5rem;
    flex: 0 1 4rem;    
}

.back-arrow {
    background: #C9BBA6;
    max-inline-size: 1600px;
    margin: auto;
    padding: 0rem;

    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

/* visit website links on web design page */

.visit-website {
    /* background: teal; */
    max-inline-size: 1600px;
    margin: auto;
    padding: 0rem;

    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.inline-link {
    /* background: red; */
    margin: 0;
}

.inline-link-arrow {
    flex: 0 1 2.8rem;
    margin-inline-start:1rem;
}


/* flexbox sizes */

.third {
    flex: 0 1 30%;
}

.two-third {
    flex: 0 1 60%;
}

.half {
    flex: 0 1 45%;
}

.quarter {
    flex: 0 1 22%;
}

.tenth {
    flex: 0 1 15%;
}

/* footer */

.footer-container {
    background: #937D62;
    margin: auto;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center; 
}

.footer-item {
    /* background: red; */
    margin: 0.5rem;
    align-content: center;
}

.linkedin {
    /* background: yellow; */
    width: 2rem;
}

/* text */

p {
    /* background: yellow; */
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

h1 , h2 , h3, li {
    /* background: white; */
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

li {
    padding: 0 2rem;
}

/* links */

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: #8C2F39;
}

a:visited {
    color: #461220;
}

/* font size */

.hero-text {
    font-size: 6rem;
}

h1 , big-text {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

p , li {
    font-size: 1.5rem;
}

/* clears bg color of element */

.clear-bg {
    background: none;
}

/* for mobile sizes */

@media (max-width: 700px) {
    .container {
        flex-direction: column;
    }
}