@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);

* {
    margin:0;
    padding:0;
    font-family:'Fira Code',monospace;
}

html { height:100%; }

body {
    display:flex;
    height:100%;
    background-color: #03e5b7;
    background-image: linear-gradient(315deg, #03e5b7 0%, #037ade 74%);
    flex-direction:column;
    justify-content:space-between;
}

header,footer,main {
    display:flex;
}

header,footer {
    height:10%;
    width:100%;
    align-items:center;
    justify-content:center;
    background-color:black;
    color:#03e5b7;
}

header {
}

button {
    background-color:black;
    color:white;
    padding:5px;
    border:1px solid #03e5b7;
}
main {
    align-self:center;
    justify-content:space-between;
    border:3px solid black;
    height:40%;
    width:38%;
    padding:2%;
}
frm,preview {
    align-self:center;
    display:flex;
    border:1px solid black;
}
frm {
    padding:5%;
}
#c1,#c2 {
    height:25px;
}
frm button {
    margin-top:10px;
}
preview {
    flex-direction:column;
    align-items:center;
}
preview img {
    padding-bottom:10px;
}
preview button {
    margin-bottom:15px;
}

footer {
    align-self:flex-end;
}