html {
box-sizing: border-box;
}
body {
background-image: url(../images/cushion.png);
background-size: 150px;
color: #e6e6e6;
font-size: 15px;
margin: 0;
padding: 15px;
font-family: sans-serif;
}
* {
box-sizing: inherit;
font-family: inherit;
font-size: inherit;
}
a, a:active, a:visited {
color: #e6e6e6;
font-weight: bold;
}
a.email-link {
font-weight: normal;
color: #f1ca7e;
}
em {
font-style: normal;
color: #f1ca7e;
}
select {
background-color: lightgray;
color: black;
}
button {
background-color: #622e93;
color: #eee;
}
footer {
background-color: black;
text-align: center;
margin-top: 15px;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: -15px;
margin-left: -15px;
margin-right: -15px;
border-top: solid 1px #e6e6e6;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
padding-bottom: 15px;
}
.logo {
height: 50px;
}
.mauking-lb {
height: 50px;
}
.mauking-lb-container {
display: none;
}
.mauking-lb-container-mobile {
margin-top: 15px;
display: block;
width: 100%;
}
.mauking-lb-container-mobile img {
width: 100%;
height: auto;
}
.text-fields {
width: 100%;
justify-content: space-between;
align-items: stretch;
padding-bottom: 15px;
position: relative;
}
#source-text {
border: solid 1px #f1ca7e;
width: 100%;
padding: 15px;
height: 200px;
margin-bottom: 15px;
}
#destination-text {
background-color: #181818;
border: solid 1px #f1ca7e;
color: #e6e6e6;
width: 100%;
padding: 15px;
overflow-y: scroll;
height: 200px;
}
.example-button {
position: absolute;
top: 250px;
left: 0;
display: none;
background-color: lightgray;
color: black;
}
.multipleChoiceElem {
cursor: pointer;
background-color: #9174f0;
color: #e6e6e6;
}
.multipleChoiceMenu {
cursor: pointer;
background-color: #9174f0;
color: #e6e6e6;
}
.multipleChoiceMenu td {
padding: 5px;
}
.multipleChoiceMenu td:hover {
font-weight: bold;
}
.ux-controls {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.translate-button {
width: 120px;
margin-left: 15px;
}
.modifiedWord {
font-weight: bold;
color: #f1ca7e;
}
#direction {
width: 180px;
}
h1 {
font-size: 20px;
text-align: center;
}
h2 {
font-size: 18px;
text-align: center;
}
.documentation {
width: 100%;
text-align: center;
}
.translation-error {
color: mediumvioletred;
}
.limit-explanation {
color: lightgreen;
padding-bottom: 15px;
}
.example-area {
background-color: #181818;
border: solid 1px white;
padding: 15px;
position: absolute;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
display: none;
flex-direction: column;
align-items: center;
}
@media only screen and (min-width: 648px) {
.mauking-lb-container {
display: block;
}
.mauking-lb-container-mobile {
display: none;
}
#destination-text {
width: calc(50% - 7.5px);
height: auto;
}
#source-text {
height: auto;
width: calc(50% - 7.5px);
margin-bottom: 0;
}
.text-fields {
height: 350px;
display: flex;
}
.example-button {
top: 350px;
display: inline-block;
}
.header {
align-items: center;
}
.logo {
height: 80px;
}
.mauking-lb {
height: 80px;
}
h1 {
font-size: 24px;
text-align: center;
}
h2 {
font-size: 20px;
text-align: center;
}
.documentation {
max-width: 800px;
margin: auto;
text-align: center;
}
}