/*
 * § Google & Fonts
 * § Colors
 * § *
 * § Scroll Bar - Window Browser
 * § VIDEO
 *
 * * * * * * * * * * * * * * * * * * * * * * * * */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/* § Google & Fonts
   Písmo NORMÁLNE - Poppins, Roboto 
   Písmo ŠIROKÉ - Montserrat
 * * * * * * * * * * * * * * * * * * * * * * * * */
.font_m { font-family: 'Montserrat', sans-serif;} 
.font_p { font-family: 'Poppins', sans-serif;} 
.font_r { font-family: 'Roboto', sans-serif;} 


/* § Colors *
 * * * * * * * * * * * * * * * * * * * * * * * * */
:root {
    /* fonty pred definovane */
    --fontf_m: 'Montserrat', sans-serif;
    --fontf_p: 'Poppins', sans-serif;
    --fontf_r: 'Roboto', sans-serif;
    /* hue :: odtieň farby, 0-360, používam predvolene násobky 12 ! */
    --hue: 0;
    /* sat=saturation :: sýtosť, 0-100%, 0 je stredne sivá, 100% je čistá farba  */
    --sat: 100%;
    /* lig=lightness :: svetlosť jas, 0-100%, 0 je tmavá (čierna), 50% je vlastne sýtosť, 100% je jasná (biela) */
    --lig: 50%;
    /* hsl(0 100% 50%) */
    /* hsla(0 100% 50% / 0.01) */

    --clr-steel: 222 15%;   /* hsl(var(--clr-steel) 52%) */
    --clr-general: 262 80%;   /* hsl(var(--clr-general) 52%) */
    /* farba plne čierna podkladová, neon black 0a0a08 HEX, 10,10,8 RGB*/
    --clr-black: 60 11% 4%; /* hsl(var(--clr-black) / 1.00) */
    /* farba plne biela podkladová, neon white fbffff HEX, 251,255,255 RGB */
    --clr-white: 180 100% 99%; /* hsl(var(--clr-white) / 1.00) */

    /* global size */
    --gsize0: 2560px;
}


/* § * 
 * * * * * * * * * * * * * * * * * * * * * * * * */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: none;
}

a { text-decoration: none; color: hsl(var(--clr-white) / 0.90);}
a:hover { color: hsl(var(--clr-white) / 1.00);}
a svg { fill: hsl(var(--clr-white) / 0.90);}
a svg:hover { fill: hsl(var(--clr-white) / 1.00);}

/* § Scroll Bar - Window Browser *
 * * * * * * * * * * * * * * * * * * * * * * * * */
