﻿body/*
    ╔══════════════╗
    ║ © Global Net ║
    ╚══════════════╝
  */{font-family: 'Assistant', sans-serif;
    color: #333;
    position: relative;
    min-height: 100%;
    font-size: 18px;
    margin: 0;
    background-color: black}
body::before
    {width: 100%;
    min-height: 100vh;
    height: 100%;
    position: fixed;
    filter: blur(4.2px);
    opacity: 42%}
#n
    {height: 5rem;
    width: 0rem;
    margin: auto}
.error-message
    {color: red;
    margin: -4.8rem auto 3.38rem auto;
    display: none}
.s-h
    {margin-top: -48px;
    right: 42px;
    position: absolute;
    font-size: 16px}
body::before, .error-message, #verifyResult, #n
    {pointer-events: none;
    user-select: none}
h2, button, .importButton, .downloadButton, .section, .copyIcon, .s-h
    {user-select: none}
@media (max-width: 1250px)
    {h1
        {font-size: 14px!important;}
    button
        {font-size: 12px!important;}
    .copyIcon
        {font-size: 25px}}
@media (max-width: 980px)
    {h1
        {font-size: 13px!important;}
    button
        {font-size: 10px!important;}}
@media only screen and (hover: none) and (pointer: coarse)
    {.section
        {margin: 20px 35%!important;}
    .section-content
        {margin: 20px 10%!important;}
    h1
        {font-size: 11px!important;}
    button
        {font-size: 9px!important;}
    textarea, input
        {font-size: 11px!important;}}
#info
    {text-align: justify}
h1
    {text-align: center;
    text-transform: uppercase;
    font-size: 20px}
h2
    {text-transform: uppercase;
    font-size: 20px;
    text-align: center;
    color: #385358;
    margin: 20px}
.section
    {margin: 20px 38%;
    padding: 0px;
    background-color: #333;
    color: rgb(255, 255, 255);
    cursor: pointer;
    border-radius: 15px;
    border-color: black;
    position: relative;
    border: 3px ridge #a58c66;
    box-shadow: -3px 3px 5px #80808080}
.section:hover, .section.act
    {background-color: #413831}
.section-content
    {display: none;
    margin: 20px 20%;
    background-color: whitesmoke;
    padding: 25px;
    border-radius: 10px;
    position: relative;
    text-align: center}
#verifyResult
    {margin: 0 auto 1rem auto;
    text-align: center;
    min-height: 2em;
    opacity: 0}
button
    {background-color: #28a140;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 3px auto 5.5rem auto;
    cursor: pointer;
    border-radius: 10px;
    width: 38%!important;
    font-weight: bold;
    border: 1px solid dimgray}
button:hover
    {background-color: #1e732f}
.importButton
    {background-color: #3a3939;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px auto 3rem auto;
    cursor: pointer;
    border-radius: 10px;
    width: 100%;
    font-weight: bold}
.importButton:hover
    {background-color: #1b1b1b}
.downloadButton
    {background-color: #3a3939;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 3px 2px;
    cursor: pointer;
    border-radius: 10px;
    width: 100%;
    font-weight: bold}
.downloadButton:hover
    {background-color: #1b1b1b}
textarea
    {width: 100%;
    height: 200px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    font-size: 14px;
    resize: none}
.output-container>textarea
    {background-color: #eee;
    cursor: default}
.output-container>textarea::placeholder
    {text-align: center;
    color: #0006}
.output-container>textarea:focus
    {outline: none}
input
    {display: block;
    margin-bottom: 15px;
    height: 45px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background-color: #f8f8f8;
    border: 2px solid #ccc;
    border-radius: 4px}
input::placeholder
    {color: #555c}
.output-container
    {position: relative;
    margin-bottom: 2rem}
.copyIcon
    {position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    font-size: 30px;
    color: #2e9840;
    opacity: 0.5}
.copyIcon:hover
    {opacity: 1}