@font-face {
    font-family: 'MujFont';
    /* Název fontu */
    src: url('Merkur.ttf');
}
:root {
    --primary-color: #ECC14E;
    --secondary-color: #C227E2;
}

* {
    margin: 20px;
    color: #ECC14E;
    font-family: 'MujFont';
}
html{
    margin: 0px;
}

body {
    margin: 0px;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    font-family: 'MujFont';
    color: #ECC14E;
    font-size: 8em;
    text-shadow: 0 0 10px #ECC14E;
    font-weight: normal;
    text-align: center;
}

span {
    margin: 0px;
    color: #C227E2;
    text-shadow: 0 0 10px #C227E2
}

textarea{
    font-size: 3.5vw;
    ;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #ECC14E;
    color: black;
    border: solid black;
}
#form{
    display: flex;
    flex-direction: row;
    align-items: stretch;
}
input {
    font-size: 3.5vw;
    ;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #ECC14E;
    color: black;
    border: solid black;
    transition: 0.5s;
}
#convert{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

input:focus {
    border: solid #C227E2;
}

input:hover {
    border: solid #C227E2;
    background-color: #C227E2;

}
#result{
    font-size: 4vw;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0px;
}
#audio {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0px;
}