@font-face {
  font-family: "calson";
  src: url("./fonts/LibreCaslonText-Regular.ttf");
} 
@font-face {
  font-family: "gibson";
  src: url("./fonts/Gibson-Regular.ttf");
} 

html{
    scroll-behavior: smooth;
}

body {
    font-family:"calson";
    font-size:150%;
    /* background-color: #dadada; */
    /* background-color: #eaeaea; */
    /* background-color: #cacaca; */
    /* background-color: #042471; */
    background-color: #031b55;
    /* background-color: #021238; */
    /* background-color: #9bd7fc; */
}
h1 {
    text-align: center;
}
a { color: inherit; } 
.inner{
    margin: 3% 5%;
    background-color: #fff;
    border-radius: 2rem;
    border-style: outset;
    padding: 3rem;
}
.title-portrait {
    width:30%;
    border-radius: 50%;
}
.navbar {
    text-align:center;
}
.quotes {
    text-align:center;
}
.self-description {
    text-align:center;
}
.namedate .name {
    text-align: left;
    font-size: 2rem;
}
.namedate .date {
    text-align: right;
    
}
.namedate {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}
.display-element {
    display:flex;
    flex-flow: row nowrap;
    gap: 2rem;
    padding: 0.5rem;
    align-items: center;
    width:100%;
}
.display-element:hover{
    background-color:#eaeaea;

}
.display-content{
    width:100%;
    font-size: 1.5rem;
}
.display-image{
    width:6rem;
    height:auto;
}
.display-image-large{
    width:6rem;
    height:auto;
}
.description{
    text-align:left;
    font-size: 1.5rem;
}