* { font-family: SquareNeo-Bold, serif; cursor: url(/assets/crosshair.png) 30 30, default; }
html, body{ margin: 0; padding: 0; width: 100%; height: 100%; background-color: white; -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none }
#canvas{ display: block; min-width: 900px; }
.text-default{ font-size:20px; height:50px; display:flex; align-items: center; color: white; }

#enemy{ display: none; }

.interface{ position:fixed; display:flex; width:100%; height:100%; top:0; left:0; right:0; bottom:0; align-items: center; justify-content: center; }
.interface-background{ background: url(/assets/bg1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
 
.interface-contents { height:100%; box-sizing: border-box; }

.interface-contents .interface-header{ padding:5px; display: flex; height:50px; font-size: 35px; font-family: SquareNeo-EB, sans-serif; justify-content: center; position:absolute; top: 0; left:0;
    margin-bottom: 20px; align-items: center; }
.default-color{ color:#FA5858; font-family: SquareNeo-EB, sans-serif; }
.black-color{ color: #000000; font-family: SquareNeo-EB, sans-serif; }
.interface-contents .interface-header img{ height: 50px; }

.view-box-lists{ position:absolute; top: 5px; right:5px; }
.view-box{ margin-bottom: 5px; display:flex; box-sizing: border-box; padding: 10px; border-radius: 15px; background-color: rgba(0,0,0, .7); align-items: center;
    box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%) }
.view-title{ padding-left: 10px; font-size: 16px; color: white; width: 50px; height: 20px; display: flex; align-items: center; }
.view-value{ margin-left: 20px; font-size: 13px; color: white; padding-right: 10px; width: 70px; height: 20px; display: flex; align-items: center; }
.special-color{ color: #FA5858; font-family: SquareNeo-EB, sans-serif; font-size: 16px; }

.interface .hide-view{ display:none; }

#interface-start-view{ position:fixed; top:0; left:0; right:0; bottom:0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
#interface-start-view .interface-start-header{ display: flex; font-size: 135px; font-family: SquareNeo-EB, sans-serif; justify-content: center; margin-bottom: 20px; align-items: center; }
#interface-start-view .interface-start-header img{ height: 150px; }
.start-btn{ width:600px; height:85px; display:flex; justify-content: center; align-items: center; font-size: 40px;
    border-radius: 8px; background-color: #FA5858; color: white; cursor: pointer; margin-top: 100px; }



.modal-wrapper{ position:fixed; display: flex; top:0; left:0; right:0; bottom:0; visibility: hidden; 
    opacity: 0; transition: all 0.25s ease-in-out; background: url(/assets/bg2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; justify-content: center; align-items: center; }
.modal-wrapper.open { opacity: 1; visibility: visible; }
.modal { width: 500px; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top: 50%; background: #fff; opacity: 0; transition: all 0.3s ease-in-out; border-radius: 25px; padding: 20px 15px; position:relative; }
.modal-shadow { box-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 2px 4px rgb(0 0 0 / 7%), 0 4px 8px rgb(0 0 0 / 7%), 0 8px 16px rgb(0 0 0 / 7%), 0 16px 32px rgb(0 0 0 / 7%), 0 32px 64px rgb(0 0 0 / 7%); }
.modal-wrapper.open .modal { margin-top: 0; opacity: 1; }
.modal-title{ display: flex; padding: 7px 25px; border: 5px #FA5858 solid; border-radius: 28px; font-size: 50px; position:absolute; font-family: SquareNeo-EB, sans-serif; justify-content: center; align-items: center; background-color: #FFF; top: -40px; left: 50%; transform: translateX(-50%); }
.modal-title img{ width: 50px; }
.modal-value-lists{ width:100%; display:flex; justify-content: center; align-items: center; flex-direction: column; margin-top:50px; }
.modal-value-box{ width: 390px; display: flex; align-items: center; box-sizing: border-box; padding: 15px 25px; border-radius: 10px; 
    background-color: rgba(250,88,88, .7); color: white; margin-bottom: 15px; }
.modal-value-title{ font-size: 15px; font-family: SquareNeo-Regular, serif; width: 100px; }
.modal-value{ font-size: 20px; width: calc(100% - 100px); text-align: center; }

.modal-value-score{ width: 100%; box-sizing: border-box; display: flex; justify-content: center; align-items: center;  flex-direction: column; 
    color: #FA5858; padding: 15px 25px; border-radius: 10px; margin-top: 20px; }
.modal-score-title{ font-size: 25px; text-align: center; font-family: SquareNeo-EB, sans-serif; margin-bottom: 15px; }
.modal-score-value{ font-size:50px; font-family: SquareNeo-Heavy, sans-serif; }

.modal-retry{ display:flex; width: 450px; align-items: center; justify-content: center; color: white; cursor: pointer; margin-top: 40px; border-radius: 20px; height:60px;
    background: linear-gradient(to bottom,rgb(77, 149, 232),rgb(30, 50, 116) 100%, #000); font-size: 25px; padding: 5px 0; }
.retry-game{ width: 30px; height: 30px; margin-left: 10px; cursor: pointer; }
.modal-retry-title{ cursor: pointer; }









@font-face {
    font-family: "SquareNeo-Light";
    src: url("/assets/fonts/SquareNeo/NanumSquareNeoOTF-aLt.otf");
}
@font-face {
    font-family: "SquareNeo-Regular";
    src: url("/assets/fonts/SquareNeo/NanumSquareNeoOTF-bRg.otf");
}
@font-face {
    font-family: "SquareNeo-Bold";
    src: url("/assets/fonts/SquareNeo/NanumSquareNeoOTF-cBd.otf");
}
@font-face {
    font-family: "SquareNeo-EB";
    src: url("/assets/fonts/SquareNeo/NanumSquareNeoOTF-dEb.otf");
}
@font-face {
    font-family: "SquareNeo-Heavy";
    src: url("/assets/fonts/SquareNeo/NanumSquareNeoOTF-eHv.otf");
}