/* Target the entire scrollbar / celý posuvník */
::-webkit-scrollbar {width: 8px;}
/* Track / trať, plocha pod posuvníkom */
::-webkit-scrollbar-track {background: #1e1e1e;}
/* Thumb (the draggable part) / posuvník (ktorým sa poťahuje) */
::-webkit-scrollbar-thumb { 
    background: #16222A;  /* fallback for old browsers */
    background: -webkit-linear-gradient(125.31deg, #1e1e1e 0%, #778899 47.92%, #1e1e1e 100%);
    background: linear-gradient(125.31deg, #1e1e1e 0%, #778899 47.92%, #1e1e1e 100%);
    border-radius: 8px;
    box-shadow: inset 0 0 6px rgba(59, 59, 59, 0.3);
}
::-webkit-scrollbar-thumb:hover { 
    background: #16222A;  /* fallback for old browsers */
    background: -webkit-linear-gradient(125.31deg, #1e1e1e 0%, #90a3b6 47.92%, #1e1e1e 100%);
    background: linear-gradient(125.31deg, #1e1e1e 0%, #90a3b6 47.92%, #1e1e1e 100%);
}

/* § BODY
 * * * * * * * * * * * * * * * * * * * * * * * * */
html {
    background: hsl(var(--clr-black) / 1.00);
}
#body_out {
    display: flex; flex-direction: row; justify-content: center; flex-wrap: nowrap;
    width: 100%;
    background: hsl(var(--clr-black) / 1.00);
}
@media ( max-width:240px ) {
    html { background: hsl(var(--clr-black) / 1.00); }
    #body_out { display: none; }
}
#body_in {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
    min-width: 160px;
    max-width: var(--gsize0);
    width: 100%;
}

/* § VIDEO
 * * * * * * * * * * * * * * * * * * * * * * * * */
.video_box {
    width: 100%;
}
video {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.video_control {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border:1px solid hsl(var(--clr-white) / 0.24);
    border-bottom-left-radius:32px;
    border-bottom-right-radius:32px;
    border-top: none;
    border-right: none;
    border-left: none;
    background: hsl(var(--clr-white) / 0.04);
}
.video_control button {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid hsl(var(--clr-white) / 0.08);
    border-radius: 16px;
    padding: 16px 48px;
    margin: 16px;
    cursor: pointer;
}
.video_control button:hover {
    background: hsl(var(--clr-white) / 0.16);
}
.video_text {
    color: hsl(var(--clr-white) / 0.40);
    border:1px solid hsl(var(--clr-white) / 0.08);
    border-radius: 16px;
    margin: 16px;
    padding: 16px;
    font-family: var(--fontf_p);
    font-weight: 400;
}
.video_text:hover {
    color: hsl(var(--clr-white) / 0.80);
}

.zosnuli {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.zosnuly {
  min-width: 240px;
  width: 300px;
  height: 400px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(to right,#77530a,#ffd277,#77530a,#77530a,#ffd277,#77530a);
  background-size: 250%;
  background-position: left;
  /* color: #ffd277; */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* cursor: pointer; */
  transition-duration: 1.5s;
  overflow: hidden;
  margin: 32px 16px;
}

.zosnuly::before {
  position: absolute;
  content: "";
  /* color: #ffd277; */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 97%;
  height: 98%;
  border-radius: 8px;
  transition-duration: 1s;
  background-color: rgba(0, 0, 0, 0.842);
  background-size: 200%;
}

.zosnuly:hover {
  background-position: right;
  transition-duration: 1.5s;
}

.zosnuly:hover::before {
  background-position: right;
  transition-duration: 1.5s;
}

.zosnuly:active {
  transform: scale(0.95);
}

.zosnuli .zosnuly span {
    color: #ffd277;
    z-index: 10;
    font-family: var(--fontf_r);
    font-weight: 400;
    font-size: 0.75em;
    width: 40%;
    border-bottom: 1px solid #ffd277;
    text-align: center;
}
.zosnuli .zosnuly h1 {
    color: #ffd277;
    z-index: 11;
    font-family: var(--fontf_p);
    font-weight: 400;
    font-size: 2em;
    margin: 1em 0 0.25em 0;
    text-align: center;
}
.zosnuli .zosnuly .datum {
    color: #ffd277;
    z-index: 12;
    font-family: var(--fontf_m);
    font-weight: 400;
    font-size: 1em;
}

.zosnuli .zosnuly .oddelovac {
    color: #ffd277;
    z-index: 13;
    font-family: var(--fontf_m);
    font-weight: 400;
    font-size: 2em;
    margin: 1em 0;
}

.zosnuli .zosnuly a {
    width: 160px;
    text-align: center;
    color: #080806;
    background: #ffd277;
    border-radius: 16px;
    padding: 16px;
    z-index: 14;
    font-family: var(--fontf_m);
    font-weight: 700;
    font-size: 1em;
}

.zosnuli .zosnuly a:hover {
    background: #ffb727;
}

.context {
    margin:4em;
}

.context h1 {
    color: #ffd277;
    z-index: 11;
    font-family: var(--fontf_m);
    font-weight: 400;
    font-size: 2em;
    margin: 1em 0 0.25em 0;
    text-align: center;
}
.context p {
    color: hsl(var(--clr-white) / 0.80);
    z-index: 11;
    font-family: var(--fontf_m);
    font-weight: 400;
    font-size: 1em;
    margin: 0.5em;
    text-align: center;
}



/* hsl(var(--clr-white) / 0.80); */