@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    margin: 0px;
    height: 100%;
}

header {
    text-align: center;
}

h1 {
    font-family: 'Comfortaa', sans-serif;
    margin: 0px;
}

div#change_username, section#input_zone {
    border: 5px outset #8258FA;
}

div#change_username {
    height: 3%;
    display: inline-block;
    background-color: #BCA9F5;
}

section#chatroom {
    border: 5px inset #8258FA;
    height: 85%;
    overflow: auto;
}

section#input_zone {
    height: 7%;
    text-align: center;
    background-color: #BCA9F5;
}

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

input#username {
    font-family: 'Comfortaa', sans-serif;
}

input#message {
    display: inline-block;
    width: 88%;
    height: 70%;
    font-family: 'Comfortaa', sans-serif;
    font-size: 2vh;
}

button#send_message {
    display: inline-block;
    height: 70%;
    width: 10%;
}

p.message {
    margin: 0px;
    width: 100%;
    height: 40px;
    font-size: 2vh;
    font-family: 'Comfortaa', sans-serif;
    padding: 1vh;
}

.message:nth-child(even) {
    background-color: #81DAF5;
}

.message:nth-child(odd) {
    background-color: #81BEF7;
}