@media (orientation: portrait) {

    #topBarContainer {

        width: 100%;
        padding-left: 50px;
        padding-right: 50px;
        display: flex;
    
    }
    
    #topBarLogoContainer {
    
        width: 200px;
        aspect-ratio: 1/1;
        background-image: url("../../images/wblogo.jpg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    
    }
    
    #topBarTextContainer {
    
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    
    }

    #topBarText {

        font-size: 20pt;
        text-align: center;
        font-style: italic;
    
    }

}

@media (orientation: landscape) {

    #topBarContainer {

        width: 100%;
        display: flex;
        padding-left: 75px;
        padding-right: 75px;
    
    }
    
    #topBarLogoContainer {
    
        width: 200px;
        aspect-ratio: 1/1;
        background-image: url("../../images/wblogo.jpg");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    
    }
    
    #topBarTextContainer {
    
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    
    }

    #topBarText {

        font-size: 20pt;
        text-align: center;
        font-style: italic;
    
    }

}