/* --------------------------------------------------------------
           ZÁKLADNÍ RESET & GLOBAL STYLY
        -------------------------------------------------------------- */
*{
    box-sizing:border-box;
    padding:0;
    margin:0;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
html,body{
    height:100%;
    margin:0;
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
    background:linear-gradient(135deg,rgba(251,0,255,1)0%,rgba(153,0,255,1)100%);
    background-attachment:fixed;
    background-size:auto;
    background-position:center;
    background-repeat:no-repeat;
    color:#ffffff;
}

/* --------------------------------------------------------------
   TYPOGRAPHIE – nadpisy, odstavce, odkazy
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
    color: #fafafa;
    margin-bottom:.6rem;
    line-height:1.2;
}
h1{font-size:2.8rem;}
h2{font-size:2.4rem;}
h3{font-size:2rem;}
h4{font-size:1.6rem;}
h5{font-size:1.4rem;}
h6{font-size:1.2rem;}

p{
    max-width:800px;
    margin:0 auto 1.2rem auto;
    line-height:1.6;
    color:#f0f0f0;
}

a{
    color:#ff66ff;
    text-decoration:underline dotted;
    transition:color .2s ease;
}
a:hover{color:#ff33ff;}

/* --------------------------------------------------------------
   NAVIGACE
-------------------------------------------------------------- */
nav{
    position:fixed;
    top:0;
    width:100%;
    height:50px;
    padding:0 30px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    background-color:rgba(100,0,100,.65);
    z-index:100;
}
nav a{
    background:#f801ecf8;
    border-radius:50px;
    color:#fff;
    font-size:16px;
    font-weight:700;
    text-decoration:none;
    padding:10px 20px;
    margin-left:10px;
    transition:all .2s ease;
}
nav a:hover{background:#0000009d;}

/* --------------------------------------------------------------
   PATIČKA
-------------------------------------------------------------- */
footer{
    position:fixed;
    bottom:0;
    width:100%;
    height:50px;
    padding:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:rgba(27,27,27,.65);
    font-size:15px;
}
footer a{color:#fff;}

/* --------------------------------------------------------------
   MAIN CONTENT – GRID CENTERING
-------------------------------------------------------------- */
main{
    display:grid;
    place-items:center;
    flex:1;
    padding:10px;
}

article{
    padding:80px 0;
    width:100%;
    text-align:center;
}

/* --------------------------------------------------------------
   SCROLLBAR
-------------------------------------------------------------- */
::-webkit-scrollbar{width:7px;}
::-webkit-scrollbar-track{background:#9100e6;}
::-webkit-scrollbar-thumb{background:#e100ff;border-radius:10px;}

/* --------------------------------------------------------------
   KARTY
-------------------------------------------------------------- */
.cards{
    padding:20px;
    column-gap:20px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.card{
    background:rgba(143,255,255,.56);
    width:250px;
    border:3px solid #2d6fff;
    border-radius:10px;
    padding:10px;
    margin:10px;
    transition:all .2s ease;
}
.card:hover{width:290px;}

/* --------------------------------------------------------------
   POPOVER
-------------------------------------------------------------- */
div[popover]{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:#111;
    color:#fff;
    padding:20px;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
    z-index:1000;
    display:none;
}
div[popover][data-show]{display:block;}
div[popover] .close-btn{
    position:absolute;
    top:10px;right:10px;
    background:transparent;
    border:none;
    font-size:20px;
    cursor:pointer;
    color:#888;
}
div[popover] .close-btn:hover{color:#fff;}

/* --------------------------------------------------------------
   TEXT HELPERS
-------------------------------------------------------------- */
.home-p,.bot-p{
    max-width:600px;
    margin:0 auto;
}
.bot-p{color:#fff;}
.bot-p a{color:#fff;}

.plusy{color:chartreuse;font-weight:bold;font-size:20px;}
.minusy{color:#f90505;font-weight:bold;font-size:20px;}

/* --------------------------------------------------------------
   FORMULÁŘE
-------------------------------------------------------------- */
input,textarea,select,button{
    font-family:inherit;
    font-size:1rem;
    padding:.6rem 1rem;
    margin:.4rem 0;
    border:2px solid rgba(100,0,100,.4);
    border-radius:6px;
    background:rgba(255,255,255,.1);
    color:#fff;
    transition:all .2s ease;
}
input:focus,textarea:focus,select:focus,button:focus{
    outline:none;
    border-color:#e100ff;
    background:rgba(255,255,255,.2);
}
button.primary{
    background:#f801ecf8;
    color:#fff;
    border:none;
    cursor:pointer;
}
button.primary:hover{background:#0000009d;}

/* --------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------- */
@media(max-width:768px){
    nav{justify-content:center;}
    footer{font-size:14px;}
    .card{width:90%;}
    .card:hover{width:95%;}
}