* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-style: normal;
    font-weight: normal;
    font-family: 'Montserrat', serif;
}

a {
    text-decoration: none;
}

main {

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#front-page {
    width: 100%;
    height: 100vh;

    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0)), url('../assets/pictures/front-page-background.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
}

#front-page h2 {
    font-size: 5rem;
    font-weight: bold;

    color: white;
}

#front-page a {
    
    margin-top: 2rem;
    padding: 0.75rem 1.5rem;

    font-size: 22px;
    
    border-radius: 20px;
    border: 2px solid white;

}

#front-page > a:hover {
    background: white;
    color: black;
}

#articles {
    width: 100%;

    padding-top: 80px;

    display: flex;
    align-items: center;
    flex-direction: column;
}

#articles article {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

#articles article:nth-child(even) {
    flex-direction: row-reverse;
}

#articles article div {
    width: 40%;

    display: flex;
    flex-direction: column;
}

#articles article img {
    width: 40%;
}

#prices {
    width: 80%;

    padding-top: 80px;

    margin-top: 4rem;
    margin-bottom: 3rem;
}

#prices > h2 {
    margin-bottom: 2rem;
    font-size: 3.5vw;
    text-align: center;
}

#prices .cards {
    display: flex;
    justify-content: space-around;
}

#prices .card {
    width: 13vw;
    height: 32vh;

    box-shadow: 0 0.5vh 0.8vw 0 rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    padding: 1.5vh 1.1vw;

    text-align: center;
    
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

#prices .card div {
    height: 9vh;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

#prices .card h2 {
    margin: -1.5vh -1.1vw;
    padding: 0.75rem 0;

    font-size: 1.5vw;

    border-radius: 10px 10px 0 0;

    color: white;
    background-color: #363636;
}

#prices #popular {
    background-color: #4479D5;
}

#prices .card .offer-price {
    text-decoration: underline;

    font-size: 1.6vw;
    font-weight: bold;
}

#prices .card .card-info {
    justify-self: center;

    font-size: 0.8vw;
    font-style: italic;
}

#prices .card a {
    padding: 0.5rem 2rem;
    
    border-radius: 5px;
    font-size: 0.8vw;
    color: white;    
    background-color: #363636;
}

#prices .card a:hover {
    background-color: #686868;
}