@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Playwrite+GB+J+Guides:ital@0;1&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.home{
  background: url("https://uploads.onecompiler.io/44bt9rn68/44bsp46qp/c178c4c3-3548-429a-b236-f5bfe329d22a.png");
  background-size: cover; height: 100vh;
  font-family: "Berkshire Swash", serif;
}

.back ul{
  margin: 80px auto 0 auto;
  text-align: center;
}

/*fluff*/
.foo {
  width: 20vmin;
  height: 20vmin;
  display: grid;
  content: center;
  font-size: 3vmin;
  text-align: center;
  background: #F9F3EE;
  text-shadow: 0 0 .2em #fff;
  font-weight: 700;
}

.Larcion .foo {
  --kval: 0;
  --br: 50%;
  --cs: superellipse(var(--kval));
  border-radius: var(--br);
  corner-shape: var(--cs);
  box-sizing: border-box;
  border: 1vmin solid #5eb0e5; 
}
.Larcion .scp {
  --cs: scoop;
  --br: 10%;
  margin: 0 auto;
  padding: 10px;
  height: 200px;
  width: 300px;
  border: 2px solid #888;
}

.Oaks .foo {
  --kval: 0;
  --br: 50%;
  --cs: superellipse(var(--kval));
  border-radius: var(--br);
  corner-shape: var(--cs);
  box-sizing: border-box;
  border: 1vmin solid #5eb0e5; 
}
.Oaks .scp{
  --cs: scoop;
  --br: 10%;
  margin: 20px 50px;
  padding: 10px;
  width: 300px;
  border: 2px solid #888;
}

.WanderingOaks h2{
  text-align: justify;
  font-family: "Berkshire Swash", serif;
  color: white;
}

.WanderingOaks p{
  text-align: justify;
  font-family: "Berkshire Swash", serif;
  color: white;
}

.WOcontent h2{
  text-align: center;
  font-family: 'Berkshire Swash', serif;
  color: white;
}

.Network .foo {
  --kval: 0;
  --br: 50%;
  --cs: superellipse(var(--kval));
  border-radius: var(--br);
  corner-shape: var(--cs);
  box-sizing: border-box;
  border: 1vmin solid #5eb0e5; 
}
.Network .scp {
  --cs: scoop;
  --br: 10%;
  margin: 20px 1000px;
  padding: 10px;
  width: 300px;
  border: 2px solid #888;
}

.NetworkFlames {
  margin: 150px auto 0 auto;
  width: 500px;
}

.NOFcontent{
  margin: 80px auto 0 auto;
  text-align: center;
}

.Watch .foo {
  --kval: 0;
  --br: 50%;
  --cs: superellipse(var(--kval));
  border-radius: var(--br);
  corner-shape: var(--cs);
  box-sizing: border-box;
  border: 1vmin solid #5eb0e5; 
}
.Watch .scp {
  --cs: scoop;
  --br: 10%;
  margin: 20px 50px;
  padding: 10px;
  width: 300px;
  border: 2px solid #888;
}

.WatchfulEyes{
  font-family: 'Berkshire Swash', serif;
  color: white;
}

.WEcontent{
  font-family: 'Berkshire Swash', serif;
}

.Faith .foo {
  --kval: 0;
  --br: 50%;
  --cs: superellipse(var(--kval));
  border-radius: var(--br);
  corner-shape: var(--cs);
  box-sizing: border-box;
  border: 1vmin solid #5eb0e5; 
}

.Faith .scp {
  --cs: scoop;
  --br: 10%;
  margin: 20px 1000px;
  padding: 10px;
  width: 300px;
  border: 2px solid #888;
}

.WhereFaith {
  font-family: 'Berkshire Swash', serif;
}

.WOFLcontent {
  font-family: 'Berkshire Swash', serif;
}

.Forest .foo {
  --kval: 0;
  --br: 50%;
  --cs: superellipse(var(--kval));
  border-radius: var(--br);
  corner-shape: var(--cs);
  box-sizing: border-box;
  border: 1vmin solid #5eb0e5; 
}
.Forest .scp {
  --cs: scoop;
  --br: 10%;
  margin: 20px 50px;
  padding: 10px;
  width: 300px;
  border: 2px solid #888;
}

.FlowerForest {
  font-family: 'Berkshire Swash', serif;
}

.FOTFcontent {
  font-family: 'Berkshire Swash', serif;
}