/* all fonts from 1001fonts.com */

@font-face {
  font-family: kot;
  src: url('fonts/kot.ttf');
}

@font-face {
  font-family: hornbill;
  src: url('fonts/hornbill.otf');
}

@font-face {
  font-family: massive;
  src: url('fonts/massive.ttf');
}

@font-face {
  font-family: koenig;
  src: url('fonts/koenig.otf');
}

@font-face {
  font-family: roboto;
  src: url('fonts/roboto.ttf');
}

@font-face {
  font-family: varela;
  src: url('fonts/varela.ttf');
}

body {
  font-family: varela;
  background-color: rgb(149, 55, 35);
}

h1 {
  font-family: kot;
  font-size: 38px;
  color: rgb(91, 147, 50);
  text-shadow: -3px 2px black;
}

h2 {
  font-family: koenig;
  text-align: center;
}

p {
  color: rgb(168, 141, 125);
}

iframe {
  border-radius: 20px;
  /* margin: 10px 2%; */
}

input[type=checkbox] {
  display: none;
}

a {
  font-family: koenig;
  color: rgb(100, 100, 255);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 8px;
}

a:hover {
  background-color: rgb(100, 100, 255);
  color: white;
}

p {
  /* display: none; */
  font-size: 18px;
}

h1 {
  text-align: center;
}

h2 {
  color: rgb(230, 146, 15);
}

div {
  background-color: white;
}

/* input[type=checkbox]:checked ~ p {
  display: block;
} */

.closed {
  display: block;
}

.opened {
  display: none;
}

input[type=checkbox]:checked ~ .closed {
  display: none;
}

input[type=checkbox]:checked ~ .opened {
  display: block;
}


.section {
  cursor: pointer;
  padding: 20px 20px;
  margin: 10px 0px;
  border-radius: 20px;
  border-style: solid;
  border-width: 8px;
  border-color: rgb(230, 146, 15);
}

.section:hover {
  background-color: rgb(238, 242, 196);
}

/*
.guild {
  border-color: rgb(220, 220, 255);
}

.seed {
  border-color: rgb(220, 255, 220);
}

.idea {
  border-color: rgb(255, 220, 220);
}

.guild:hover {
  background-color: rgb(240, 240, 255);
}

.seed:hover {
  background-color: rgb(240, 255, 240);
}

.idea:hover {
  background-color: rgb(255, 240, 240);
} */