@font-face { font-family: Zen Maru Gothic; src: url('/fonts/ZenMaruGothic-Regular.ttf'); }
@font-face { font-family: Changes Together; src: url('/fonts/ChangesTogetherDemo.ttf'); }
@font-face { font-family: ShinGoPro; src: url('/fonts/AOTFShinGoProRegular.otf'); }

:root {
  --cur-main: url('/assets/pokemain.png'), auto;
  --cur-point: url('/assets/pokeselect.png'), auto;
  --hotpink:#ff63af;
  --pastel:#fffafb;
}

* {
  padding:0;
  margin:0;
  cursor:var(--cur-main);
}

body {
  background-color:rgb(255, 218, 236);
  background-image:url('/imgs/pokebg.png');
  background-size:repeat;
  color:white;
  width:100vw;
  height:100vh;
}

a {
  cursor:var(--cur-point);
  color:white;
  text-transform:uppercase;
  text-decoration:none;
  text-shadow:-1px -1px 0 var(--hotpink),1px -1px 0 var(--hotpink),-1px 1px 0 var(--hotpink),1px 1px 0 var(--hotpink),0 0 6px var(--hotpink);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

a:hover {
  letter-spacing:3px;
  text-shadow:-1px -1px 0 #85daf4,1px -1px 0 #85daf4,-1px 1px 0 #85daf4,1px 1px 0 #85daf4,0 0 6px #85daf4;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#page {
  color:black;
  display:flex;
  align-items:center;
  justify-content:center;
}

#header {
  background-image:url('/imgs/pokebanner.jpg');
  width:70%;
  height:134px;
  position:absolute;
  top:20px;
  margin:0 auto;
  overflow-x:hidden;
  overflow-y:auto;
  font-family:monospace;
  border-radius:15px 15px 0 0;
  border:3px solid var(--hotpink);
}

#title {
  color:var(--pastel);
  font-family:'Changes Together';
  text-align:center;
  font-size:70px;
  font-weight:bold;
  height:134px;
  line-height:134px;
  text-shadow:2px 2px 0 var(--hotpink), -2px -2px 0 var(--hotpink), -2px 2px 0 var(--hotpink), 2px -2px 0 var(--hotpink);
}





#container {
  display:flex;
  justify-content:space-between;
  position:absolute;
  top:160px;
  width:70%;
  height:calc(100vh - 180px);
  background:var(--pastel);
  border-radius:0 0 15px 15px;
  border-left:3px solid var(--hotpink);
  border-right:3px solid var(--hotpink);
  border-bottom:3px solid var(--hotpink);
}

.left {
  background-image:url('/imgs/psideleft.png');
  background-size:cover;
  border-radius:0 0 0 11px;
  width:208px;
  height:auto;
}
.right {
  background-image:url('/imgs/psideright.png');
  background-size:cover;
  border-radius:0 0 11px 0;
  width:208px;
  height:auto;
}

#menu {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-top:20px;
}
#menu .btn {
  color:#fff7f9;
  width:140px;
  background:var(--pastel);
  border:1px solid var(--hotpink);
  border-radius:7px;
  padding:0 7px 5px 7px;
  text-align:center;
  cursor:var(--cur-point);
  margin:3px 0;
  text-transform:lowercase;
  font-family:'Zen Maru Gothic';
  font-size:18px;
  font-weight:700;
  line-height:18px;
  text-shadow:-1px -1px 0 var(--hotpink),1px -1px 0 var(--hotpink),-1px 1px 0 var(--hotpink),1px 1px 0 var(--hotpink),0 0 6px var(--hotpink);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#menu .btn:hover {
  letter-spacing:3px;
  text-shadow:-1px -1px 0 #85daf4,1px -1px 0 #85daf4,-1px 1px 0 #85daf4,1px 1px 0 #85daf4,0 0 6px #85daf4;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#cont {
  background:var(--pastel);
  width:968px;
  height:739px;
  overflow-y:auto;
}

.ent {
  color:#520428;
  font-size:17px;
  text-align:center;
  margin:20px;
  font-family:'ShinGoPro', sans-serif;
  font-weight:700;
  line-height:1.3;
}





#sona {
  display:flex;
  justify-content:center;
  align-items:top;
  flex-direction:row;
}
.portrait {
  width:45%;
  margin-right:10px;
}
.desc {
  width:45%;
  text-align:justify;
  margin-left:10px;
}

#box {
  display:block;
  margin:0 auto;
  height:30px;
  text-align:center;
  font-size:30px;
  font-family:'Changes Together';
  color:var(--pastel);
  text-shadow:-1px -1px 0 var(--hotpink),1px -1px 0 var(--hotpink),-1px 1px 0 var(--hotpink),1px 1px 0 var(--hotpink),0 0 6px var(--hotpink);
  z-index:10;
}
.stripe {
  margin:-25px auto;
  border-radius:50px;
  height:17px;
  width:auto;
  background:linear-gradient(0deg, var(--hotpink) 4%, #ffbddd 85%);
  z-index:9;
}





h1 {
  color:white;
  font-size:35px;
  font-family:'ShinGoPro', sans-serif;
  font-weight:700;
  font-style:italic;
  line-height:55px;
  background:linear-gradient(0deg, var(--hotpink) 4%, #ffbddd 85%);
  background-clip:border-box;
      -webkit-background-clip: text;
      -webkit-text-stroke: 8px transparent;
}

p {
  margin-bottom:20px;
  font-size:16px;
}

u {
  text-transform:uppercase;
  color:var(--pastel);
  text-shadow:-1px -1px 0 var(--hotpink),1px -1px 0 var(--hotpink),-1px 1px 0 var(--hotpink),1px 1px 0 var(--hotpink),0 0 6px var(--hotpink);
}