*{
    box-sizing: border-box;
}

body{
    padding: 0;
    margin: 0;
    background-color: #F2F2F2;
}

header{
    width: 100%;
    height: auto;
}

.header-container{
    justify-content: space-between;
    align-items: center;
    padding: 50px 40px;
    color: rgb(74, 74, 74);
}

.header-container > h3{
    font: 600 4vw/1em "Trebuchet MS", sans-serif;
    text-align: center;
    margin: auto;
    width: 70%;
}

.header-container > p{
    font: 500 1.3em/1em "Trebuchet MS", sans-serif;
    text-align: center;
    padding-top: 20px;
    width: 700px;
    margin: auto;
    width: 70%;
}

/*----------------MAIN-----------------*/

main {
    width: 100%;
    height: auto;
}

.main-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    margin-bottom: 150px;
}

.main-container > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    width: 90%;
    margin: 0 auto;
    padding: 20px;
}

.main-beginner > div, 
.main-all > div {
    display: flex;
    flex-wrap: wrap; 
    gap: 25px;       
    justify-content: center; 
    width: 100%;
    padding: 10px 0;
}

.main-container > div > h3{
    padding: 10px 0;
    border-bottom: 1px solid rgb(204, 204, 204);
    font: 600 1.2em/1.4em "Trebuchet MS", sans-serif;
    color: #555;
    margin: 40px 0 10px 0;
    text-align: left;
    width: 100%;
    max-width: 1500px;
}

article {
    flex: 1 1 350px; 
    max-width: 100%; 
    background-color: #F2F2F2;
    padding: 10px;
    text-align: center;
    height: 340px;
    border-radius: 10px;
    box-shadow: 6px 6px 10px rgba(0,0,0,.1), -6px -6px 10px rgba(255, 255, 255, 0.9);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

article:hover {
    box-shadow: 6px 6px 12px rgba(0,0,0,.3), -6px -6px 6px white;
    transform: translateY(-3px); /* Moves the article upwards */
}


article img{
    margin: 1px;
    padding: 1px;
    max-width: 100%;
    height: 80%;
    border-radius: 7px;
    max-height: 250px;
}

article h4{
    font: 600 0.9em/1em "Trebuchet MS", sans-serif;
    margin: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #474747;
}

article p{
    font: 500 0.75em/1em "Trebuchet MS", sans-serif;
    margin: 2px;
    text-align: center;
    color: #1d3879;
    text-align: justify;
}

/*----------------MEDIA----------------*/

@media screen and (max-width: 980px) {
    .header-container > h3{
        font:600 6vw/1em "Trebuchet MS", sans-serif;
    }

    .header-container > p{
        font: 500 1.3em/1em "Trebuchet MS", sans-serif;
        width: 100%;
    }

    .main-container > div{
        width: 100%;
    }

    article{
        flex: 1 1 100%;
    }
}