@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap');

/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,button,p,blockquote,th,td{margin:0;padding:0;}
img{vertical-align:top;border:0;}
a img{border:0;}table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
abbr,acronym{border:0;}
html{box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

/*common*/
html{height:100%; overflow-x: hidden; position: relative;}
body{
  display: none;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  text-align:center;
  position: relative;
  background:#fff;
  width:100%;
	height:100%;
  position: relative;
  z-index: 0;
}
a{text-decoration:none;outline:none;color:#cbc5cd; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; font-weight: 700;}
a:focus,*:focus{outline:none;}
img{vertical-align:top;line-height:0;font-size:0; width: 100%; height: inherit;}
a:hover{cursor: pointer;}

/*camvas
----------------------------------------------------------------*/
#particles-js{ width: 100%; height:100%; position: absolute; top:0; left: 0; z-index: -2;}
canvas{ width: 100%; height:100%; position: absolute; top:0; left: 0; z-index: -2;}

/*contents
----------------------------------------------------------------*/
header {width: 95%; margin: auto auto 2em;}
@media (min-width: 1000px) {
  header {width: 80%;}
}

#noteCol {width: 80%; margin: 0 auto;}
#noteCol a{color: #fff; margin: 0 auto 5% auto; display: block; background: #dbb6d8; width:100%; border-radius: 20px; padding: 0.5em;}
#noteCol a:hover{color: #fff; background: #9b8ac5;}

#oldresult{display:none; }

.resultanimation{
  display: block;
  position: absolute;
  background: #fff;
  height: 100vh;
  width:100%;
  z-index: 99996;
  top:0;
  left: 0;
}
.notice{font-size: 70%;}
#resultbox{display:none;}
#mowgli{display: none; width: 300px; height:auto;position: absolute; margin: 0 0 0 -150px;}
#envelope{display: none; width: 300px; height:auto;position: absolute;top:40%; margin: 0 0 0 -150px;}
#envelope2{display: none; width: 300px; height:auto;position: absolute;top:30%; margin: 0 0 0 -150px;}

article{width:80%;display:block;margin:auto;}
footer{color: #cbc5cd; text-align:center; font-size: 70%; padding:0 2em 2em;}
footer p{padding-top:2em;}
footer a:hover{ color: #877e8b;
}

/*Modal
----------------------------------------------------------------*/
#resultbox a{color: #fff; margin: 2em auto 0; display: block; background: #dbb6d8; width:100%; border-radius: 20px; padding: 0.5em; text-align:center;-webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
#resultbox a:hover{background: #9b8ac5;color:#fff;}

/*Media Query
----------------------------------------------------------------*/
.sp{
  display: block;
}
.pc{
  display: none;
}
@media (min-width: 1000px) {
  .sp{
    display: none;
  }
  .pc{
    display: block;
  }
}

/*Tooltip
----------------------------------------------------------------*/
.copy-value {
  cursor: pointer;
  position: relative;
}
.tooltip::after {
  content: "Copied!";
  display: inline-block;
  color: #9b8ac5;
  border-radius: 0.4rem;
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translate(-50%, 0);
  font-size: 0.75rem;
  font-weight: 700;
  animation: fade-tooltip 0.5s 1s 1 forwards;
  text-shadow: 1px 1px 2px rgba(255,255,255,1);
}
@keyframes fade-tooltip {
  to {
    opacity: 0;
  }
}