@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");

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

body {
    /* padding: 0px 5vw; */
    font-family: "Oswald", sans-serif;
}

.main-picture {
    /* width: 100%;
        height: 100%; */
    /* height: 903px; */
    background: #ffcc00;
    padding: 0px;
}

.main-button__container {
    display: flex;
    justify-content: center;
    position: relative;
}

.main-button__button {
    position: absolute;
    background: rgba(16, 17, 120, 1);
    padding: 2% 5%;
    width: fit-content;
    color: white;
    text-transform: uppercase;
    font-size: 2rem;
    transform: skew(-20deg);
    box-shadow: 0.625rem -0.625rem #ffe900;
    bottom: -70px;
    font: normal normal bold 5rem/4.375rem Oswald;
    cursor: pointer;
    transition: all 0.2s;
}

.main-button__button:active {
    transform: translateY(-3px);
}

.main-picture img {
    display: block;
    width: 100%;
    background-size: contain;
    clip-path: polygon(20% 0, 95% 0, 95% 100%, 2% 100%);
}

.main-section {
    display: flex;
    /* flex-wrap: wrap; */
    justify-items: center;
    align-items: center;
    background: #ffcc00;
    padding: 20% 10%;
    clip-path: polygon(0 10vw, 100% 0, 100% calc(100% - 10vw), 0% 100%);
    margin-top: 8%;
}

.main-section-image-container {
    display: block;
}

.main-section-image-container img {
    display: block;
    box-shadow: 1.25rem 1.25rem #101178;
    max-width: 600px;
}

.image-container-shadow-yellow img {
    box-shadow: 1.25rem 1.25rem #ffcc00;
}

.main-section-text {
    align-items: center;
    padding: 0px 10%;
    font: normal normal normal 2rem/2.18rem Oswald;
    color: #00317e;
    text-align: right;
}

.section-two {
    /* margin-top: -100px; */
    background: #101178;
}

.section-two p {
    color: #ffffff;
    text-align: left;
}

/* ###############################################################################################*/
.fb-video {
    display: flex;
    justify-content: center;
    margin-top: 5%;
    margin-bottom: 5%;
    /* margin-left: 50%;
        transform:translateX(-50%); */
}

.big-text-margin {
    padding: 20% 0px;
}

.youtube-videos {
    margin-top: 5%;
    margin-bottom: 5%;
    text-align: center;
    min-height: 350px;
}

.fb-iframe {
    margin-top: 5%;
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
    height: 350px;
    display: flex;
    justify-content: center;
}

.videos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
}

.videos-container {
    background: #ffcc00;
    padding: 20% 10%;
    clip-path: polygon(0 10vw, 100% 0, 100% calc(100% - 10vw), 0% 100%);
}

.videos-text {
    align-items: center;
    text-align: center;
    padding: 0 5%;
    margin: 0 5%;
}

.sekcija-dva {
    background: #101178;
    margin-top: -5%;
}

.sekcija-dva p {
    color: white;
}

.text-for-margin {
    margin-bottom: 5%;
}

@media (max-width: 1400px) {
    .main-section {
        flex-direction: column;
    }

    .main-section-image-container {
        margin-bottom: 10%;
        margin-top: 10%;
        align-self: flex-start;
        margin-left: 0%;
    }

    .main-section-text {
        text-align: left;
        padding: 0;
    }

    .main-section-image-container img {
        width: 100%;
    }

    .main-section-image-container {
        margin-right: 5%;
    }
}

@media (max-width: 1000px) {
    .section-one {
        margin-top: 15%;
    }

    .main-button__button {
        bottom: -8vh;
    }

    .videos-grid {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
    }
}

@media (max-width: 800px) {
    .main-section-image-container img {
        width: 80%;
    }
    .fb-video-exchange {
        display: flex;
        justify-content: center;
        width: 500px;
    }

    .fb-iframe {
        height: 200px;
    }
}

@media (max-width: 600px) {
    html {
        font-size: 70%;
    }

    .main-button__button {
        bottom: -6vh;
    }

    .fb-iframe {
        height: 150px;
    }

    .main-section-image-container img {
        width: 70%;
    }

    .fb-video-exchange {
        display: flex;
        justify-content: center;
        width: 300px;
    }
}

@media (max-width: 500px) {
    html {
        font-size: 55%;
    }

    .main-button__button {
        bottom: -5vh;
        font-size: 3rem;
    }

    .fb-video-exchange {
        display: flex;
        justify-content: center;
        width: 200px;
    }
}

@media (max-width: 400px) {
    .fb-iframe {
        height: 100px;
    }
}