@font-face { 
font-family:'Borel';
src: url('https://bitter-sweet.neocities.org/fonts/Borel.ttf'),
url('Borel.ttf');
}

html, body {
  height:100%;
  width:100%;
  padding:0;
  margin:0;  
}
body {
  background-color: #eee;}
#wrapper {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 100px 1fr 30px;
  row-gap: 15px;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "content"
    "footer";
}
#wrapper .titlename {
  height: 150px;
  min-width: 100%;
  grid-row: 1;
  grid-area: header;
  background-color: #566c8f;
}
#wrapper .titlename h1 {
  padding:0px;
  font-family:borel;
  color:#fff;
  letter-spacing: 1px;
  text-shadow: 1px 1px 1px aliceblue;
  font-size:48pt;
  margin-left:130px;
  margin-top:20px;
}
#wrapper .titlename p {
  font-size:30pt;
  position:relative;
  top:-111px;
  left:50px;
  width:235px;
}
#wrapper .container {
  margin: auto;
  width: 1000px;
  min-height: 500px;
  background-color: #dfdfdf;
  border: 1px solid #aeaeae;
  grid-row: 2;
  grid-area: content;
  border-radius:5px;
}
#wrapper .bibiscallop {
  margin: 20px auto;
  width: 900px;
  min-height: 400px;
  --r: 20px; /* radius of circles */
  padding: calc(1.5 * var(--r));
  background: #566c8f;
  mask: linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 2 * var(--r))
      calc(100% - 2 * var(--r)),
    radial-gradient(farthest-side, #000 97%, #0000) 0 0 / calc(2 * var(--r))
      calc(2 * var(--r)) round;
}
/* bottom */
#wrapper .bottomnav {
  margin-top:-2px;
  height: 30px;
  background-color: #dfdfdf;
  border: 1px solid #aeaeae;
  grid-row: 3;
  line-height: 30px;
  text-align: center;
  grid-area: footer;
}