body{
    background-image: url("/imgs/about/flower.png");
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: higu;
    font-size: 0.9rem;
}

@font-face {
  font-family: higu;
  src: url(/fonts/sazanami-gothic.ttf);
}

.wrap{
    background-image: url('/imgs/about/fabc828289101f290d7f9360ef9a1f78.jpg');
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 15px ridge #E1C4C8;
    border-radius: 20px;
    box-shadow: 10px 10px 8px #9e7d8196, 10px 10px 8px #9e7d8196 inset;
    margin: auto;
    width: 30rem;
    height: 40rem;
    margin-top: 8rem;
    padding: 2rem;
}

.container {  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 1.5fr 0.3fr 2.1fr 0.1fr;
  gap: 2px 2px;
  grid-auto-flow: row;
  grid-template-areas:
    "header header"
    "links links"
    "left right"
    "footer footer";
    margin: auto;
    border: 1px dashed white;
    border-radius: 10px;
    background-color: white;
    height: 100%;
    width: 100%;
    box-shadow: 10px 10px 10px #ffffff, -10px -10px 10px #ffffff;
}

.header { 
    grid-area: header; 
    background-image: url(/imgs/about/wee.gif);
    background-position: 50% 50%;
    background-size: fill;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
    border-bottom: 15px solid #FFB8D6;
    border-radius: 10px;
}

.links { 
    grid-area: links; 
    text-align: left;
    color: #FFB8D6;
    font-size: 1.5rem;
    font-weight: 900;
    padding: 2%;
}

.links a{
    border: 2px solid #FFB8D6;
    border-radius: 5px;
    padding: 1%;
    letter-spacing: 5px;
    box-shadow: 5px 5px #FFB8D6;
}

a{
    text-decoration: none;
    transition: ease-in-out 0.3s;
}

a:visited{
    color: #FFB8D6;
}

a:hover{
    color: black;
}

b{
    background-color: #FFB8D6;
    color: white;
    border: 1px solid white;
    border-radius: 15px;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 0.5%;
    padding-top: 0.5%;
    transition: ease-in-out 0.3s;
}

h1{
    font-size: 2.5rem;
    background: linear-gradient(0deg,rgba(255, 184, 214, 1) 0%, rgba(255, 223, 237, 1) 17%, rgba(255, 255, 255, 1) 75%);
    display: inline-block;
    color: #FFB8D6;
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; 
    padding: 0.4rem;
    border: 1px solid white;
    border-radius: 15px;
    margin: 0;
    transition: ease-in-out 0.3s;
}

h1:hover{
    letter-spacing: 5px;
    cursor: default;
}

h2{
    text-align: right;
    background-color: #FFB8D6;
    margin: 0;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    color: white;
    font-size: 1rem;
    padding: 0.4rem;
    text-align: right;
    border: 1px solid white;
    border-radius: 15px;
    transition: 0.1s;
}

h2:hover{
    font-style: italic;
    cursor: default;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  color: #FFB8D6;
  font-weight: 900;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #FFB8D6;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}

.heart{
    background-color: #FFB8D6;
    color: white;
    padding: 1%;
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 20px;
    font-weight: 900;
    transition: ease-in-out 0.3s;
}

.heart:hover, b:hover{
    cursor: default;
    color: #FFB8D6;
    background-color: #000;
}

p{
    margin-top: 0;
    padding-top: 0;
}

.right i{
    color: #dd80a7;
}

.left { 
    grid-area: left; 
    overflow: scroll;
    overflow-x: hidden;
}

.left::-webkit-scrollbar, .right::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

    .left::-webkit-scrollbar-thumb, .right::-webkit-scrollbar-thumb {
      background: transparent;
    }

.right { 
    grid-area: right; 
    overflow: auto;
}

#spec{
    width: 95%;
    height: auto;
    border: 1px dashed white;
    display: block;
    margin: auto;
}

.footer { 
    grid-area: footer; 
    background-color: #FFB8D6;
    border: 1px solid white;
    border-radius: 15px;
}