@import url('https://fonts.googleapis.com/css2?family=Tagesschrift&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html{
  color: white;
  font-family: "Montserrat", sans-serif;
}

::-webkit-scrollbar{
  display: none;
}

.sekce{
  height: 100vh;
  width: 100%;
  padding: 40px 200px;
}

/* Info boxy */
.infoBox{
  max-width: 400px;
  background-color: rgb(20, 20, 20);
  padding: 20px;
  border-radius: 12px;
  text-align: justify;
  font-size: 1.3rem;
  position: absolute;
  border: 3px solid #888888;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.555);
}

/* ÚVOD sekce */
.uvod__title{
  color: snow;
  font-size: 8rem;
  font-family: tagesschrift;
  text-align: center;
}

.uvod--sekce{
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(images/nadrazi.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, 0.65);
  background-blend-mode: multiply;
}

/* WINTON sekce */
.winton__title{
  text-align: center;
  font-size: 4rem;
  margin-bottom: 30px;
  color:rgb(255, 255, 255);
  font-family: "Bebas Neue", sans-serif;
  
}

.winton__img--cernobila{
  width: 45%;
  border-radius: 50%;
  box-shadow: 0px 0px 29px 12px rgba(168, 168, 168, 0.57);
  -webkit-box-shadow: 0px 0px 29px 12px rgba(167, 167, 167, 0.57);
  -moz-box-shadow: 0px 0px 29px 12px rgba(197, 197, 197, 0.57);
}

.winton__info--sekce {
  display: flex;
  justify-content: flex-start;
  gap: 40px;
  align-items: center;
  flex-direction: column;
  position: relative;
  background: #242424;
  background: linear-gradient(180deg,rgba(36, 36, 36, 1) 0%, rgba(23, 23, 23, 1) 37%, rgba(23, 23, 23, 1) 68%, rgba(36, 36, 36, 1) 100%);
}

/* info boxy winton */
.box1{
  left: 10%;
  top: 20%;
}

.box2{
  right: 8%;
  top: 48%;
}

.box3{
  left: 10%;
  top: 70%;
}

/* VLAK, ZACHRANA sekce */
.zachrana__title {
  text-align: center;
  font-size: 4rem;
  margin-bottom: 30px;
  color:rgb(255, 255, 255);
  font-family: "Bebas Neue", sans-serif;
}

.vlak--img {
  width: 55%;
  position: absolute;
  bottom: 15%;
  left: -1100px;
}

.zachrana--sekce{
  background: #242424;
  background: linear-gradient(180deg, rgba(36, 36, 36, 1) 0%, rgba(23, 23, 23, 1) 27%, rgba(23, 23, 23, 1) 74%, rgba(36, 36, 36, 1) 100%);
}

.vlak--sekce {
  background-image: url(images/vlak/mapa.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(0,0,0,0.5);
  background-blend-mode: multiply;
  padding: 0px;
  height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.cesta--svg{
  width: 70%;
  height: 350px;
  position:absolute;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
}

#trasa--cara {
  stroke-dasharray: 1000;
  stroke: black;
  stroke-dasharray: 30 30;
  stroke-linecap: round;
}

#trasa--vypln {
  stroke-dasharray: 4000;   
  stroke-dashoffset: 4000;

}

.vlak__stat--csr{
  font-size: 2.2rem;
  position: absolute;
  top: 30%;
  left: 5%;
  font-weight: bolder;
}

.vlak__stat--brit{
  font-size: 2.2rem;
  position: absolute;
  top: 30%;
  right: 10%;
  font-weight: bolder;
}

/* plán záchrany info */
.zachrana__info{
  height: auto;
  width: 100%;
}

.box4, .box5, .box6, .box7{
  max-width: 700px;
  margin: 0 auto;
}

.box4{
  left: 21%;
  top: 20%;
}

.box5{
  right: 21%;
  top: 37%;
}

.box6{
  left: 21%;
  top: 54%;
}

.box7{
  right: 21%;
  top: 71%;
}

