@font-face {
   font-family: "Roboto-Bold";
   src: url("Roboto-Bold.ttf");
}

body
{
   background-color: #ffffff;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
input:focus, textarea:focus, select:focus
{
   outline: none;
}
#PageHeader1
{
   background-color: #ffffff;
   box-sizing: border-box;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
#wb_Text1 
{
   animation: 0.5s fadein 0.1s forwards;
   opacity: 0;
   border: 0px solid #FFFFFF;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_Text1 div
{
   text-align: left;
}
#MediaPlayer1
{
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
}
#bacgkround {
   opacity: 0.2;
   position: absolute;
   width: 100%;
   height: 100%;
   pointer-events: none;
   user-select: none; 
}
.btn {
   animation: 0.5s fadein 0.1s forwards;
   animation: 0.5s slidefade 0.1s forwards;
   opacity: 0;
   position: relative;

   display: block;
   margin: 30px auto;
   padding: 0;
   font-family: "Roboto-Bold";
   user-select: none; 

   overflow: hidden;

   border-width: 0;
   outline: none;
   border-radius: 10px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
   
   background-color: #ffffff;
   color: #000000;
   
   transition: background-color .3s;
   }

.btn:hover, .btn:focus {
   background-color: #d3d3d3;
   cursor:pointer;
}

.btn > * {
   position: relative;
}

.btn span {
   display: block;
   padding: 12px 24px;
}

.btn:before {
   content: "";
   
   position: absolute;
   top: 50%;
   left: 50%;
   
   display: block;
   width: 0;
   padding-top: 0;
      
   border-radius: 100%;
   
   background-color: rgb(255, 255, 255);
   
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.btn:active:before {
   width: 120%;
   padding-top: 120%;
   
   transition: width .2s ease-out, padding-top .2s ease-out;
}

@media (prefers-color-scheme: dark) {
   body {
     color: #eee;
     background: #1e1e1e;
   }
 
   body a {
     color: #809fff;
   }

   #PageHeader1 {
      color: #eee;
      background: #111111;
   }

   .btn {
      color: #eee;
      background: #1e1e1e;
   }

   .btn:hover, .btn:focus {
      color: #eee;
      background: #353535;
   }

   .btn:before {
      background: #1e1e1e;
   }
 }

@keyframes fadein{
   100%{
      opacity: 1;
   }
}

@keyframes slidefade{
   100%{
      opacity: 1;
      margin: 0;
   }
}