@charset "utf-8";

@font-face {
    font-family: "Rose";
    src: url("Rose.otf") format("opentype");
}
@font-face {
    font-family: "Bask";
    src: url("BASKVILL.ttf") format("truetype");
}

html {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

body {
    width: 90%;
    height: 50vh;
    margin: 0;
    padding: 10vh 5%;
    background-color: #990000;
}

img {
    max-width: 100%;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
    flex-wrap: wrap;
}
.box {
    display: flex;
    font-size: 120px;
    width: 33.33%;
    height: 60vh;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.dsp {
    background: linear-gradient(to bottom, #acacac, #ffffff 50%, #acacac);
    display: flex;
    font-family: "Rose";
    color: #990000;
    font-size: 230px;
    width: calc(100% - 40px);
    border: 20px solid;
    border-color: #4c4c4c #797979 #898989 #999999;
    height: calc(80% - 40px);
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}
.stop {
    display: flex;
    font-size: 60px;
    font-family: "Bask";
    width: calc(80% - 4px);
    margin: 1vh auto;
    border: 6px solid #999900;
    height: calc(8vh - 4px);
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    background-color: #cccc00;
    box-shadow: -20px -10px 50px 5px rgba(64, 64, 64, .5) inset;

}
.result {
    display: flex;
    font-size: 80px;
    justify-content: center;
    align-items: center;
    width: calc(80% - 20px);
    border: 10px solid;
    height: calc(20vh - 20px);
    border-color: #4c4c4c #797979 #898989 #999999;
    background-color: #000000;
    color: #ffffff;
}
.button {
    display: flex;
    font-size: 60px;
    font-family: "Bask";
    color: #ffffff;
    justify-content: center;
    align-items: center;
    width: calc(100% - 10px);
    border: 5px solid;
    height: calc(10vh - 10px);
    cursor: pointer;
    border-radius: 15%;
}
.flex_button {
    width: 20%;
    height: 20vh;
    display: flex;
    flex-wrap: wrap;
}
.st {
    background-color: #0066ff;
    border-color: #CCCCFF #AAAAFF #4444FF #6666FF;
}
.bk {
    background-color: #008000;
    border-color: #7fffd4 #3cb371 #006400 #228b22;
}