@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@font-face {font-family: "mcfly"; src: url('fnt/BTTF.ttf') format('truetype');}
@font-face {font-family: "comic"; src: url('fnt/comic.ttf') format('truetype');}
:root {
    font-size: 16px;
    --cwhi:#ffffff;
    --cgr0:#999999;
    --cgr1:#666666;
    --cgr2:#303030;
    --cbla:#111111;
    --cyel:#ffe100;
    --cred:#ff0000;
    --cblu:#0000ff;
}
body {
    background-image: url(imx/botellamcfly-cartas_al_futuro-stars.gif);
    background-position: top left;
    background-repeat: repeat;
    background-color:var(--cbla);
    top:0;left:0;
    font-family: 'comic';
    font-size: 16px;
    /*position:absolute;left:50%;transform:translate(-50%,0);-webkit-transform: translate(-50%,0);*/
}
/*header*/
header {position:absolute;left:50%;transform:translate(-50%,0);-webkit-transform: translate(-50%,0);top:0;width:100%;max-width:900px;height:220px;}
#titweb{position:relative;top:0;left:0;text-align:center;padding:60px 8px 60px 8px;}
#titweb .fa-9x{position:absolute;left:50%;transform:translate(-50%,0);-webkit-transform: translate(-50%,0);top:0px;z-index: -1;}
#titweb .fa-spin{color:rgb(255, 225, 0);opacity:0.3;}
#titweb h1{margin-top:20px;font-family:'mcfly';font-size:28px;color:var(--cwhi);cursor:pointer;}
#titweb h2{margin-top:-14px;font-family:'mcfly';font-size:20px;color:var(--cwhi);}
#titweb h1,#titweb h2{text-shadow: 0 1px 0 #ff0000, 0 2px 0 #ff0000, 0 3px 0 rgb(255, 47, 0), 0 4px 0 #fbac01, 0 5px 0 #ffe100, 0 6px 1px rgba(255, 47, 0, .1), 0 0 5px rgba(255, 47, 0, .1), 0 1px 3px rgba(255, 47, 0, .3), 0 3px 5px rgba(255, 47, 0, .2), 0 5px 10px rgba(255, 47, 0, .25), 0 10px 10px rgba(255, 47, 0, .2), 0 20px 20px rgba(255, 47, 0, .15) ;}

/*content*/
#content{position:absolute;left:50%;transform:translate(-50%,0);-webkit-transform: translate(-50%,0);top:220px;width:100%;max-width:900px;text-align:center;}

/*formulario*/

/*campo texto*/
#textodiv{padding:24px 8px 12px 8px;}
#textodiv label{text-transform:uppercase;font-size:20px;color:fuchsia;}
#textodiv img{
position:absolute;right:0;top:0;
height:52px;margin:80px 36px 0px 0px;
z-index:100;
}
#textodiv textarea{
    background-color:var(--cgr2);
    border:2px inset var(--cgr0);
    outline:5px double fuchsia;
    border-radius:0;
    margin-top:12px;
    width:90%;
    height:320px;
    padding:12px;
    font-family:'comic';
    font-size:20px;
    letter-spacing:1px;
    color:var(--cwhi);
    appearance: none;
    resize:none;
}#textofield::placeholder{color:fuchsia;}

/*campo correo*/
#correodiv{padding:12px 8px 12px 8px;}
#correodiv label{text-transform:uppercase;font-size:20px;color:turquoise;}
#correodiv input{
    background-color:var(--cgr2);
    border:2px inset var(--cgr0);
    outline:5px double turquoise;
    border-radius:0;
    margin-top:12px;
    width:90%;
    height:40px;
    padding:0px 12px 0px 12px;
    text-align:center;
    font-family:'comic';
    font-size:20px;
    letter-spacing:1px;
    color:var(--cwhi);
    appearance: none;
}#correofield::placeholder{color:turquoise;}

/*campos data hora*/
#arribadadiv{padding:12px 8px 12px 8px;}
#arribadadiv label{text-transform:uppercase;font-size:20px;color:var(--cyel);}

#arribadainputsdiv {padding:8px;}

#arribadainputsdiv input{
    background-color:var(--cgr2);
    border:2px inset var(--cgr0);
    outline:5px double var(--cyel);
    border-radius:0;
    margin:12px 6px 0px 6px;
    width:40%;
    height:40px;
    padding:0px 12px 0px 12px;
    text-align:center;
    font-family:'comic';
    font-size:20px;
    letter-spacing:1px;
    color:var(--cyel);
}

/*campo enviar*/
#enviardiv {padding:12px 8px 12px 8px;}
#enviardiv label{text-transform:uppercase;font-size:20px;color:#0a99ca;}
#enviardiv button{background-color:#0a99ca;margin:12px;border:outset;appearance:none;cursor:pointer;}

/*mensaxe resultado envío*/
#mensaxediv{position:absolute;left:50%;transform:translate(-50%,0);top:-20px;-webkit-transform: translate(-50%,0);width:100%;}
#mensaxediv h1{font-size:36px;color:fuchsia;}
#mensaxediv p{margin:-4px 20px 0px 20px;font-size:18px;letter-spacing:1px;line-height:1.5em;color:var(--cyel);}
#mensaxeimg{position:absolute;left:-10%;top:300px;max-width:360px;}

/*captcha de google*/
.grecaptcha-badge{visibility:collapse!important;}