@font-face {
    font-family: "Moonbeamshiragana";
    src: url("/fonts/Moonbeamshiragana-2vXo.ttf") format('truetype');
    font-style: normal; 
    font-weight: normal;
}
body {
    background-color: slategray;
}
.container {
    position: absolute;
    width: 90%;
    height: 90%;
    left: 5%;
    top: 5%;
    background-color: steelblue;
    border: 2px solid black;
    border-radius: 10px;
}
.hiragana {
    position: absolute;
    width: 45%;
    height: 45%;
    left: 30%;
    top: 5%;
    background-color: rgb(91, 228, 125);
    border: 2px solid black;
    border-radius: 10px;
    font-size: large;
}
.hiragana span {
    display: block;
    font-size: 1200%;
    text-align: center;
}
.romaji {
    position: absolute;
    width: 90%;
    height: 35%;
    left: 5%;
    top: 53%;
    
}
.var1 {
    position: relative;
    display: inline-block;
    width: 7%;
    height: 20%;
    top: auto;
    background-color: white;
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
    font-size: 200%;
}

.var1:hover {
    background-color: rgb(91, 228, 125);
}
.success, .fault, .reset, .faultList, .switchKat, .switchHir{
    position: absolute;
    width: 100px;
    height: 100px;
    left: 5%;
    top: 5%;
    background-color: black;
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
    font-size: 400%;
    color: rgb(91, 228, 125);
}
.fault {
    left: 80%;
    color: red;
}
.faultList {
    top: 25%;
    left: 80%;
    
    color: red;
     
    font-size: 310%;
}
.reset {
    left: 5%;
    top: 25%;
    font-size: 200%;
    color: blue;
    background-color: white;
    height: 50px;
}
.reset:hover {
    background-color: rgb(91, 228, 125);
}
.switchKat:hover {
    background-color: rgb(91, 228, 125);
}
.switchHir:hover {
    background-color: rgb(91, 228, 125);
}
.switchKat, .switchHir {
    top: 37%;
    left: 5%;
    background-color: white;
    color: blue;
    height: 25px;
    font-size: 120%;
}
.switchHir {
    top: 45%;
}
.bgCol {
    background-color: rgb(91, 228, 125);
}