* {
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    
}
body, html
{
    width: 100vw;
    min-height: 100vh;
    margin: 0!important;
    padding: 0!important;
    text-align: justify;
    word-wrap: break-word;
    display: block;
    background-color: #fff;
    color: #5f5b5b;
    font-weight: 400;
    font-family: 'Lato', sans-serif;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    color: #012169;
    background-color: #FAF7F2;
    
}
.primary {
    color: #012169;
}
.secondary {
    color: #C8102E;
}
.black {
    color: #000;
}
.dark {
    color: #424242;
}
body > * {
    
    max-width: 1920px;
    margin: 0 auto !important;
}

main {
    width: 100%;
    min-height: 75vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto 0;
    gap: 40px;
    padding: 40px;
}

article {
    width: 100%;
    padding: 80px 40px;
    text-align: center;

    display: grid;
    gap: 20px;
    position: relative;
    cursor: pointer;
    
    background-color: none;

}

h1 {
    padding: 40px;
    text-align: center;
    font-weight: 900;
    font-size: 40px;
}

h3 {
    font-size: 32px;
    letter-spacing: 1.2px;
    z-index: 3;
}

p {
    font-size: 24px;
    line-height: 1.6;
    z-index: 3;
}

article::before {

    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    transform: rotate(5deg);

    border: 1px solid #012169;
    border-radius: 25px;
    background-color: #fff;

    z-index: 2;

    box-shadow: rgb(0 0 0 / 12%) 0px 4px 16px;
}



@media (max-width: 768px) {

    main {
        padding: 18px;
    }

    article::before {

        display: none;
    
    }

    article {

        padding: 20px;
        border: 1px solid #012169;
        border-radius: 25px;
        background-color: #fff;
        
        box-shadow: rgb(0 0 0 / 12%) 0px 4px 16px;
    }

    h1 {
        padding: 20px;
        text-align: center;
        font-weight: 900;
        font-size: 40px;
    }


}
@media (max-width: 1100px) {


    main {
        flex-wrap: wrap;
    }


}

@media (min-width: 1023px) {


    article:hover::before {

        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    
        transform: rotate(5deg) scale(1.025);
    
        transition: all 0.3s ease;
    
        border: 1px solid #012169;
        background-color: #fff;
    
    }


}

p {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}