html, body {
    margin: 0;
    padding: 0;
}


html {
    background-image:url(images/abe5.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    height: 100%;
    background-color: #f9f5f2;
    font-family: "Gaegu";
}

.flex {
    display: flex;
    flex:auto;
    width: 60vw;
}


.navbar {
    text-align: center;
    height: 86vh;
    background: radial-gradient(circle,rgba(227, 202, 202, 0.723) 0%, rgba(148, 117, 117, 0.685) 100%); 
    color: black;
    margin-top: 20px;
    border: 2px solid #4c3737;
    flex-grow: .5;
    margin-right: 20px;
}

.navbar h1 {
    color: black;
     width: 90%;
     text-align: center;
     background-color:#4c3737b6;
     margin: auto;
     margin-top: 10px;
     margin-bottom: 7px;
}

.navbar h2 {
    color: black;
     width: 90%;
     text-align: center;
     background-color:#4c3737b6;
     margin: auto;
     margin-top: 10px;
     margin-bottom: 7px;
}


.nav-link {
    text-align: left;
    margin-left: 4%;
    font-size: xx-large;
}

.nav-link a {
    color: rgb(97, 77, 76);
}

.container {
    flex-grow: 2.5;
    text-align: left;
    height: 86vh;
    background: radial-gradient(circle,rgba(227, 202, 202, 0.723) 0%, rgba(148, 117, 117, 0.685) 100%);
    width: 190px;
    color: black;
    margin-top: 20px;
    border: 2px solid #4c3737;
    padding-left: 2%;
    padding-right: 2%;
    font-size: large;
    overflow-y: scroll;

}


.container-pagedoll {
  float: right;
  width: 15%;
  position: absolute;
  height: auto;
  margin-top: -18%;
  margin-left: 50%;
  padding-left: 20px;
}


.container h1 {
    color: black;
     width: 100%;
     text-align: center;
     margin-top: 10px;
     background-color:#4c3737b6;
}

.container h2 {
    color: black;
     width: 99%;
     text-align: center;
     margin-top: 10px;
     background-color:#4c3737b6;
}

.container-text2 {
    margin-right: 14%;
}