:root{
    --accent: #d8b5ae;
    --bg:  #262729;
}



body {
    background-color:var(--bg);
    color: white;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    width: 900px;
    margin: auto;
}


header {
    /* height: auto; */
    display: flex;
    justify-content: center;
    flex-direction: column;
    
}

nav {
    background-color: rgb(25, 23, 28);
    border-radius: 9px;
    text-align: center;
    display: flex;
    /*vertical-align: middle; */

}

nav a {
    padding:1em 0em;
    margin: 0em 1em;
    display: inline-block;
    color: grey;
    /* width: 50px; */
    text-align: center;
    text-decoration: none;
    font-size: medium;
    font-weight: bold;
    border-radius: 9px;
    transition: color 0.25s;
}

nav a:hover {
    color:white;
    /* font-weight: bolder; */
}

main {
    margin-top: 1em;
    /* display: flex; */
    /* flex-direction: column; */
    /* columns: 2; */
}


#bio_2_columns {
    display: grid;
    grid-template-columns: 15% 85%;
    column-gap: 1em;
}

/* main div {
    border: solid; 
    padding: 0.1em;
} */

img {
    width: 100%;
    border-radius: 9px;
}

a {
    color:var(--accent);
    transition: color 0.25s;
}
main a:hover {
    transition: color 0.25s;
    color:white;
}

a .icon {
    background-color:var(--accent);
    transition: background-color 0.25s;
}

a .icon:hover {
    transition: background-color 0.25s;
    background-color:white;
}

#socials {
    padding: 10%;
    display:flex;
    /* flex-wrap: wrap; 
    flex-direction: column; */
}

#socials a {
    width:100%;
    display: flex;
    justify-content: center;
}


h2 {
    color: grey;
}

.pres_type {
    color: grey;
}

.talk {
    display: grid;
    column-gap: 1em;
    grid-template-columns: 6fr 1fr 3fr;
}

.talk .collapsable {
    display: grid;
    column-gap: 1em;
    grid-template-columns:1fr 4fr; 
}

@media only screen and (max-width: 947px) {
    body {
        width: 90%;
    }

    .icon_wrapper {
        display: flex;
        /* justify-self: center;
        justify-content: center; */
        /* align-items:; */
        width: 40px;
        height: 40px;
    }

    .collapsable .icon_wrapper {
        margin-bottom: 1em;
    }

    .talk .collapsable, .collapsable {
        flex-direction: column;
        grid-template-columns: 1fr;
    }

    #bio_2_columns {
        grid-template-columns: calc(30%*0.9) calc(70%*0.9);
    }
    
}


#contact {
    text-align: center;
}

#ephyra_logo {
    display: inline-block
}

#ephyra_logo_container {
    text-align: center;
    padding-top: 0em;
    padding-bottom: 1.5em;
    /* width:100%;
    margin: 0 auto; */
}