@font-face {

    font-family: ibm;

    src: url("font.ttf");

}



.topbar{

    display: flex;

    width: 100%;

    background-color: aquamarine;

    justify-content: center;

    align-items: center;

}



p{

    margin-top: 8px;

    margin-bottom: 8px;

}



.topbar p {

    margin-left: 4px;

    margin-right: 4px;

}



body{

    margin: 0;

    height: 100%;

    display: flex;

    flex: 1;

    flex-direction: column;

    font-family:  ibm;

    background-color: black;

}



html {

    display: flex;

    flex-direction: column;

    height: 100%;

    image-rendering: pixelated;



}



p {

    font-size: 1.25rem;

}





.center {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}



.browser {

    background-color: rgb(0, 0, 0);

    height: 100%;

    display: flex;

    flex-direction: column;

    width: 100%;

 overflow-x: hidden;

}



.brcontent {

    padding: 2rem;

    flex:1;

    border: 5px rgb(7, 59, 83) solid;

    color: azure;

    height: 100%;

    overflow-y: auto;

    overflow-x: hidden;

}



.outlined {

    border: 5px rgb(7, 59, 83) solid;

    flex: 1;

    width: 100%;

    height:100%;

}





 h1 {

    margin-top: 0;

    margin-bottom: 0;

}



.mainvp{

    height: 100%;

    flex:1;

    display: flex;

    flex-direction: column;

    overflow-x: hidden;

}



.browser .topbar, .sidebar .topbar {

    background-color: rgb(7, 59, 83);

    color: azure;

}





.tbc {

    width: 100%;

    text-align: center;

}



a {

    color: yellow;

    text-decoration: underline;

    cursor: pointer;
    display:block;
}

.s {

    color: black!important;

    cursor: default!important;

}




@media only screen and (min-width: 1000px) {

    .browser {

        width: 100% !important;

    }



    body{

            margin: 0;

            height: 100%;

            display: flex;

            flex-direction: column;

            width: 66%;

    }

    html {

        display: flex;

        align-items: center;

        justify-content: center;

        background-color: black;

    }

    .mainvp{

        flex-direction: row !important ;

    }

    .overlay{

        height: 100%;

        width: 66% !important;



    }

}



.overlayson{

    pointer-events: none;

    background-color: black;

    height: 100%;

    width: 100%;

    z-index: 100;

    position:fixed;

}



.overlay{

    pointer-events: none;

    background-image: url('./screen.png');

    height: 100%;

    width: 100%;

    z-index: 99;

    position:fixed;

}



.wrap-left {

    float: left;

    margin-right: 1rem;

}



.wrap-right {

    float: left;

    margin-right: 1rem;

}