@charset "UTF-8";

/* Šířka displaye pro iPhone SE: 320px */

@font-face {
  font-family: "poppins";
  src: url("../fonts/poppins-regular.woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "poppins";
  src: url("../fonts/poppins-bold.woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
  height: 100% ;
}

body {
  display: flex ;
  flex-direction: column ;
  justify-content: space-between ;

  margin: 0;
  height: 100% ;

  font-family: poppins;
  font-size: 16px;
  line-height: 1.6;

  color: #2F2F2F;
  background-color: inherit;
  background-color: #e2e2e2;

  background-image: url(/img/rozcestnik_bg.jpg);
  background-size: cover;
}

/* MAIN */

main {
  flex: 1 1 auto ; 

  display: flex ;
  flex-direction: column ;
  justify-content: center ;

  margin-left: auto;
  margin-right: auto;

  max-width: 1920px;
  width: 60%;
}
main > div {
  height: 75% ;
}
main > div div+div {
  margin-top: .5rem ;
}

@media only screen and (min-width: 768px) 
{
  main { width: 80% ; }

  main > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: 2rem;
  }
  main > div div+div {
    margin-top: 0 ;
  }
}
@media only screen and (min-width: 1200px) 
{
  main { width: 60% ; }
}

.blok {
  display: flex ;
  justify-content: center ;
  align-items: center ;

  text-align: center ;

  /* width: 100% ; */
  height: 25% ;

  /* background-size: contain ; */
  background-size: 100% ;
  background-repeat: no-repeat ;
  background-position: 50% 50%;
}
@media only screen and (min-width: 360px) { 
  .blok { height: 25% ; } 
}
@media only screen and (min-width: 768px) { 
  .blok { height: 55% ; } 
}
@media only screen and (min-width: 1200px) { 
  .blok { height: 120% ; } 
}

.blok a {
  text-decoration: none ;
  color: white ;
}
.blok a:hover,
.blok a:active,
.blok a:focus
{
  text-decoration: underline ;
  color: white ;
}

.blok.zs {
  align-self: end ;

  background-image: url(/img/rozcestnik_bg_zs.jpg) ;
}
.blok.ms {
  align-self: end ;

  background-image: url(/img/rozcestnik_bg_ms.jpg) ;
}
.blok.sd {
  align-self: start ;

  background-image: url(/img/rozcestnik_bg_sd.jpg) ;
}
.blok.sj {
  align-self: start ;

  background-image: url(/img/rozcestnik_bg_sj.jpg) ;
}

/* FOOTER */

footer {
  border-top: 4px solid #6FD739 ;
  padding-top: 1.5em ;
  padding-bottom: 1.5em ;
  margin-bottom: 0 ;

  color: rgba(255, 255, 255, 0.9) ;
  background-color: black ;

  text-align: center ;

  font-size: .9rem ;
}
footer a {
  color: rgba(255, 255, 255, 0.8);
  background-color: transparent;
  text-decoration: none ;
}
footer a:visited {
  color: white;
  background-color: transparent;
}
footer a:hover,
footer a:focus,
footer a:active {
  color: white;
  background-color: transparent;
  text-decoration: underline ;
}
@media only screen and (min-width: 360px) { 
  footer { font-size: 1rem ; } 
}


/* Nadpisy */

h1 {
  margin-top: 1em;
  margin-bottom: .5rem;

  text-align: center ;

  font-family: poppins;
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.25;
 
  color: #1CA3C7 ;
}
h1 .ms {
  color: #58A92D ;
}

h2 {
  margin-top: 0;
  margin-bottom: 0;

  text-align: center ;

  font-family: poppins;
  font-size: 1.15rem;
  font-weight: normal;
  line-height: 1.25;
}

h3 {
  font-family: poppins;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;

  line-height: 1.25;
  
  margin-top: 0;
  margin-bottom: 0;
}

@media only screen and (min-width: 360px) { 
  h1 { font-size: 1.33rem ; } 
  h2 { font-size: 1.25rem ; } 
  h3 { font-size: 1.25rem ; } 
}

@media only screen and (min-width: 768px) { 
  h1 { font-size: 2.5rem ; } 
  h2 { font-size: 1.75rem ; } 
  h3 { font-size: 2rem ; } 
}


p {
  margin: 0;
}