
.standard.container .nav {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.standard.container .nav .wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;


}
.standard.container .nav .box {
background-color: #4f2362;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;



}
.standard.container .nav .content {
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
width: 100%;

}
.standard.container .nav {
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
width: 50%;
}
.standard.container .nav a {
color: #ffcb05;
}






.standard.container.full {
height: 100vh;
}
.standard.container.l {
height: 600px;
}
.standard.container.m {
height: 400px;
}
.standard.container.s {
height: 200px;
}



.standard .wrapper.full {
padding: 0;
}
.standard .wrapper.l {
padding: 10px 15px;
}
.standard .wrapper.m {
padding: 10px 30px;
}
.standard .wrapper.s {
padding: 10px 50px;
}



.standard .font-size-l > p, .standard .font-size-l > a {
font-size: 30px;
}
.standard .font-size-m > p, .standard .font-size-l > a {
font-size: 22px;
}
.standard .font-size-s > p, .standard .font-size-l > a {
font-size: 16px;
}



.standard .container.full .content {
height: 50vh;
}
.standard .container.l .content {
height: 400px;
}
.standard .container.m .content {
height: 300px;
}
.standard .container.s .content {
height: 150px;
}



.standard .box.lt {
justify-content: flex-start;
align-items: flex-start;
}
.standard .box.lm {
justify-content: flex-start;
align-items: center;
}
.standard .box.lb {
justify-content: flex-start;
align-items: flex-end;
}


.position.left.top {
justify-content: left;
align-items: flex-start;
}
.position.left.middle {
justify-content: left;
align-items: center;
}
.position.left.bottom {
justify-content: left;
align-items: flex-end;
}
.position.center.top {
justify-content: center;
align-items: flex-start;
}
.position.center.middle {
justify-content: center;
align-items: center;
}
.position.center.bottom {
justify-content: center;
align-items: flex-end;
}
.position.right.top {
justify-content: right;
align-items: flex-start;
}
.position.right.middle {
justify-content: right;
align-items: center;
}
.position.right.bottom {
justify-content: right;
align-items: flex-end;
}



.box.position {

}
.box.center.top {
justify-content: center;
align-items: flex-start;
}
.box.center.middle {
text-align: center;
justify-content: center;
align-items: center;
}
.box.center.bottom {
justify-content: center;
align-items: flex-end;
}



.wrapper {
margin: ;
}

.header {
background-color: purple;
}
.header.container {
padding: 15px 0;
}
.header a, .header p {
color: yellow;
font-size: 22px;
}

.navigation {
background-color: purple;
padding: 10px 0;
}
.navigation a, .navigation p {
color: white;
}
.navigation ul {
display: flex;
}
.navigation li {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}

.nav-button {
display: none;
position: absolute;
top: 50px; right: 30px;
background-color: red;
width: 50px; height: 50px;
}

@media (max-width: 900px) {

.standard .wrapper {
flex-wrap: wrap;
}

.header {
background-color: blue;
}

.nav-button {
display: block;
}

.navigation {
display: none;
}
}
.editor.container {

}
.editor .wrapper {
height: 100%;
display: flex;
align-items: space-between;
}
.editor .box {
height: 100%;
width: 100%;
display: flex;
padding: 20px 30px;
}
.editor .content {
display: flex;
flex-direction: column;
justify-content: space-between;
}



.standard .container.full {
height: 100vh;
}
.standard .container.l {
height: 600px;
}
.standard .container.m {
height: 400px;
}
.standard .container.s {
height: 200px;
}



.standard .wrapper.full {
padding: 0;
}
.standard .wrapper.l {
padding: 10px 15px;
}
.standard .wrapper.m {
padding: 10px 30px;
}
.standard .wrapper.s {
padding: 10px 50px;
}



.standard .font-size-l > p, .standard .font-size-l > a {
font-size: 30px;
}
.standard .font-size-m > p, .standard .font-size-l > a {
font-size: 22px;
}
.standard .font-size-s > p, .standard .font-size-l > a {
font-size: 16px;
}



.standard .container.full .content {
height: 50vh;
}
.standard .container.l .content {
height: 400px;
}
.standard .container.m .content {
height: 300px;
}
.standard .container.s .content {
height: 150px;
}



.standard .box.lt {
justify-content: flex-start;
align-items: flex-start;
}
.standard .box.lm {
justify-content: flex-start;
align-items: center;
}
.standard .box.lb {
justify-content: flex-start;
align-items: flex-end;
}


.position.left.top {
justify-content: left;
align-items: flex-start;
}
.position.left.middle {
justify-content: left;
align-items: center;
}
.position.left.bottom {
justify-content: left;
align-items: flex-end;
}
.position.center.top {
justify-content: center;
align-items: flex-start;
}
.position.center.middle {
justify-content: center;
align-items: center;
}
.position.center.bottom {
justify-content: center;
align-items: flex-end;
}
.position.right.top {
justify-content: right;
align-items: flex-start;
}
.position.right.middle {
justify-content: right;
align-items: center;
}
.position.right.bottom {
justify-content: right;
align-items: flex-end;
}



.box.position {

}
.box.center.top {
justify-content: center;
align-items: flex-start;
}
.box.center.middle {
text-align: center;
justify-content: center;
align-items: center;
}
.box.center.bottom {
justify-content: center;
align-items: flex-end;
}



.wrapper {
margin: ;
}

.header {
background-color: purple;
}
.header.container {
padding: 15px 0;
}
.header a, .header p {
color: yellow;
font-size: 22px;
}

.navigation {
background-color: purple;
padding: 10px 0;
}
.navigation a, .navigation p {
color: white;
}
.navigation ul {
display: flex;
}
.navigation li {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}

.nav-button {
display: none;
position: absolute;
top: 50px; right: 30px;
background-color: red;
width: 50px; height: 50px;
}

@media (max-width: 900px) {

.standard .wrapper {
flex-wrap: wrap;
}

.header {
background-color: blue;
}

.nav-button {
display: block;
}

.navigation {
display: none;
}
}
* {
margin: 0;
padding: 0;
border: 0;
font-family: 'Comfortaa', cursive;
}
html,
body {
height: 100%;
}

ul {
list-style-type: none;
margin: 0;
}
a {
text-decoration: none;
cursor: pointer;
}
