.name{
    max-width: 45%;
    overflow: auto;
}


.clock-text{
    max-width: 45%;
    border: solid;
}


.name-clock-panel{
    width: 100%;
    display: flex;
    justify-content: space-around;
}

#navbar-brand{
    justify-content: flex-end;
    flex: 1;
}

#navMenu{
    flex: 1;
}

#pgn-copy{
    flex: 2;
    justify-content: flex-end;
}


#closed-menu{
    flex: 1;
}




#pgn {    
    overflow: auto;
    white-space: nowrap;
    border: solid;

}


.name{
    overflow: auto;
    white-space: nowrap;
    width: 70%;
}

.status{
    width: 90vw;
    color: #CC0000;
    font-weight: bold;
    font-size: x-large;
    /* margin-left: 1vw; */
    display: block;
    align-self: center;
    text-align: center;
}

 /* Hide scrollbar for Chrome, Safari and Opera */
#pgn::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#pgn {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}



main{
    margin-left: auto;
    margin-right: auto;
    margin-top: 4vh;
    margin-bottom: auto;
    display: flex;
    flex-direction: column;
    align-content: center;
}



@media screen and (orientation: landscape) {

    body{
	width: 70vh;
	margin-left: auto;
	margin-right: auto;
    }

    .navbar{
	width: 70vh;
	margin-left: auto;
	margin-right: auto;
    }

    #pgn{
	width: 35vh;
    }



}

@media screen and (orientation: portrait) {

    body{
	width: 98vw;
	margin-left: auto;
	margin-right: auto;
    }    

    #pgn{
	width: 50vw;
    }



}