body {
margin-left: 2%;
margin-right: 2%;
}
@media only screen and (min-width: 1800px) {
body {
margin-left: 10%;
margin-right: 10%;
}
}
.container {
display: grid;
grid-template-areas:
"logo"
"example"
"passes"
"input"
"output"
"footer"
}
.main-logo {
height: 7rem;
}
.logo {
grid-area: logo;
align-self: center;
justify-self: center;
text-align: center;
}
@media only screen and (min-width: 1200px) {
.container {
margin-left: 2em;
margin-right: 2em;
display: grid;
column-gap: 1em;
grid-template-columns: 20% 40% 40%;
grid-template-rows: 180px 100px 2fr 100px;
grid-template-areas:
"logo input output"
"example input output"
"passes input output"
"footer footer footer"
}
.main-logo {
height: 7em;
}
.logo {
align-self: auto;
text-align: left;
}
}
.example {
grid-area: example;
align-self: flex-start;
}
.passes {
grid-area: passes;
}
.input-editor {
grid-area: input;
overflow: auto;
}
.output-editor {
grid-area: output;
overflow: auto;
}
.footer {
margin-top: 2em;
grid-area: footer;
justify-self: center;
}
.compile {
margin-top: 1em;
}
button.toggle {
margin-top: 0.5em;
margin-right: 0.5em;
}
hr {
text-align: center;
margin-left: auto;
margin-right: auto;
background:#aaa;
}