81 lines
957 B
CSS
81 lines
957 B
CSS
code {
|
|
background: #d0d0d5;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-container {
|
|
max-width: 95%;
|
|
}
|
|
|
|
textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
#user-stories {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
#output-container,
|
|
#solution-container,
|
|
#text-input,
|
|
#locale-select,
|
|
input[type="button"] {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
#output-container {
|
|
width: 80%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#solution-container {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#solution-container {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
#translated-sentence {
|
|
margin-top: 10px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
#error-msg {
|
|
font-weight: normal;
|
|
color: red;
|
|
}
|
|
|
|
.highlight {
|
|
color: green;
|
|
}
|
|
|
|
#text-input {
|
|
padding: 10px;
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.container {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.form-container {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
#output-container {
|
|
flex-direction: row;
|
|
margin-top: 0;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
#solution-container {
|
|
width: 75%;
|
|
margin-top: 0;
|
|
}
|
|
}
|