* {
    --background: #F2F3F8;
    --background-grey: #ececec;
    --accent-color: #fff;
    --accent-background-lighter: linear-gradient(0.4turn, #4549CE, #4f53d5, #738CE1);
    --accent-background: linear-gradient(0.4turn, #393dab, #4548b9, #667cc7);
    --accent-background-darker: linear-gradient(0.4turn, #262977, #2a2e81, #4b5fa2);
    --border-radius: 0.5rem;

    font-family: Arial, sans-serif;
	font-size: 1.3rem;
}

root {
    font-size: 1.3rem;
}

html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
	line-height: 1.5;
    width: 100%;
    height: 100%;

    background: var(--background);
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

header {
    margin-bottom: 0.5em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media only screen and (max-width: 800px) {
    header {
        flex-direction: column;
    }
}

@media only screen and (max-width: 500px) {
    header {
        font-size: 0.85rem;
    }
}

#logo-link {
    align-self: center;
}

#logo {
    max-width: 25em;
}

#navigation {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

@media only screen and (max-width: 800px) {
    #navigation {
        justify-content: center;
    }
}

.nav-item:last-of-type {
    margin-right: 0;
}

.nav-item {
    margin: 0.4em;
    width: 5em;
    text-align: center;
    color: #4f53d5;
    background: #fff;
    padding: 1em;
    border-radius: 1em;
    border: 1px solid #56bdff;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.nav-item.active {
    background: #dbe1ff;
    border-radius: 0;
}

.nav-item:visited {
    color: #4f53d5;
}

.nav-item:hover {
    background: #4f53d5;
    color: white;
}

.nav-item span {
    text-decoration: underline;
}

.nav-item .pictogram {
    max-width: 3rem;
    max-height: 3rem;
    align-self: center;
}

/*.nav-item i {*/
/*    font-size: 1.5rem;*/
/*    align-self: center;*/
/*}*/

#main-content {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    padding: 2rem;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media only screen and (max-width: 500px) {
    #main-content {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 1rem;
        padding-top: 0.5rem;
    }
}



.explanations {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.explanations > * + * {
    margin-left: 3rem;
}

.explanation__container {
    background: white;
    border-radius: var(--border-radius);
    padding: 1rem;
    width: 100%;
	text-align: center;
	font-size: 20px;
}

.explanation__container p {
	min-height: 1em;
    margin: 0.5rem;
}

.explanation__container h3 {
    margin: 0;
}


@media only screen and (max-width: 550px) {
    .explanations {
        flex-wrap: wrap;
    }

    .explanations > * + * {
        margin-left: 0;
        margin-top: 1rem;
    }
}

.transformation__container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
	margin-left: 3rem; 
    margin-right: 3rem;
}


.warning-message {
    font-size: 1.3rem;
    background: #fff4b9;
    border: 1px solid #E2CC44;
    border-radius: var(--border-radius);
    color: black;
    display: none; 
    text-align: center; 
	margin-top: -6.5rem;
	margin-bottom: 3rem;
	margin-left: 2.5rem;
    margin-right: 2.5rem; 
	padding: 0.5rem;
}


.transformation__label,
.transformation__input {
    display: block;
}

.transformation__container > * + * {
    margin-left: 1rem;
    margin-top: 0;
}

.transformation__label {
    flex-grow: 1;
    width: 40%;
    margin-top: 1rem;
    margin-bottom: 1rem;
	position: relative;
}

@media only screen and (max-width: 800px) {
    .transformation__label {
        width: 100%;
    }

    .transformation__container > * + * {
        margin-left: 0;
        margin-top: 1rem;
    }
}

.transformation__input {
    padding: 0.6rem;
    resize: none;
    height: 8rem;


    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;

    border-radius: var(--border-radius);
    border: 1px solid #6b6b6b;

    box-shadow: 2px 2px 10px #dbdee7;
}

.transformation__input#original {
}

.transformation__input#original:focus {
    outline: 2px solid #4549CE !important;
}

.transformation__input#output {
    /*display: inline-block;*/
    box-shadow: 0 0 15px #b0b1b4;
    outline: none !important;
    border: none !important;
    white-space: pre-wrap;
}

.transformation__input#output:focus {
    outline: none !important;
}


.transformation__input#output {
    background: var(--background-grey);
}

.loading-container {
    display: none; 
    position: absolute; 
	right: 21%;
	top: 80%;
	transform: translate(-50%, -50%);
    z-index: 999;
}

.transformation__action__container {
    width: auto;
    display: flex;
    align-self: center;
    flex-direction: column;
    justify-content: center;
}

.btn {
    cursor: pointer;
    position: relative;
    font-size: 1.3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
    background: green;
    width: 10rem;
    height: 3rem;
    border-radius: var(--border-radius);
    border: none;
    box-shadow: 2px 2px 10px #A2A4D9;
}

.pointer {
    width: 2rem;
    position: absolute;
    bottom: -1.2rem;
    right: 0.3rem;
}

.transformation__action:hover {
   background: lightgreen;
}

.transformation__action:active {
    background: darkgreen;
}

.hidden {
    display: none !important;
}

#output.has-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
}

#output .indicator {
    --color-success: #436426;
    --color-info: #006ab2;
    --color-info-light: #b8dfff;
    --color-warning: #E2CC44;
    --color-warning-light: #fff4b9;
    --color-error: #8B2B20;
    --color-error-light: #ffdbdd;

    height: min-content;
    padding: 1rem;
    border-radius: var(--border-radius);
}
#output .indicator.info {
    border: 1px solid var(--color-info);
    background: var(--color-info-light);
}
#output .indicator.warning {
    border: 1px solid var(--color-warning);
    background: var(--color-warning-light);

}
#output .indicator.error {
    border: 1px solid var(--color-error);
    background: var(--color-error-light);
}

.changed {
    background: #ceffce;
    font-weight: bold;
}

footer {
    background: white;
    margin-top: 0;
    padding: 1rem;
    display: flex;
    justify-content: space-evenly;
}

footer img {
    height: 5rem;
}





/* https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */

.grow-wrap {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}
.grow-wrap::after {
    /* Note the weird space! Needed to preventy jumpy behavior */
    content: attr(data-replicated-value) " ";

    /* This is how textarea text behaves */
    white-space: pre-wrap;

    /* Hidden from view, clicks, and screen readers */
    visibility: hidden;
}
.grow-wrap > textarea {
    /* You could leave this, but after a user resizes, then it ruins the auto sizing */
    resize: none;

    /* Firefox shows scrollbar on growth, you can hide like this. */
    overflow: hidden;
}
.grow-wrap > textarea,
.grow-wrap::after {
    /* Identical styling required!! */
    border: 1px solid black;
    padding: 0.5rem;
    font: inherit;

    /* Place on top of each other */
    grid-area: 1 / 1 / 2 / 2;
}