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

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

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

#cardsWrapper {
    padding-top: 250px;
    padding-bottom: 250px;
}
.cards img {
    margin: 15px;
    width: 80%;
    transition: transform 0.2s;
}
img:hover {
    transform: scale(1.1);
}
.bgYellow {
    background-color: #ffe900;
}
#modalImg {
    border-radius: 20px;
}
.main-picture {
    width: 100%;
    /* height: 100vh; */
    background: #ffcc00;
    padding: 0px;
}

.main-picture-svg {
    margin: 0px auto;
    width: 60%;
    padding-top: 20%;
    padding-bottom: 20%;
}

.main-picture-background {
    background: #101178;
    height: 100%;
    clip-path: polygon(20% 0, 95% 0, 95% 100%, 2% 100%);
}
.main-button__container {
    display: flex;
    justify-content: center;
    position: relative;
}

.main-button__button {
    position: absolute;
    background: #101178;
    padding: 3% 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 4.5rem Oswald;
    cursor: pointer;
    transition: all 0.2s;
}

@media (max-width: 900px) {
    .main-button__button {
        font: normal normal bold 3.5rem Oswald;
    }
}

@media (max-width: 700px) {
    .main-button__button {
        font: normal normal bold 2rem Oswald;
        bottom: -6vh;
    }
}

@media (max-width: 450px) {
    .main-button__button {
        font-size: 1.3rem;
        bottom: -5vh;
    }
}

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

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