h1 {
    font-family: "Henny Penny", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: xx-large;
    display: flex;

    color: #C393A5;


}

.headerimg {
    display: grid;
    justify-content: space-between;
    width: 100%;

}

body {
    background-color: #EBE6E8;
}

.headshot {
    width: 40%;
    height: 40%;
    padding: 1%;
    margin-top: 10px;
}


.mainpage {
    display: flex;
    margin-top: 10px;
}

body {

    display: grid;
    font-family: "Elsie", serif;
    font-style: normal;
    color: #404934;
    font-size: large;
    padding: 5%;
}

.bodytext {
    padding: 0%;
}

.desktop {
    display: flex;
    justify-content: space-evenly;
    font-family: "Henny Penny", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: xx-large;
    text-decoration: none;
}

.mobile {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.mobile.open {
    display: flex;
}

a {
    text-decoration: none;
    color: #C393A5;
}

.hamburger {

    font-family: "Henny Penny", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: xx-large;
    display: flex;
    justify-content: center;
    color: #C393A5;
    background: none;
    cursor: pointer;
    border-color: #C393A5;
    border-style: dotted;

}


.hamburgermenu {
    display: none;
}

.divider {
    border-top: 2px dotted #C393A5;
    width: 100%;
    align-items: center;
}

h1 {
    display: grid;
    font-family: "Elsie", serif;
    font-style: normal;
    color: #C393A5;
    font-size: xx-large;

}

h2 {
    display: flex;
    justify-content: space-evenly;
    font-family: "Henny Penny", system-ui;
    font-weight: 400;
    color: #C393A5;
    font-style: normal;
    font-size: xx-large;
    text-decoration: none;
}

h3 {
    display: grid;
    font-family: "Elsie", serif;
    font-style: normal;
    color: #C393A5;
    font-size: xx-large;
    text-align: center;
}

/* writing */

.writingimg {
    display: grid;
    justify-content: space-between;
    width: 100%;
}

.wednesday {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.redkanoo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.feeblelittlehorse {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.manning {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.record {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.otherwork {
    text-align: center;
}

/* design */

    

.designimg {
    display: grid;
    justify-content: space-between;
    width: 100%;
}

.photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
}

.photo-grid img {
    width: 100%;
    height: auto;
}


/* ai skills */
.aiimg {
    display: grid;
    justify-content: space-between;
    width: 100%;
}

/* human skills */
.humanimg {
    display: grid;
    justify-content: space-between;
    width: 100%;
}

.maintexthuman{
    text-align: center;
}

.tagline{
    text-align:center;
    color: #aba757;
}

/* note to self: add in here if you want it to show up on MOBILE lol */

@media screen and (max-width: 768px) {
    .mainpage {
        flex-direction: column;
        align-items: center;
    }

    .headshot {
        width: 80%;
        height: auto;
    }

    .desktop {
        display: none;
    }

    .hamburgermenu {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .mobile {
        display: none;
    }


    .wednesday {
        display: grid;
        justify-content: space-between;
        width: 100%;
    }

    .redkanoo {
        display: grid;
        justify-content: space-between;
        width: 100%;
    }

    .feeblelittlehorse {
        display: grid;
        justify-content: space-between;
        width: 100%;
    }

    .manning {
        display: grid;
        justify-content: space-between;
        width: 100%;
    }

    .record {
        display: grid;
        justify-content: space-between;
        width: 100%;
    }

    .divider {
        display: none;
    }

    .photo-grid {
        grid-template-columns: 1fr;
    }

}