@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
/* imports the 'Aboreto'  font*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
/* imports 'Playfair Display'  font */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap');
/* imports 'Monospace'  font */

h1{
    font-family: 'Aboreto', cursive;
    font-weight: 900;
    -webkit-text-stroke: 1px #29345c;
    text-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    color: #29345c;
    justify-content: center;
    align-items: center;
    text-align:center;
}

h3, h4, h5{
    font-family: 'Aboreto', cursive;
    color: #29345c;
    justify-content: center;
    align-items: center;
    text-align:center;
}

h2{
    font-family: 'Playfair Display', cursive;
    color: #252525;
    font-size: large;
    justify-content: center;
    align-items: center;
    text-align:center;
}

p{
    font-family: 'Playfair Display', monospace;
    color: #252525;
    font-size: medium;
    padding: 0 40px 0 40px;
}

a{
    text-decoration: none; /*removes the underline & color*/
    font-family: 'Aboreto', cursive;
    justify-content: center;
    align-items: center;
    text-align:center;
    color: #000000;
}

a:hover{
    color: #1f2032; /*yellow gold*/
}

a:active{
    color: #2a2b51; /*red gold*/
}

a:visited,a:link{
    color: #525734; /*green gold*/
}

body{
    font-family: 'Aboreto', cursive;
    background-color: #d5a23b;
    margin: 0;
    padding: 0;
}

.navigation {
    background-color: #29345c;
    padding: 0;
    margin: 0;
    position: sticky;
    top: 0;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.navigation li {
    margin: 0;
    padding: 0;
}

.navigation a {
    display: block;
    padding: 15px 20px;
    color: #ffffff;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.navigation a:hover {
    background-color: #1f2032;
    color: #d5a23b;
}

.navigation a:active {
    background-color: #2a2b51;
}

footer{
    font-family: 'Playfair Display', cursive;
    color: #000000;
    font-size: small;
    padding: 20px;
    justify-content: center;
    align-items: center;
    text-align:center;
    
}

.centered {
    margin-left: auto;
    margin-right: auto;
    display: block;
    justify-content: center;
    align-items: center;
    text-align:center;
    padding: 20px;
}

img {
    border-radius: 50%;
}

.biography-end {
    margin-bottom: 60px;
}

.header {
    
    background-color: #e9e9e9e3;
    grid-column-start: 1;
    grid-column-end: end;
    grid-row-start: 1;
    grid-row-end: 1;
}

.flex-container{
    display: flex;
    border: 5px dashed rgba(187, 61, 61, 0);
    height: 400px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.container{
        display: grid;
        grid-template-columns: 100px 300px 200px;
        grid-template-rows: 100px 200px;
        column-gap:10px;
        row-gap:15px;
}