body{
    background-color: #303634;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-size: 3.5vh;
}

a{
    color: black;
}

.container {
    background-color: white;
    width: 134vh;
    min-height: 100vh;
    height: fit-content;
    position: relative;
    top: 0vh;
}

.bar{
    width: 133vh;
    height: 13vh;
    background-color: #888A85;
    border: 5px solid #555753;
}

.logo {
    width: 37vh;
    position: relative;
    top: 0vh;
    left: 0vh
}

.separate {
    width: 1vh;
    height: 9vh;
    position: absolute;
    top: 3vh;
    left: 40vh;
    background-color: #555753;
}

.button{
    position: absolute;
    background-position: center;
    background-size: 100% 100%;
}

.flash{
    left: 45vh;
    top: 2vh;
    width: 16vh;
    height: 11vh;
    background-image: url(img/flash.png);
}

.audio{
    left: 65vh;
    top: 2vh;
    width: 16vh;
    height: 11vh;
    background-image: url(img/audio.png);
}

.video{
    left: 85vh;
    top: 2vh;
    width: 16vh;
    height: 11vh;
    background-image: url(img/video.png);
}

.account {
    height: 10vh;
    width: 30vh;
    position: absolute;
    right: 0vh;
    top: 2vh;
}

@font-face {
    font-family: 'comic';
    src: url('comic-sans.ttf') format('truetype');
}

.comic{
    font-family: comic;
}
h1, h2, h3, h4, h5, h6{
    margin: 0;
}

.name {
    position: absolute;
    right: 12vh;
    top:-2vh;
}

.logout {
    position: absolute;
    right: 12vh;
    top: 3vh;
    font-size: 2vh;
}

.accpic {
    position: absolute;
    right: 1vh;
    top: 0vh;
    height: 11vh;
    width: 11vh;
}

.login, .reg{
    font-size: smaller;
    position: absolute;
    right: 12vh;
}

.login{
    top: -1vh
}

.reg{
    top: 2vh
}

button, .tipbutton, input, textarea{
    background-color: #888A85;
    border: 0.5vh solid #555753;
    font-family: comic;
}