*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.box{
    max-width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 50px;
    font-size: 32px;
    color: rgb(92, 105, 126);
    padding-left: 900px;
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    top: 0;
    left: 0;
    background-image: url(obrazky/stalin.jpg);
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: fadeIn 3s ease-in-out forwards;
    position: relative;
    z-index: 1;
    color: rgb(214, 255, 255);
    text-align: center;
    text-shadow: 0 0 10px black;
}
@keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(1.05);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
}
.box2{
    color: white;
    width: 100%;
    height: 100vh;
    background-color: rgb(31, 34, 34);
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 40px;
    justify-content: center;
}
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    .video-background {
      position: absolute;
      min-width: 100%;
      height: 100vh;
      z-index: -1;
      object-fit: cover;
    }
    .box3 {
      padding: 20px;
      border-radius: 10px;
      margin-top: 100px;
      min-height: 845px;
    }
    .obrazek {
  width: 400px;
  border-radius: 15%;
  border: grey solid 2px;
  transform: scale(1);
  transition: transform 0.6s ease, opacity 2s ease;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.6s ease, opacity 2s ease;
}


.obrazek.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.obrazek:hover {
  transform: scale(1.1);
}

.obrazek.animate-in {
  opacity: 1;
}

@keyframes flyInUp {
  from {
    transform: translateY(150px) scale(1);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
    .strong{
      color: #1f1f1e;
      font-size: 29px;
    }
    .main{
      display: flex;
      justify-content: center;
      gap: 100px;
      flex-wrap: wrap;
    }

    .left-text {
      width: 700px;
      height: 100%;
      padding: 15px;
      border-radius: 10px;
      margin-top: 50px;
      font-size: 24px;
      color: #030500;
      text-align: left;
      background-color: rgba(255, 255, 255, 0.5);
      opacity: 0;
      pointer-events: none;  
      transition: opacity 0.5s ease;
    }


.left-text.visible {
  opacity: 1;
  pointer-events: auto;
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutToLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.left-text.animate-in {
  animation: slideInFromLeft 2s forwards;
}

.left-text.animate-out {
  animation: slideOutToLeft 2s forwards;
}

    .image-box {
      padding: 15px;
      border-radius: 10px;
      padding-right: 200px;
      font-size: 18px;
      text-align: center;
    }

    .image-box img {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
    }
.box4{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: url(obrazky/stalinsmrt.jpg);
    background-repeat: no-repeat;  
    background-size: cover;
  }
  
body::-webkit-scrollbar {
  display: none;
}
body{
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
.title {
    font-size: 2em;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    animation: typing 4s steps(40, end), blink-caret .75s step-end infinite;
}
.scroll-button1 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(250, 26, 26, 0.9);
    border: 1px solid black;
    padding: 10px 15px;
    font-size: 1em;
    border-radius: 8px;
    cursor: pointer;
    font-size: 30px;
    z-index: 10;
    transition: background-color 0.3s;
    width: 50px;
    height: 50px;
    animation: fadeIn 3s ease-in-out forwards;
}
.scroll-button2 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    background-color: rgba(250, 26, 26, 0.9);
    border: 1px solid black;
    padding: 10px 15px;
    margin-top: 20px;
    font-size: 1em;
    border-radius: 8px;
    cursor: pointer;
    font-size: 30px;
    z-index: 10;
    transition: background-color 0.3s;
    width: 50px;
    height: 50px;
    animation: fadeIn 3s ease-in-out forwards;
}
.scroll-button3{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    background-color: rgba(250, 26, 26, 0.9);
    border: 1px solid black;
    padding: 10px 15px;
    margin-top: 20px;
    font-size: 1em;
    border-radius: 8px;
    cursor: pointer;
    font-size: 30px;
    z-index: 10;
    transition: background-color 0.3s;
    width: 50px;
    height: 50px;
    animation: fadeIn 3s ease-in-out forwards;
}

.scroll-button4{
  display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    background-color: rgba(250, 26, 26, 0.9);
    border: 1px solid black;
    padding: 10px 15px;
    margin-top: 20px;
    font-size: 1em;
    border-radius: 8px;
    cursor: pointer;
    font-size: 30px;
    z-index: 10;
    transition: background-color 0.3s;
    width: 50px;
    height: 50px;
    animation: fadeIn 3s ease-in-out forwards;
}

.scroll-button1:hover,
.scroll-button2:hover,
.scroll-button3:hover,
.scroll-button4:hover
{
    background-color: #ddd;
}

.heading1 {
    font-size: 65px;
    text-align: center;
    padding-bottom: 80px;
    border-radius: 8px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.heading2 {
    color: #00fff2;
    font-size: 65px;
    text-align: center;
    padding-bottom: 100px;
    border-radius: 8px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.heading3{
    color: #570000;
    font-size: 65px;
    text-align: center;
    padding-bottom: 200px;
    border-radius: 8px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
p{
    font-size: 17px;
}
.content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px;
    line-height: 1.5;
}
.content2{
    max-width: 1000px;
    padding: 10px;
    border: 2px grey solid;
    border-radius: 10px;
    background-color: rgba(252, 250, 237, 0.7);
    line-height: 1.5;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease, transform 1s ease;
  }

  .content2.visible {
  opacity: 1;
  transform: translateY(0);
}
  
.scroll-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 200px;
  height: 70px;
  font-size: 30px;
  background-color: rgba(255, 255, 255, 0);
  color: rgb(173, 235, 243);
  border: hidden;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s, transform 0.3s;
}
.scroll-button:hover {
  background-color: #ddd;
  color: black;
  transform: scale(1.1);
}
.section {
    padding: 20px;
    border-bottom: 1px solid #ccc;
    background-color: rgba(245, 255, 211, 0.85);
}
.quote {
    text-align: center;
    font-style: italic;
    opacity: 0;
    animation: fadeInQuote 2s ease-in forwards;
    animation-delay: 2s;
}
@keyframes fadeInQuote {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

  .text-box {
    max-width: 900px;
    margin-top: 50px;
    padding: 30px;
    border-radius: 16px;
    border: 2px solid black;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(0, 0, 0, 0.2);
    transform: translateY(100px);
    opacity: 0;
    transition: all 1s ease-out;
  }

p{
    text-align: center;
    font-size: 25px;
}

  .text-box.visible {
    transform: translateY(0);
    opacity: 1;
  }

  @keyframes slideInRight {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

.image1{
    width: 300px;
    margin-right: 50px;
    border-radius: 70%;
    border: solid black 5px;
  }
.image2{
  width: 300px;
  margin-left: 50px;
  border: 2px black solid;
  border-radius: 5%;
}

.image1,
.image2 {
  opacity: 0;
  transform: translateX(0);
  transition: transform 0.3s ease, opacity 1s ease;
}

.animate-image1 {
  opacity: 1;
  transform: translateX(0);
  animation: flyInLeft 1s ease forwards;
}

.animate-image2 {
  opacity: 1;
  transform: translateX(0);
  animation: flyInRight 1s ease forwards;
}
.animate-wrapper1 {
  animation: flyInLeft 1s ease forwards;
}

.animate-wrapper2 {
  animation: flyInRight 1s ease forwards;
}

@keyframes flyInLeft {
  from {
    transform: translateX(-200px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes flyInRight {
  from {
    transform: translateX(200px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes flyOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-200px);
    opacity: 0;
  }
}

@keyframes flyOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(200px);
    opacity: 0;
  }
}
.fly-out-left {
  animation: flyOutLeft 1s ease forwards;
}

.fly-out-right {
  animation: flyOutRight 1s ease forwards;
}
.image-wrapper {
  opacity: 0;
  transform: translateX(0); 
  transition: opacity 1s ease, transform 1s ease;
}
.josif-image {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.image-wrapper3.visible .josif-image {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .box {
    padding-left: 20px;
    text-align: center;
    font-size: 24px;
  }

  .box2 {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    height: auto;
  }

  .image-wrapper,
  .image-wrapper5 {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .image1,
  .image2,
  .obrazek {
    width: 90%;
    height: auto;
  }

  .heading1,
  .heading2,
  .heading3 {
    font-size: 32px;
    padding-bottom: 40px;
  }

  .left-text {
    width: 100%;
    font-size: 18px;
    margin: 0;
    padding: 10px;
  }

  .main {
    flex-direction: column;
    gap: 30px;
    padding: 10px;
  }

  .video-background {
    height: auto;
    min-height: 100vh;
    object-fit: cover;
  }

  .box3, .box4 {
    height: auto;
    padding: 20px;
  }

  .text-box {
    font-size: 16px;
    padding: 10px;
  }

  .strong {
    font-size: 20px;
  }

  .title {
    font-size: 28px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .box {
    padding-left: 100px;
    font-size: 28px;
  }

  .heading1,
  .heading2,
  .heading3 {
    font-size: 48px;
  }

  .left-text {
    width: 90%;
    font-size: 20px;
  }

  .main {
    gap: 40px;
  }

  .obrazek {
    width: 300px;
  }
}

        .heading4{
            color: snow;
            padding-top: 95px;
            font-size: 65px;
            text-align: center;
            padding-bottom: 80px;
            border-radius: 8px;
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }

        section {
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
            background-color: #3f3f69;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            animation: fadeInSection 1.5s ease-in;
            padding: 20px;
            opacity: 0; 
            transform: translateX(0); 
            transition: all 0.8s ease; 
        }


        .text{
          text-align: left;
        }
        p {
            line-height: 1.6;
        }
        h2{
          font-size: 30px;
        }
        .box5{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #38384b;
            color: #333;
            width: 100%;
            text-align: left;
            color: snow;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .grid-container {
            display: grid;
            text-align: left;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            max-width: 1200px;
            margin: auto;
            padding: 20px;
        }

        
        .left-section {
            transform: translateX(-100px);
        }

        .left-section.visible {
            opacity: 1;
            transform: translateX(0);
        }

        
        .right-section {
            transform: translateX(100px);
        }

        .right-section.visible {
            opacity: 1;
            transform: translateX(0);
        }

        section:hover {
            transform: scale(1.03);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow:  20px 30px 40px rgba(39, 2, 88, 0.2);
        }


        @media (max-width: 768px) {
          
    .box5{
        background-color: #3f3f69;
    }

    .grid-container {
        grid-template-columns: 1fr; 
        padding: 10px;
        background-color: #38384b;
    }

    .scroll-button4{
      margin-top: 53px;
      padding-bottom: 15px;
      width: 50px;
      height: 40px;
    }

    .heading4 {
        font-size: 40px;
        padding-top: 50px;
        padding-bottom: 40px;
        background-color: #38384b;
    }

    section {
        padding: 15px;
    }

    h2 {
        font-size: 24px;
    }

    .left-section, .right-section {
        transform: translateX(0);
        opacity: 1;
    }

    section:hover {
        transform: scale(1); 
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
}

/* konec projektu */