@font-face {
  font-family: "agendaus";
  src: url(xtra/agendaurwtlig.ttf);
  font-weight: regular;
}

@font-face {
  font-family: "agendaus";
  src: url(xtra/agendaurwtbol.ttf);
  font-weight: bold;
}

a {
  color: #01634C;
  
}

body {
  background-image: linear-gradient(#BD0447, #DCCFE3);
  color: black;
  font-family: "agendaus";
  padding: 0.5vw;
  font-size: 100%;
  text-align: center;
}

header img {
  padding: 1rem;
  margin: auto;
  max-height: 10%;
}

footer {
  flex: 90%;
  margin: auto;
  padding: 0.5vw;
}

p {
  margin: auto;
}

.container {
  display: flex;
  margin: auto;
  padding: 0.5vw;
  max-width: 75%;
  max-height: 100%;
  flex-flow: row wrap;
  column-gap: 0.5vw;
  row-gap: 0.5vw;
}

.topbar {
  background-image: linear-gradient(to right, #BD0447, #DCCFE3);
  order: 1;
  border: solid white;
  border-width: 0 0 0.4vw 0;
  color: white;
  padding: 0.4vw;
  font-weight: bold;
  text-shadow: 0.1vw 0.1vw 0.4vw black;
}

.sidebar {
  background-color: white;
  border: solid #FDDA74;
  border-width: 0.5vw 0.5vw 0.5vw 0.5vw;
  box-shadow: 0.75vw 0.75vw #FCC527;
  margin: 1%; 
  padding: 0;
  flex: 15%;
  max-height: fit-content;
}
.sidebar li {
  border: outset 0.5vw #FDDA74;
  background-color: white;
  text-align: center;
  padding: 0;
  margin: auto;
  list-style: none;
  order: 2;
  font-weight:bold;
}
.sidebar li:hover {
  border: groove 0.5vw #FDDA74;
}
.sidebar #sel {
  border: groove 0.5vw #FDDA74;
  background-color: white;
}
.sidebar #sel:hover {
  pointer-events: none;
}

.profile {
  display: flex;
  flex-flow: row wrap;
  margin: auto;
  padding: 0.5vw;
  order: 1;
}
.profile h1 {
  text-align: center;
  padding: 0.2rem 0 0 0;
}
.profile img {
  max-width: 100%;
}

.content {
  background-color: white;
  border: solid #FDDA74;
  border-width: 0.5vw 0.5vw 0.5vw 0.5vw;
  box-shadow: 0.75vw 0.75vw #FCC527;
  margin: 1%;
  flex: 75%;
}
.content p {
  max-width: 90%;
  padding: 0.5vw;
}
.content img {
  max-width: 60%;
  padding: 0.5vw;
}

ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
  padding: 1vw;
  margin: auto;
  font-weight: Bold;
}

.bookshelf {
  display: flex;
  flex-flow: row wrap;
  row-gap: 1rem;
  column-gap: 1rem;
  margin: auto;
  justify-content: space-around;
  align-items: baseline;
}

.book {
  width: 20%;
  max-height: 100%;
}
.book img {
  max-width: 100%;
}
.book p {
  font-weight: bold;
  max-width: 100%;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  row-gap: 1vw;
  column-gap: 1vw;
  justify-content: space-around;
  align-items: baseline;
}

.photo {
  display: flex;
  flex-flow: column wrap;
  border: outset 0.2rem #DE5909;
  background-color: #DE5909;
  justify-content: center;
  max-width: 40%;
  margin: 1%;
}
.photo img {
  display: flex;
  order: 1;
  object-fit: contain;
  margin: auto;
  max-width: 100%;
  padding: 0;
}
.photo p {
  order: 2;
  color: white;
  width: max-content;
  margin: auto;
  padding: 0.5vw;
}

h4 {
  padding: 0;
  margin: 0;
}

/* MOBILE */

@media only screen and (max-width: 500px) {
  
body {
  text-align: center;
  align-content: center;
}

.sidebar {
  display: flex;
  flex-flow: column wrap;
  max-width: 100%;
  order: 1;
  }

.profile {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
}

.profile img {
  padding: 0;
}

.profile h1 {
  max-width: 80%;
  max-height: 80%;
  justify-content: center;
  padding: 1.2rem;
}
.profile h3 {
  display: none;
}

.sidebar li {
  order: 3;
}

.container {
  max-width: 90%;
}

.content {
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.book {
  font-size: 75%;
  text-align: justify;
}
}