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

:root {
    --modern: 'Roboto', sans-serif;;
    --dark: #110022;
    --color: #7F00FF;
    --light: #fff;
    --otherDark: #2B2135;
}

.invisible{
    visibility: hidden;
}

.card4{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: var(--color);
    height: 275px;
    width: 350px;
    margin: 2rem 0;
    border-radius: 25px;
    cursor: pointer;
}

#icon{
    color:var(--light);
    font-size: 200%;
}

.contact-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    
}

#contact-info{
    background-color: var(--otherDark);
    font-weight: 300;
    padding: 1rem;
    border-radius: 25px;
    font-size: 100%;
}

@media screen and (min-width: 768px){
    .contact-container{
        flex-direction: row;
        justify-content: center;
        height: 75vh;
    }
    .card4{
        margin: 0 2rem;
    }
}