@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap);
::-moz-selection {
    color:#f5f5f5;
    background:#141414
}
::selection {
    color:#f5f5f5;
    background:#141414
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin:0;
    padding:0;
    border:0;
    font:inherit;
    vertical-align:middle
}

body {
    background: #141414;
    color: #f5f5f5;
    height: 100vh;
    width: 50%;
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    
}

.logo {
    text-align: center;
    margin: 0 0 20px 0;
}

.wrapper {
    background: #181818;
    padding: 4% 2%;
    text-align: center;
    border-radius: .5em;
    max-width: 60%;
    word-break: break-word;
    margin: 0; 
}

h1 {
    font-size:200%;
    line-height:120%;
    margin-bottom:5%;
    font-weight:700
}

.btn-subir{
    margin-top:6%;
    width:50%;
    background:#f5f5f5;
    border:2px solid #f5f5f5;
    border-radius:.5em;
    padding:2%;
    font-size:100%;
    font-weight:700;
    color:#141414;
    cursor:pointer
}

.btn-subir:hover {
    background:#141414;
    color:#f5f5f5
}

.btn-archivo {
    background:#141414;
    padding:10%;
    border-radius:.5em;
    border:1px dashed #323232;
    width:50%
}

::-webkit-file-upload-button {
    background:#141414;
    color:#f5f5f5;
    border:1px solid #f5f5f5;
    border-radius:.5em;
    padding:2%;
    font-size:100%;
    cursor:pointer
}

::-webkit-file-upload-button:hover {
    background:#f5f5f5;
    color:#141414
}

.txt {
    margin-bottom:2%;
    margin-left:2%
}

.wrap {
    padding:2%;
    background:#f5f5f5;
    color:#141414;
    border-radius:.5em;
    text-align:center;
    margin:40px auto;
    max-width:60%;
    word-break:break-word
}

.wrap-error {
    padding:2%;
    background:#141414;
    color:#c60509;
    border-radius:.5em;
    text-align:center;
    margin:40px auto;
    max-width:60%;
    word-break:break-word
}

.txt-small {
    font-size:80%;
    margin-top:4%
}

.txt-big {
    font-size:100%;
    margin-bottom:3%
}

.wrap-img {
    background:#efefef;
    width:50%;
    padding:5% 10%;
    border-radius:.5em;
    margin:5% auto
}

.wrap-img img {
    width:50%
}


@media screen and (max-width:992px) {
    .wrapper {
        padding:10% 5%;
        max-width:80%
    }
    
    h1 {
        margin-bottom:10%
    }
    
    .btn-subir {
        width:80%;
        padding:4%
    }
    
    .logo img {
        width:6%
    }
    
    .wrap {
        max-width:80%
    }
}

input#inputText {
    display:none
}

.btn-copiar {
    background:#141414;
    border:2px solid #141414;
    width:100%;
    font-size:100%;
    font-family:Poppins;
    color:#f5f5f5;
    border-radius:.5em;
    padding:2%;
    width:50%;
    cursor:pointer
}

.btn-copiar:hover {
    background:#f5f5f5;
    color:#141414
}

.tooltip {
    position:relative;
    display:block
}

.tooltip .tooltiptext {
    visibility:hidden;
    width:100%;
    background-color:#141414;
    color:#f5f5f5;
    text-align:center;
    border-radius:.5em;
    padding:1%;
    position:absolute;
    z-index:1;
    bottom:130%;
    left:-1%;opacity:0;
    transition:opacity .3s
}

.tooltip .tooltiptext::after {
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-5px;
    border-width:5px;
    border-style:solid;
    border-color:#141414 transparent transparent transparent
}

.tooltip:hover .tooltiptext {
    visibility:visible;
    opacity:1
}