:root{

    --m: #0da178;
    --h: #562583;    
   }
   html,body{min-height:100%}
   body{
     background:#ddd url(../bg.jpg)  center no-repeat;
     background-size:cover;
     font-family: 'Itim', sans-serif;
     color:#333;
     text-align:center;
     margin:0
   }
   h1{
     margin:0;
     padding:50px 0;
     font-family: 'Covered By Your Grace', monospace;
     font-size:80px;
     font-weight:400;
     color:rgba(255,255,255,1);
     text-shadow: -3px 7px 0 #000a, 0 0 10px var(--m);
     height:100px;
    box-shadow:0 200px 150px -150px  rgba(0,0,0,0.7) inset;
   }
   
   .modale:before {
     content: "";
     display: none;
     background: rgba(0, 0, 0, 0.6);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 10;
   }
   .opened:before {
     display: block;
   }
   .opened .modal-dialog {
     -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
     transform: translate(0, 0);
     
     top: 20%;
   }
   .modal-dialog {
     font-size:20px ;
     background: rgba(255,255,255,0) url(https://i.imgur.com/8WcH53o.png) no-repeat top center;
     background-size:100%;
     border: #333333 solid 0px;  
     margin-left: -290px;
     padding:70px 20px 80px 70px;
     box-sizing:border-box;
     text-align:center;
     position: fixed;
     left: 50%;
     top: -100%;
     z-index: 11;
     width: 560px;
     box-shadow:0 5px 10px rgba(0,0,0,0);
     -webkit-transform: translate(0, -500%);
     -ms-transform: translate(0, -500%);
     transform: translate(0, -500%);
     -webkit-transition: -webkit-transform 0.3s ease-out;
     -moz-transition: -moz-transform 0.3s ease-out;
     -o-transition: -o-transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
   }
   .modal-body {
     padding: 20px;
     line-height:1.5em
   }
   .modal-body span{
     text-transform: capitalize;
     font-weight:bold;
     color: var(--m);
   }
   .modal-body span:nth-of-type(2){
     color:var(--h)
   }
   .modal-header,
   .modal-footer {
     padding: 10px 20px;
   }
   
   .modal-header h2 {
       font-family: 'Covered By Your Grace';
     font-size: 40px;
     margin:0
   }
   .btn {
     background: var(--m);
     color: #fff;
     display: inline-block;
     font-size: 18px;
     padding: 8px 15px;
     text-decoration: none;
     text-align: center;
     min-width: 60px;
     position: relative;
     border-radius:3px;
     opacity:.7;
     transition: all 0.2s;
   }
   .btn.again {
     background: #aaa;
   }
   .btn:hover{
     opacity:1
   }
   .btn.btn-big {
     font-size: 22px;
     padding: 15px 20px;
     min-width: 100px;
     font-family: 'Covered By Your Grace';
     background: var(--m)
   }
   .btn-close {
     color: #aaaaaa;
     font-size: 20px;
     text-decoration: none;
     padding:10px;
     position: absolute;
     right: 7px;
     top: 0;
   }
   .btn-close:hover {
     color: #919191;
   }