body {
  background-color: #E1FFD8;
}

.banner {
  display: block;
  width: 80%;
  max-width: 900px;
  text-align: center;
  margin: 0 auto 0 auto;
  box-shadow: -1px -2px 1px inset LightGray, 3px 4px 1px inset White, 3px 4px 0 1px #D6D3FA;
  border: 1px solid #06009C;
}

.centered {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

#nav {
  width: 80%;
  max-width: 320px;
  margin-bottom: -5px;
  padding: 2px 10px 0;
  align-content: center;
}

.button {
  display: flex;
  justify-content: center;
  background-color: White;
  box-sizing: border-box;
  width: 20%;
  min-width: 100px;
  margin: 8px 0;
  height: 34px;
  text-decoration: none;
  font-family: "Chalkboard SE", monospace;
  border: 1px solid #06009C;
  text-align: center;
  padding: 5px 0;
  box-shadow: -1px -2px 1px inset LightGray, 3px 4px 1px inset White, 3px 4px 0 1px #D6D3FA;
  cursor: pointer;
}

a:link {
  color: #22B14C;
}

a:visited {
  color: #22B14C;
}

a:hover {
 opacity: .5;
}

/* Styles but link still doesn't work all around :/
.button:hover {
  background-color: #68DE8B;
  color: white;
} 
*/

.main {
  background-color: White;
  border: 1px solid #06009C;
  width: 80%;
  max-width: 900px;
  margin: 10px;
  overflow: auto;
  display: block;
  background-size: auto;
  background-origin: padding-box;
  background-clip: border-box;
  box-shadow: -1px -2px 1px inset LightGray, 3px 4px 1px inset White, 3px 4px 0 1px #D6D3FA;
}

.bigbox {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  margin: 0 15px 15px 15px;
}

.pbox, .obox {
  background-color: #F3F2FF; /*maybe change this color later*/
  box-sizing: border-box;
  min-width: 200px;
  min-height: 300px;
  display: inline-block;
  padding: 5px 10px 5px 10px; /* top, right, bottom, left */
  overflow: auto;
  flex: 1;
  margin: 10px;
  box-shadow: 3px 4px 0 1px #D6D3FA;
}

.pbox {
  width: calc(66% - 20px);
  flex: 2 1 0;
  text-align: left;
}

.obox {
  width: calc(33% - 20px);
  flex: 1 1 0;
}

.profilepic {
  width: 100%;
  max-width: 200px;
  height: 200px;
  object-fit: cover;
  border: 1px solid #06009C;
  margin: 10px;
}

.gallery-container img {
  width: 100%;
  max-width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 20px;
  padding: 6px;
  margin: auto;
  text-align: center;
}

.gallery-container { /* gallery forside og figure styrer det samme */
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px 0;
}

h2 {
  text-align: left;
  margin-bottom: 5px;
  max-width: 750px;
  font-family: "Chalkboard SE", monospace;
  color: #040070;
}

p {
  font-family: "Chalkboard SE", monospace;
  padding: 0 7px 0 7px;
  color: #040070;
}

.spbox {
  background-color: #F3F2FF;
  box-sizing: border-box;
  min-width: 300px;
  min-height: 400px;
  display: inline-block;
  padding: 5px 10px 5px 10px;
  overflow: auto;
  margin: 10px;
  box-shadow: 3px 4px 0 1px #D6D3FA;
  width: 825px;
  text-align: left;
}

.warning {
  background-color: #E34047;
  color: #FFCCCE;
  box-sizing: border-box;
  width: 70%;
  max-width: 700px;
  display: inline-block;
  padding: 15px 20px 15px 20px;
  overflow: auto;
  margin: 20px;
  text-align: center;
  font-family: "Chalkboard SE", monospace;
  border: 4px solid;
  border-color: #C40D33;
  border-radius: 4px;
}