*{margin:0; padding:0; box-sizing:border-box; font-family: Arial, Helvetica, sans-serif;}
input:focus{ outline:none !important; outline-width: 0 !important; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;}
input, select, textarea{outline: none; border: 0;}
a{text-decoration:none;}
button{background:none; border:1px solid rgba(0,0,0,0.6); border-radius:5px; padding:7px 10px; cursor:pointer; font-weight: 600;}
input, select, textarea{ border-radius: 5px; border:1px solid rgba(0,0,0,0.1); padding:8px 10px;}
i{display:inline-block; vertical-align: middle;}
input[type=checkbox]{ padding:0; border:none; display: none; }
input[type=checkbox] + label{ cursor:pointer; padding:0; border:none;}
input[type=checkbox] + label:before{ content:''; background:transparent; border: 3px solid #3b3b3b; border-radius: 5px; display: inline-block; height: 20px; width: 20px; text-align:center; text-shadow:1px -1px 2px gray; vertical-align:middle; }
input[type=checkbox]:checked + label:before{ content: '✔'; font-size: 15px; font-family:'Times New Roman'; color:#3b3b3b; }

header{ width: 100%; background:rgb(46, 46, 46); position:absolute; top:0; left: 0; }
header > div{ width: 100%; max-width: 1200px; display:flex; justify-content: space-between; flex-wrap: wrap; padding:15px; margin:0 auto;}
header > div > img{ width: 100px;}
header > div > div{ display:flex; flex-direction: column; color:white; font-weight: 600; font-size: 22px; align-items: center;}
header > div > div > div{ display:flex; align-items: center; font-size: 18px; margin-top:10px;}
header > div > div > div > img{ width: 23px; height: 23px; border-radius: 50%; margin-right: 10px;}

.sect{ width: 100%; height: 100vh; display:flex; justify-content: center; align-items: center; background:rgb(46, 46, 46);}
.sect > img{ max-width: 1000px; height: auto;}




.pie{width: 100%; height: auto; background:rgb(46, 46, 46); padding:40px 20px 20px; display:flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;}
.pie > div.a > a{ text-decoration: none; margin:0 15px;}
.pie > div.a > a > i{ color:white; font-size: 30px;}
.pie > div.b{ color:rgba(255,255,255,0.6); margin-top:20px;}
/* =================== */
.prompt { width: 100%; height:100vh; background-color: rgba(0,0,0,0.7); position: fixed; top:0; left: 0; transition: all 0.5s ease-in-out; z-index: 9;}
.prompt > div{ width: 350px; background:white; box-shadow: 0 0 15px 0 rgba(255,255,255,1); border-radius:5px; margin:50px auto 0; }
.prompt > div > div.a{ display:flex; flex-direction: column; justify-content: center; align-items: center; padding:10px;}
.prompt > div > div.a > img{ width: 100px; background:white; display:inline-block; margin-right: 15px;}
.prompt > div > div.a > p{ font-weight: 600; font-size: 0.8rem; text-align: center; margin-top:10px;}
.prompt > div > div.b{ display:flex;  justify-content: center; padding:10px;}
.prompt button{ border:none; background: none; font-weight: 600; color:black; margin:0 15px; cursor:pointer;}
.prompt .add{ background:royalblue; color:white; }
.prompt.show { transition-delay: 3s; display:block; opacity: 1;}
.prompt.hide { display:none;}