@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@900&display=swap');

.wrapper{
    margin-top: 5px;
}

.align{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: fit-content;
}

img{
    max-width: 100%;
}

.video-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #19abe6;
    width: 100%;
}

.text-wrapper{
    font-family: 'Libre Franklin', sans-serif;
    font-size: 1.2rem;
    width: 50%;
    margin-top: 6%;
    margin-bottom: 3%;
    text-align: center;
    color: #122d42;
}

.video-wrapper{
    margin-bottom: 10%;
}

.video{
    width: 400px;
}

@media (max-width: 500px){
    .video-container{
        text-align: center;
    }

    .text-wrapper{
        font-family: 'Libre Franklin', sans-serif;
        font-size: 0.5rem;
        width: 65%;
        margin-top: 6%;
        margin-bottom: 3%;
        text-align: center;
        color: #122d42;
    }

    .video{
        width: 80%;
    }
}

@media (max-width: 1400px){
    .text-wrapper{
      width: 90%;
      font-size: 1.0rem;
    }
}

@media (max-width: 1200px){
    .text-wrapper{
      width: 90%;
      font-size: 0.9rem;
    }
}

@media (max-width: 1000px){
    .text-wrapper{
      width: 90%;
      font-size: 0.8rem;
    }
}

@media (max-width: 800px){
    .text-wrapper{
      width: 90%;
      font-size: 0.7rem;
    }
}

@media (max-width: 700px){
    .text-wrapper{
      width: 90%;
      font-size: 0.6rem;
    }
}

@media (max-width: 500px){
    .text-wrapper{
        width: 80%;
        font-size: 0.7rem;
        font-size: 0.5rem;
    }
}

@media (max-width: 453px){
      .text-wrapper{
        width: 65%;
    }
}

@media (max-width: 420px){
      .text-wrapper{
        width: 70%;
        font-size: 0.4rem;
    }
}

@media (max-width: 380px){
      .text-wrapper{
        width: 75%;
    }
}

@media (max-width: 354px){
      .text-wrapper{
        width: 80%;
    }
}

@media (max-width: 332px){
      .text-wrapper{
        width: 85%;
    }
}


