@import url("https://fonts.googleapis.com/css2?family=Courgette&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cuprum:wght@500&display=swap");

/* Variáveis globais */
:root{
    --bg:#f5f5f5;
    --text:#202124;
    --accent:#08a145;
    --accent-2:#008cba;
    --campaign:#2b9ab8;
    --white:#ffffff;
    --fab-bg:#376eb0;
    --whats-bg:#00808e;
    --shadow:0 1px 1.2px 0 #2c2c2c57;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}

/* Tipografia */
body{background-color:var(--bg);background-repeat:no-repeat;background-size:cover;width:100%}
h1,h2,h3,ul li,header p{font-family:Cuprum,sans-serif;color:var(--text)}
.menu h2,header p{font-size:18px}
.menu h2,.details,.menu h2,.menu h3{font-family:Cuprum,sans-serif}

/* Imports for decorative fonts (used onde necessário) */
._pix,.menu h2,.whats-chat,div.description h3,div.titlecampaing,h3.titlearraia,header p{text-align:center}

/* Header */
header{display:flex;flex-direction:column;align-items:center}
header img{max-width:100%}
header p{color:#000;margin:10px;align-items:center}

/* Keyframes */
@keyframes animate{
    0%,100%{opacity:0}
    50%{opacity:1}
}

/* Links / Buttons globais */
.buttoncampaignaj a,div.campaignbutton a,h1,h2,h3{text-transform:uppercase}
._link,.botaocomprov,.btnCopi{border-radius:26px;padding:13px 23px;border:none}
._link{background-color:var(--text);color:#faebd7;align-self:flex-start}
._link:hover,.botaocomprov:hover,.btnCopi:hover{background-color:var(--accent);transition-duration:.4s}

/* Lists */
ul li{display:flex;justify-content:space-between;padding:16px 16px 16px 0;border-bottom:1px solid rgba(0,0,0,.1)}

/* Boxes and cards */
.box-frases,
.box-frasescomprovantes{max-width:700px;overflow:auto;background:var(--white);box-shadow:var(--shadow);padding:10px;border-radius:3px}
.box-frases{margin:0 auto 20px}
.box-frases .texto{
    white-space:nowrap;width:12em;text-overflow:ellipsis;border:1px solid #000;float:left;font-style:italic;overflow:hidden;position:relative;line-height:1em;max-height:1em;text-align:justify
}
.box-frases .btnCopi{float:inline-end;background-color:#4caf50;border:none;padding:13px 23px;border-radius:26px}

/* Details / descriptions */
.details{padding:5px;color:var(--text)}
div.description{background-color:rgb(109 170 187);padding:10px}
div.description h3,div.titlecampaing{text-align:center}

/* Campaign area */
.titlecampaing{text-align:center;color:rgba(0,0,0,.9)}
.buttoncampaignaj{padding:8px 15px;border-radius:26px;background-color:var(--accent-2);margin:20px;border:none}
.buttoncampaignaj a{font-family:'Press Start 2P',cursive;text-decoration:none;font-size:2em;color:var(--white);animation:1.5s linear infinite animate}
.buttoncampaignaj:hover{background-color:#4caf50;transition-duration:.4s}

div.campaignbutton{display:flex;justify-content:center;max-width:100%;background-position:center;background-size:contain}
div.campaignbutton button{color:aliceblue;background-color:var(--accent);border:none;padding:13px 23px;border-radius:26px}
a#botaocampaing button{
    text-transform:uppercase;border:none;text-decoration:none;font-weight:1em;font-size:1.3em;animation:2s linear infinite animate;font-family:Cuprum;
}

/* Campaign description */
.campaigndescription img{width:100%;height:auto}
div.listdescription{text-align:justify;margin-left:auto;margin-right:auto;width:20em}

/* Footer campaign */
div.campaingback{background:linear-gradient(to right,#00f 3%,#00f 4%,green 6%,green 10%,red 15%,red 30%,orange 35%,purple 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
footer.rodapecampaing{display:flow;text-align:center;font-size:20px;background:linear-gradient(to right,#00f 3%,#00f 4%,green 6%,green 10%,red 15%,red 30%,orange 5%,purple 70%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
footer.rodapecampaing a{text-decoration:none;color:#000}

/* Boxes específicos */
.box-frasescomprovantes{margin:auto;display:flex;justify-content:center}
.qrcodepixong{width:50%;max-width:350px}

/* Troca / rockn */
div.trocorockn{display:flex;flex-direction:column;align-items:center;background-color:var(--bg);padding:10px}
.trocorockn img{max-width:-webkit-fill-available}
.trocorockn p,.ultroco li{color:#008cba;text-align:center}

/* Pix / payments */
._pix,.fab button,.trocorockn p,div.description{padding:10px}
._pix,.fab ul li label,.linkspix{background-color:var(--white)}
.fab,.whats-chat{position:fixed;bottom:10px}
.fab{right:10px}
.fab button{cursor:pointer;width:150px;border-radius:30px;background-color:var(--fab-bg);border:none;box-shadow:0 1px 5px rgba(0,0,0,.4);font-size:16px;color:var(--white);transition:.2s ease-out}
.fab button:focus{outline:0}
.fab button.main{width:100px;height:60px;border-radius:30px;background-color:var(--fab-bg);z-index:20}
.fab button.main:before{content:'Participe';color:var(--white)}
.fab ul{padding:0 5px 0 0;margin:0;list-style:none;z-index:10;transition:.2s ease-out}
.fab ul li{display:flex;position:relative;margin-bottom:-10%;opacity:0;transition:.3s ease-out}
.fab ul li label{
    margin-right:10px;white-space:nowrap;display:block;margin-top:10px;padding:5px 8px;box-shadow:0 1px 3px rgba(0,0,0,.2);border-radius:3px;height:18px;font-size:16px;pointer-events:none;opacity:0;transition:.2s ease-out
}
.fab.show button.main{outline:0;background-color:var(--fab-bg);box-shadow:0 3px 8px rgba(0,0,0,.5)}
.fab.show button.main:before{content:'↑'}
.fab.show button.main+ul{bottom:70px}
.fab.show button.main+ul li{margin-bottom:10px;opacity:1}
.fab.show button.main+ul li:hover label{opacity:1}

/* Whats chat */
.whats-chat{background:var(--whats-bg);color:var(--white);border-radius:20px;padding:5px 16px;right:20px;box-shadow:0 -1px 7px 3px rgb(0 128 142 / 50%);border:1px solid #44a6b6}
.whats-chat a{color:var(--white);text-decoration:none;font-family:Cuprum}

/* Menu / submenu / icons */
.menu h2{background-color:var(--campaign);border-radius:50px;margin:5px;padding:5px;color:var(--white)}
.menu h3{font-size:16px;margin-bottom:5px}
.submenu a button,div.campaingback,footer.rodapecampaing{font-family:Cuprum,sans-serif}
.submenu a button{text-decoration:none;font-size:16px;white-space:nowrap}
.botaocomprov a,.box-frases .btnCopi,.submenu button a{font-size:14px;color:var(--white);font-family:Cuprum,sans-serif;text-decoration:none;white-space:nowrap}

/* Social icons */
div.iconsocial{display:flex;justify-content:space-around}
#facebook img,#instagram img{width:50px}

/* Small tweaks */
._link{background-color:var(--text);color:#faebd7;border:none;padding:13px 23px;border-radius:26px;align-self:flex-start;text-decoration:none}
.menu h2,header p{font-size:18px}
.vidcampaing{display:flex;flex-direction:column;align-items:center;width:100%}
.imgcampaing{display:flex;justify-content:center}
.submenu a button,div.campaingback,footer.rodapecampaing{font-family:Cuprum,sans-serif}