body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
    background-color: #fdfdfd;
}

.topbar {
    background-color: #2D2D2D; 
    height: 80px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; 
}

.logo {
    max-width: 22vh; 
    max-height: 30vh;
    margin: 5vh
}

.card-body p {
    text-align: justify;
}

.card-body h1 {
    color: #FFBD59;
    font-size: 42px;
}

.card-body h2 {
    color: #FFBD59;
}

.card-body {
    margin: 8vh;
}

@media screen and (max-width: 767px) {
    .topbar {
        height: auto;  
    }

    .logo {
        max-width: 15vh; 
        max-height: 30vh;
        margin: 15px;
    }

    .card-body {
        margin: 4vh;
    }
}

@media screen and (min-width: 768px) and (max-width: 1025px) {
    .topbar {
        height: auto;
    }

    .logo {
        max-width: 15vh; 
        max-height: 30vh;
        margin: 15px;
    }

    .card-body {
        margin: 4vh;
    }
}

@media (max-width: 400px){
    .topbar {
        height: auto;  
        flex-direction: column;
    }

    .logo {
        max-width: 15vh; 
        max-height: 30vh;
        margin: 10px 30px;
    }
}