body {
    background-color: #ffffa3;
    overflow: hidden;
}

.center {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
    pointer-events: none;
}

@keyframes splash {
    0% {transform: scale(0) rotate(-60deg); opacity: 0;}
    20% {transform: scale(1.3); opacity: 0.2;}
    60% {transform: scale(0.8); opacity: 1;}
    70% {transform: scale(1); opacity: 1;}
    100% {transform: translate(0,-100vh); opacity: 0;}
}

#splash {
    position: absolute;
    width: 30vh;
    height: 30vh;
    z-index: 100;
    filter: drop-shadow(-0.5vh 0.5vh 0px #e9d07c);
    animation: splash 0.8s;
    animation-fill-mode: forwards;
}

.symbol {
    width: 3.2vh;
    height: 4.8vh;
    float: left;
    margin-right: 1vh;
    margin-top: 1vh;
    filter: drop-shadow(-0.3vh 0.3vh 0px #e9d07c);
}

.symbol_c {
    position: absolute;
    width: 3.2vh;
    height: 4.8vh;
    background-size: 100%;
    background-repeat: no-repeat;
}

.symbol_v {
    position: absolute;
    width: 3.2vh;
    height: 4.8vh;
    background-size: 100%;
    background-repeat: no-repeat;
}

.symbol_cover {
    position: absolute;
    width: 3.2vh;
    height: 3.2vh;
    background-color: #3333B7;
    opacity: 0.8;
    border-radius: 0.5vh;
    transform: translate(0vw, 1.5vh);
    color: white;
    justify-content: center;
    align-items: center;
    display: flex;
    font-family: monospace;
    font-size: 1.5vh;
    user-select: none;
    animation: float_down_symbol 0.3s;
}

@keyframes float_down_symbol {
    0%{transform: translate(0,0); opacity: 0}
    50%{transform: translate(0,1.8vh); opacity: 0.8}
}

#out {
    width: 90vw;
    height: 66vh;
    margin-top: 5vh;
    border-radius: 1vh;
    display: table;
    align-items: left;
    animation: float_in 0.5s;
}

@keyframes float_in {
    0%{transform: translate(-5vw,0); opacity: 0}
    80%{transform: translate(1vw,0); opacity: 0.8}
}

.symbol:hover {
    transform: scale(1.1);
}

.in {
    width: 100%;
    height: 28vh;
    background-color: #3333b7;
    border-radius: 1vh;
    display: table;
    justify-content: center;
    align-items: center;
    box-shadow: -0.5vh 0.5vh 0px #e9d07c;
    animation: float_down 0.5s;
}

@keyframes float_down {
    0%{transform: translate(0,-1vh); opacity: 0}
    50%{transform: translate(0,-1vh); opacity: 0.5}
}

#in_put {
    width: 93vw;
    height: 18vh;
    background-color: #ffffa3;
    border-radius: 1vh;
    box-shadow: -0.5vh 0.5vh 0px #e9d07c;
    border: none;
    font-family: monospace;
    font-size: 3vh;
    color: #444444;
    resize: none;
}

#font_size {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 93vw;
    height: 2vh;
    background-color: #6767e0;
    margin-top: 2vh;
    border-radius: 5vw;
}

#font_size::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10vh;
    height: 2vh;
    background: #FFFFA3;
    cursor: pointer;
    border-radius: 5vw;
}

#translator {
    position: absolute;
    margin-left: 80vw;
    font-size: 3vw;
    margin-top: -4vh;
    border: none;
    border-radius: 0.7vh;
    background-color: #3333B7;
    font-family: monospace;
    color: #FFFFA3;
    box-shadow: -0.5vh 0.5vh 0px #e9d07c;
}

#translator:hover {
    transform: scale(1.05);
    cursor: pointer;
    box-shadow: none;
    opacity: 0.8;
}

#translator:active {
    transform: scale(1.03);
    opacity: 0.7;
}



/*translator styling*/

#in_put_translator {
    width: 94vw;
    height: 23vh;
    background-color: white;
    border-radius: 1vh;
    box-shadow: -0.5vh 0.5vh 0px #e9d07c;
    border: none;
    font-family: monospace;
    font-size: 3vh;
    color: #444444;
    resize: none;
    margin-top: 2vh;
    animation: float_down 0.8s;
}

#out_put_translator {
    width: 94vw;
    height: 32vh;
    background-color: #3333B7;
    border-radius: 1vh;
    border: none;
    font-family: monospace;
    font-size: 3vh;
    color: #FFFFA3;
    resize: none;
    margin-top: 2vh;
    animation: float_down 0.3s;
}

#button_translator {
    width: 20vh;
    height: 10vh;
    border: none;
    box-shadow: -0.5vh 0.5vh 0px #e9d07c;
    background-color: #3333b7;
    border-radius: 1vh;
    font-family: monospace;
    color: white;
    margin: 10vh;
    font-size: 2vh;
    animation: button_slide 0.5s;
}

@keyframes button_slide {
    0% {transform: translate(-100vw) rotate(60deg); opacity: 0}
}

#button_translator:hover {
    opacity: 0.8;
    cursor: pointer;
    transform: scale(1.1);
}

#button_translator:active {
    opacity: 0.6;
    cursor: pointer;
    transform: scale(1.05);
}