body {
    font-family: 'Poppins', sans-serif;
}

.card-width{
    width: 45%;
}

.card-font{
    font-family: 'Dancing Script', cursive;
}

.guest-font{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.card-font-2 {
    font-family: 'Poppins', sans-serif;
}


.card-texty, .date-text, .venue-text, .host-text, .invite-text, .cta, .other-desc, .location-text, .contacts, .time-text, .badge-text {
    left: 50%;
    transform: translateX(-50%);
    color: #e1bd6c;
}

.card-texty {
    top: 20%;
    font-size: 4rem;
}

.host-text{
    top: 10%;
}

.invite-text {
    top: 15%;
}

.date-text{
    bottom: 50%;
}

.venue-text{
    bottom: 46%;

}

.cta {
    bottom: 10%;
}

.other-desc {
    bottom: 40%;
}

.location-text{
    bottom: 36%;
}

.time-text{
    bottom: 30%;
}

.badge-text{
    bottom: 26%;
}

.contacts{
    bottom: 20%;
}

/* Sidebar */

.sidebar{
    width: 19vw;
    height: 100vh;
    position: fixed;
    padding-top: 6%;
    top: 0;
    left: 0;
    box-shadow: 8px 10px 40px rgba(0,0,0,.5);
    background: rgba(0,0,0,.295);
    backdrop-filter: blur(5px);
    border-left: 1px solid rgba(0,0,0,.2);
    border-top: 1px solid rgba(0,0,0,.2);
}

.extra-side-bar{
    margin-left: 21%;
}

.main-bar{
    margin-left: 19%;
}


/* Media Query */
@media only screen and (max-width: 740px) {
    .main-bar, .extra-side-bar, .profile-card{
        margin-left: 0;
    }

    .card-width {
        width: 40%;
    }

    .sidebar{
        display: none;
    }

    .host-text {
        font-size: 1rem;
    }

    .guest-font{
        text-decoration: underline;
    }

    .badge-text{
        left: 20%;
        bottom: 17%;
    }

    .card-texty{
        font-size: 2.2rem;
        top: 26%;
    }

    .invite-text{
        top: 14%;
        font-size: 0.8rem;
    }

    .date-text{
        left: 48%;
        bottom: 45%;
        font-size: 1.2rem;
    }

    .venue-text{
        bottom: 32%;
        font-size: 20px;
    }

    .location-text{
        bottom: 28%;
        font-size: 15px;
    }

    .other-desc{
        display: none;
    }
    
    .contacts{
        bottom: 21%;
    }

    .cta {
        left: 44%;
        display: flex;
        /* padding: 0 3px; */
        /* justify-content: ; */
        align-items: center;
    }

    .time-text{
        bottom: 40%;
    }
}

@media (max-width:420px){

    .cta .btn{
        font-size: 3vw;
    }

    .host-text {
        font-size: .7rem;
    }

    .card-texty{
        font-size: 1.6rem;
        top: 26%;
    }
    

    .invite-text{
        top: 14%;
        font-size: 0.55rem;
    }

    .date-text{
        left: 48%;
        bottom: 47%;
        font-size: 0.9rem;
    }

    .venue-text{
        bottom: 32%;
        font-size: 10px;
    }

    .location-text{
        bottom: 28%;
        font-size: 12px;
    }

    .other-desc{
        display: none;
    }
    
    .contacts{
        bottom: 21%;
        font-size: 10px;
    }

    .cta {
        left: 44%;
        display: flex;
        /* padding: 0 3px; */
        /* justify-content: ; */
        align-items: center;
    }

    .time-text{
        bottom: 40%;
        font-size: 10px;
    }
}

@media (max-width:300px){
    .invite-text{
        top: 14%;
        font-size: 0.5rem;
    }

    .card-texty{
        font-size: 1.0rem;
        top: 28%;
    }
}