.stick{
  position: absolute;
  top: 50%;
  right: 47.8%;
  transform: translate(-50%, -50%);
  height: 400px;
  width: 25px;
  background: rgb(26, 30, 255);
  box-shadow: 0px 0px 40px 20px rgba(0, 4, 230, 0.65);
  -webkit-box-shadow: 0px 0px 40px 20px rgba(3, 0, 153, 0.65);
  -moz-box-shadow: 0px 0px 40px 20px rgba(2, 0, 105, 0.65);
}

/* ZACHRÁNĚNI sekce */
.zachraneni__title{
  text-align: center;
  font-size: 4rem;
  margin-bottom: 10px;
  font-family: "Bebas Neue", sans-serif;
}

.zachraneni--sekce {
  background: #242424;
  background: linear-gradient(180deg,rgba(36, 36, 36, 1) 0%, rgba(51, 51, 51, 1) 37%, rgba(51, 51, 51, 1) 63%, rgba(36, 36, 36, 1) 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

.zachraneni__osoby {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: center;
}

.zachraneni__text--dole{
  text-align: center;
}

/* Karty osob */
.karta {
  width: 330px;
  height: 350px;
  margin: 1rem auto;
  perspective: 1000px;
  cursor: pointer;
}

.karta--uvnitr, .karta--uvnitr2 {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  
}

.karta:hover .karta--uvnitr {
  transform: rotateY(180deg);
}

.karta:hover .karta--uvnitr2{
  transform: rotateY(-180deg);
}

.fotka, .karta--text {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.fotka {
  background: white;
  border: 1px solid #e5e7eb;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  font-size: 1.6rem;
}

.karta--text {
  text-align: justify;
  background: #161616;
  color: white;
  transform: rotateY(180deg);
  padding: 20px;
}

.karta--obrazek1{
  background-image: url(images/osoby/vera.png);
}

.karta--obrazek2{
  background-image: url(images/osoby/joe.png);
}

.karta--obrazek3{
  background-image: url(images/osoby/Hugo.jpg);
}

.karta--obrazek4{
  background-image: url(images/osoby/Zuzka.jpg);
}

/* OCENĚNÍ sekce */

.oceneni__title{
  text-align: center;
  font-size: 4rem;
  margin-bottom: 30px;
  font-family: "Bebas Neue", sans-serif;
  margin-bottom: 30px;
}

.oceneni--sekce{
  background: #141414;
  background: linear-gradient(180deg,rgb(27, 27, 27) 0%, rgb(54, 54, 54) 30%, rgba(38, 38, 38, 1) 72%, rgb(27, 27, 27) 100%);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}

/* Ocenění boxy */
.oceneni__boxy{
  width: 1000px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.oceneni--box {
  position: relative;
  width: 300px;
  height: 350px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.555);
  cursor: pointer;
}

.oceneni--img {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 1.3rem;
  font-weight: bold;
}

.oceneni--img span{
  background-color: #000000a8;
  width: 100%;
  height: 85px;
  padding: 5px 0px;
}

.oceneni--top{
  align-items: flex-start;
  background-position: bottom;
}

.oceneni--bottom{
  align-items: flex-end;
}

.oceneni--text {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.76);
  color: white;
  padding: 20px;
  box-sizing: border-box;
  transition: bottom 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.oceneni--box.active .oceneni--text {
  bottom: 0;
}

.oceneni--box:hover .oceneni--text {
  bottom: 0;
}

.oceneni1{
  background-image: url(images/bez_pozadi/oceneni1.png);
}

.oceneni2{
  background-image: url(images/bez_pozadi/oceneni2.png);
}

.oceneni3{
  background-image: url(images/bez_pozadi/oceneni3.png);
}

.oceneni4{
  background-image: url(images/bez_pozadi/oceneni4.png);
  background-position-y: -10px;
}

.oceneni5{
  background-image: url(images/bez_pozadi/oceneni5.png);
  background-position: center;
}

.oceneni6{
  background-image: url(images/bez_pozadi/oceneni6.png);
  background-position-y: 50px;
}

/* ZÁVĚR sekce */
.zaver__title{
  font-size: 4rem;
  margin-bottom: 30px;
  font-family: "Bebas Neue", sans-serif;
}

.zaver--sekce{
  background: #141414;
  background: linear-gradient(180deg,rgba(20, 20, 20, 1) 0%, rgba(33, 33, 33, 1) 30%, rgba(31, 31, 31, 1) 72%, rgba(20, 20, 20, 1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.zaver__odkazy--dole{
  position: absolute;
  bottom: 0%;
  padding: 20px;
}

.zaver__odkazy--dole a{
  margin-left: 15px;
  color: white;
  text-decoration: none;
  transition: 500ms;
}

.zaver__odkazy--dole a:hover{
  color: rgb(85, 85, 255);
}

.zaver_winton--img{
  width: 500px;
  height: 500px;
  border-radius: 100px;
  box-shadow: 0px 0px 29px 12px rgba(168, 168, 168, 0.57);
  -webkit-box-shadow: 0px 0px 29px 12px rgba(167, 167, 167, 0.57);
  -moz-box-shadow: 0px 0px 29px 12px rgba(197, 197, 197, 0.57); 
}

.zaver--shrnuti{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  bottom: 55px;
  font-size: 1.5rem;
  gap: 50px;
}

.zaver__text{
  width: 700px;
  padding: 20px;
  border: 3px solid #888888;
  background-color: rgb(20, 20, 20);
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.555);
}

@media only screen and (max-width: 768px) {
  .sekce {
    padding: 30px 20px;
    height: 100vh;
  }

  .uvod__title {
    font-size: 6rem;
    text-align: center;
  }

  .winton__img--cernobila {
    width: 55%;
  }

  .winton__info--sekce{
    overflow: scroll;
  }

  .infoBox {
    position: static;
    width: 100%;
    font-size: 1rem;
  }

  .vlak--img {
    width: 90%;
    left: -1000px;
    bottom: 5%;
  }

  .vlak__stat--csr,
  .vlak__stat--brit {
    font-size: 1.4rem;
    top: 32.6%;
  }

  .vlak__stat--csr {
    left: 3%;
  }

  .vlak__stat--brit {
    right: 8%;
  }

  #trasa--cara {
  stroke-dasharray: 40;
  stroke-width: 20px;
  }

  #trasa--vypln{
    stroke-width: 22px;
  }

  .cesta--svg {
    width: 70%;
    height: 250px;
    left: 2%;
  }

  .stick{
    top: 54%;
  }

  .zachrana--sekce{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 70px
  }

  .zachrana--sekce .infoBox {
    position: absolute;
    width: 100%;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
  }

  .box4{
    top: 30%;
  }
  
  .box5{
    top: 47%;
  }
  
  .box6{
    top: 64%;
  }
  
  .box7{
    top: 81%;
  }

  .zachraneni__osoby {
    flex-direction: column;
    gap: 20px;
    overflow: scroll;
  }

  .oceneni__boxy {
    width: 500px;
    justify-content: center;
    overflow: scroll;
  }

  .oceneni--img span {
    font-size: 1rem;
    height: auto;
    padding: 10px;
  }

  .oceneni4 {
    background-position-y: 100%;
  }

  .oceneni5{
    background-position-y: 100%;
  }

  .oceneni6{
    background-position-y: 70%;
  }

  .oceneni--bottom{
    align-items:flex-start;
  }

  .zaver--shrnuti {
    flex-direction: column;
    gap: -px;
    font-size: 1.1rem;
    bottom: 0;
    justify-content: flex-start;
  }

  .zaver_winton--img {
    width: 300px;
    height: 300px;
    border-radius: 50%;
  }

  .zaver__text {
    width: 100%;
    padding: 0 15px;
    text-align: center;
  }

  .zaver__odkazy--dole {
    position: static;
    padding: 10px 0;
    text-align: center;
    flex-wrap: wrap;
  }

  .zaver__odkazy--dole a {
    display: inline-block;
    font-size: 0.9rem;
    margin-left: 30px;
  }

}