/*--------------------GENRAL FORMAT--------------------------*/
:root {
    /* all my variables */
    --offwhite: #fffbf5;
    --yello: #fff0cd;
    ---bloo: #d3edf1;
    --sand: #d3b29e;

    /*general background color*/
    background-color: var(--sand);
}

/*font for entire page*/
body {
    font-family: Arial, Helvetica, sans-serif;
}

/*main header - says ella kohlmann nice n big and bold*/
h1 {
    text-align: center;
    font-weight: 800;
}

/*section headers*/
h2 {
    text-align: center;
    font-weight: 700;
}

/*play covers*/
h4 {
    text-align: center;
    font-weight: 600;
}

/*general formatting for each section*/
section {
    min-height: fit-content;
    /* background-color: var(--offwhite); */
    width: 100%;
    left: 0px;
    margin: 0px;
    height: 100%;
}



/*basic img format*/
img {
    width: 100%;
    aspect-ratio: initial;
}

/*footer*/
footer {
    text-align: center;
    font-size: 12px;
    margin: 0 ;
    /* position:fixed;
    bottom: 0px; */
    width: 100%;
    padding: 2px;
    background-color: var(--sand);
}

/*specifc for the h2 in plays section*/
.playheader {
    padding-top: 15px;
    margin-top: 5px;
}

/*--------------------nav ba----------------------r*/
nav {
    display: flex;
    background-color: var(--yello);
    justify-content: center;
    position: fixed;
    top: 0px;
    width: 110%;
    opacity: 100%;
    left: -20px;
}

/*theres nothing in the header, but it needs to be taller than the navbar*/
header {
    height: 40px;
}

/*the links in the nav*/
.navlink {
    color: black;
    padding: 5px;
    margin: 10px;
    border: 1px var(--sand) solid;
    text-decoration: none;
}

/*change nav link color when hover*/
.navlink:hover {
    background-color: var(---bloo);
}

/*--------------------SECTION 1 BIO FORMAT-------------------*/
/*bio and headshot section (section1)*/
.home {
    display: flex;
    top: 50px;
    position: relative;
    margin: 10px;
    padding: 10px;
    justify-content: center;
    flex-wrap: wrap-reverse;
    background-color: var(--offwhite);
    width: 100%;
    left: -20px;
}

.bio {
    width: 60%;
    margin-right: 50px;
}

.headshot {
    width: 30%;
    left: 10px;
    display: flex;
    justify-content: center;
}

.headshotpic {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
}
/*--------------------SECTION 2 PLAYS FORMAT-----------------*/
/*specific formatting for the 2nd section (plays)*/
.section2 {
    margin-top: 50px;
    background-color: var(--sand);
}
/*Titles*/
.play-title {
    font-style: oblique;
    font-weight: 700;
    color: black;
    text-decoration: none;
}

/* a flexbox that contains the plays */
.playbox {
    display: flex;
    align-items: center;
    background-color: var(--sand);
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    flex-wrap: wrap;
}
/*specific box for each play*/
.play {
    /* border: 2px solid var(---bloo); */
    width: 25%;
    margin: 10px;
    border-radius: 10px;
    background-color: var(--yello);
    min-width: 351px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
/*hover on a play box*/
.play:hover {
    box-shadow: black 2px 10px 10px;
    background-color: var(--yello);
    opacity: 90%;
        cursor: pointer;
}

/*square the covers*/
.cover {
    text-align: center;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

/* for all images */
.sample-img {
    display: flex;
    background-color: var(--yello);
    height: 300px;
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: start;
}
/*div for the teaser and description*/
.desc-div {
    position: absolute;
    margin-left: 30px;
    margin-right: 30px;
    width: 18%;
    min-width: 345px !important;
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
/*italics bit a tthe top of hte desc*/
.teaser {
    color: black;
    background-color: var(--yello);
    width: 90%;
    font-size: 15px;
    font-style: italic;
    margin: 0px;
    margin-top: 5px;
    margin-bottom: 2px;

}
/*the actal descriptn*/
.play-desc {
    color: black;
    background-color: var(--yello);
    width: 90%;
    font-size: 15px;
    margin-bottom: 0;
}

/*button at the bottom of description that takes you to the full deets pages*/
.detail-btn {
    background-color: var(--yello);
    margin: 0px;
    border-radius: 4px;
    bottom: 2px;
    position: relative;
    border: none;
}
/*on hover make it look clickable*/
.detail-btn:hover {
    background-color: var(--sand);
    cursor: pointer;

}
/*--------------------SECTION 3 CONTACT FORMAT---------------*/
/*DIV THAT HOLDS CONTACT STUFF*/
.contact-div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
    margin-bottom: 60px;
}
/*EMAIL FORMAT*/
.email {
    color: black;
    text-decoration: none;
}

.email:hover {
    background-color: var(---bloo);
    text-decoration: solid black 1px;
    cursor: pointer;
}

/* .contactInfo {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
} */

/*HOLDS SOCIAL MEDIA*/
.socials-box {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
}
/*SINGLE SOCIAL MEDIA*/
.a-social {
    display: flex;
    flex-direction: column;
    margin: 5px;
}

/*THE IMAGE*/
.social-icon {
    width: 50px;
    height: 50px;
}

.social-icon:hover {
    box-shadow: var(---bloo) 2px 5px 5px;
    background-color: var(---bloo);
    border-radius: 10px;
    cursor: pointer;
}

.socials-text {
    font-size: x-small;
}

.indent {
    margin-left: 10px;
}
/*--------------------FOOTER FORMAT--------------------------*/


.heather a {
    font-size: x-small;
    color: black;
    width: fit-content;
    margin-bottom: 5px;
}


/* ---------------mobile formatting ------------------*/
@media (max-width: 700px) {
    .home {
        flex-direction: row;
    }

    .headshot {
        width: 200px;
        margin: auto;
    }

    .bio {
        width: 100%;
        margin: auto;
    }


/* --------------ARCHIVE---------------------------------
.popup {
    position: fixed;
    top: 25%;
    background-color: var(---bloo);
    font-size: xx-large;
    width: 60%;
    height: max-content;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    border: 2px black solid;
    padding-top: 5px;
}

.close-btn {
    font-size: medium;
    padding: 3px;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 30%;
    border: 1px black solid;
    border-radius: 5px;
}

.close-btn:hover {
    background-color: var(--sand);
    cursor: pointer;
} */
}