* {box-sizing: border-box;
   transition-duration: 0.4s;}

.row::after {content: "";
             clear: both;
             display: table;}

html {margin: 0;
      padding: 0;
      width:100%;
      height:100%;
      font-family: "Trebuchet MS", Helvetica, sans-serif;
      text-align:center;
      overflow: hidden;
      overflow-x: hidden;
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
      -webkit-text-size-adjust: none;
      touch-action: none;
      background-color:#ffffff;}

html::-webkit-scrollbar {display: none;}

body {margin: 0;
      padding: 0;
      width:100%;
      height:100%;
      font-family: "Trebuchet MS", Helvetica, sans-serif;
      text-align:center;
      overflow-y: scroll;
      overflow-x: hidden;
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
      background-color:#ffffff;
      animation: bg_resize 3.1s;}

body::-webkit-scrollbar {display: none;}

input {text-align:center;}

/* -------DISPLAY POSITIONS-------- */
.dmsc {position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);}
.dtmsc {position: fixed;
        top: 12%;
        left: 50%;
        transform: translate(-50%, -50%);}
.dfb {position:fixed;
      bottom:0;
      width:100%;}
.dft {position:fixed;
      top:0;
      width:100%;}
.sticky {position: sticky;}
/* -------DISPLAY POSITIONS-------- */

/* -------SHADOW EFFECT-------- */
.shdol {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.shdom {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.39);}
.shdoh {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.60);}
.shdor {box-shadow: 0 4px 8px 0 rgba(255, 0, 0, 0.2), 0 6px 20px 0 rgba(255, 0, 0, 0.60);}
.shdoa {box-shadow: 0 4px 8px 0 rgba(0, 0, 255, 0.2), 0 6px 20px 0 rgba(0, 0, 255, 0.60);}
/* -------SHADOW EFFECT-------- */