body {
    margin: 0 0 0 0;
    background-image: url(GIFBG3.gif);background-size: 20cm 100px;
    width: auto;
    height: auto;
    text-align: -webkit-center;
}
.grid {
    border: 6px groove #69696986;
    border-radius: 15px;
    background: linear-gradient(0deg,#000000 0%, #22272cfa 3%, #000000fa 83%, #212223fa 91%, #000000 100%);
    box-shadow: #ffffffa6 0px 0px 10px,#36577d 0px 0px 30px, #ffffff63 0px 0px 300px;
    display: inline-grid;
    padding: 30px;
    width: 22cm;
    height: auto;
    column-gap: 15px;
    row-gap: 15px;
    grid-template-columns: minmax(auto) 1fr 4fr 1fr;
    grid-template-rows: minmax (100px 100px 100px 100px);
    grid-template-areas:
    'aa aa aa'
    'bb cc cc'
    'bb dd dd'
    'ee ee ee'
    'ff gg gg';
}
.page-aa {
    grid-area: aa;
    border: 1px inset #ffffff26;
    width: 100%;
    height: 3cm;
}
.page-bb {
    grid-area: bb;
    border: 1px inset #ffffff3f;
    width: 7cm;
    height: 28cm;
    text-align: left;
}
.page-cc {
    grid-area: cc;
    border: 0px ridge #ffffff;
    width: 100%;
    height: 24cm;
    justify-content: flex-start;
    display: inline-grid;
    column-gap: 1px;
    row-gap: 3px;
    grid-template-columns: minmax(auto) 1fr 4fr 1fr;
    grid-template-rows: minmax (100px 100px);
    grid-template-areas:
    'ad'
    'con'
    'vdo';
}
.page-dd {
    grid-area: dd;
    border: 0px ridge #ffffff;
    width: 100%;
    height: 3cm;
    margin: 0 -5px;
}
.page-ee {
    grid-area: ee;
    border-top: 8px groove #b7b7b773;border-right: 4px groove #b7b7b773;border-left: 4px groove #b7b7b773;border-bottom: 8px groove #b7b7b773;
    background: linear-gradient(0deg,#1e1e1e 34%, #000000 100%);
    border-radius: 5px;
    padding: 10px;
    width: 21.4cm;
    height: auto;
    text-align: left;
}
.page-ff {
    grid-area: ff;
    border: 2px inset #626262;
    width: 100%;
    height: 3cm;
    display: flex;
    align-items: flex-start;
    background: linear-gradient(0deg,#00000000 34%, #2a3241 100%);
}
.page-gg {
    grid-area: gg;
    border: 2px inset #626262;
    width: 100%;
    height: 3cm;
    display: flex;
    align-items: flex-start;
    background: linear-gradient(0deg,#00000000 34%, #2a3241 100%);
}
.video-div p {
    color: #ffffff;
    text-align: left;
    font-family: "Krub", sans-serif;font-weight: 600;font-style: normal;font-size: 10px;
    border: 3px groove #545c61;
    background: linear-gradient(0deg,#1f4479 34%, #36659a 100%);
    box-shadow: #000000 5px 10px 8px,#000000 5px 10px 8px;
    position: absolute;
    padding: 10px;
    margin: 20px -2px;
    width: 14cm;
    height: 3.8cm;
}
.video-div {
    border: 0px solid #00a2ff;
    width: 550px;
    height: 560px;
    margin: -17.3cm 0;
    display: none;
    align-items: center;
    overflow: hidden;
    justify-content: center;
}
.video-div.active {
    display: block;
}
video {
    border: 0px ridge #ff0000;
    max-width: 100%;
    height: 560px;
}
.vdo {
    grid-area: vdo;
    border: 0px ridge #fffb00;
}
.ad {
    grid-area: ad;
    border: 0px ridge #ff00ee;
    width: 100%;
    height: 3cm;
}
.con {
    grid-area: con;
    background-color: #000000;
    border-top: 1px ridge #a0a0a0c3;border-right: 5px ridge #a0a0a0c3;border-left: 5px ridge #a0a0a0c3;border-bottom: 8px ridge #a0a0a0c3;
    margin-top: -90px;
    width: 14.6cm;
    height: 16.2cm;
}
.controls {
    display: flex;
    justify-content: center;
    width: 14.2cm;
    height: 30px;
    gap: 10px;
    padding: 5px;
    border: 2px outset #21252e;
    background: linear-gradient(0deg,#485476 0%, #001131 15%, #000a2c 61%, #4c555f 100%);
}
.buttons {
    display: flex;
    flex-wrap: wrap;
}
.buttons img {
    width: 20px;
    height: auto;
}
.buttons  button {
    border: 2px groove #465569;
    cursor: pointer;
    background: linear-gradient(0deg,#13151c 60%, #3a475f 100%);
}
.buttons  button:hover {
    border: 2px groove #080f18;
    cursor: pointer;
    background: linear-gradient(0deg,#2f384b 60%, #64708d 100%);
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 14.42cm;
    height: 5px;
    margin: 1px -11px;
    background: #000000;
    cursor: pointer;
    outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border: 0px inset #000000;
    background: linear-gradient(to right, #318eff 0%,#005fd3 var(--progress, 0%), #005fd3 var(--progress, 0%));
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 8px;
    height: 8px;
    border: 0px inset #c9c9c9;
    background: linear-gradient(0deg,#00c3ff 77%, #0098c7 100%);
    margin-top: 0px;
    cursor: pointer;
}
#volumeBar {
  -webkit-appearance: none;
  appearance: none;
  margin-top: 10px; margin-left: -10px; margin-right: 5px;
  width: 200px;
  height: 12px;
  background: black;
  border: 2px inset #000000;
  outline: none;
  cursor: pointer;
}
#volumeBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin: -3px 0;
    width: 5px;
    height: 18px;
    border: 0.8px inset #c9c9c9;
    background: linear-gradient(0deg,#7a7a7a 0%, #cfcfcf 73%);
    cursor: pointer;
}
#volumeBar::-webkit-slider-runnable-track{
  height:12px;
  background: linear-gradient(to right,#b708df  0%,#d81313  var(--percent),#141414 var(--percent),#000000 100%);
}
.loop-msg{
  color: #aa0000;
  font-family: "Silkscreen", sans-serif;font-weight: 400;font-style: normal;font-size: 25px;
  margin: -14.8cm 1px;
  letter-spacing: -3;
  pointer-events: none; 
  opacity: 0;
  white-space: nowrap;
  position: absolute;
}
.loop-msg.show{opacity: 1;}
.minipic {
    color: #00f2ff;
    border: 0x solid #4f4f4f;
    display: inline-flex;
    width: 194px;
    height: 80px;
    margin: 5px 2px;
    cursor: pointer;
}
.minipic img {
    border: 3px groove #9d9d9d84;
    width: 75px;
    height: 75px;
    margin: -13px -12px;
    display: inline-block;
    box-shadow: 0 0px 5px #000000;
}
.minipic p {
    border: 0px ridge #7f7f7f;
    font-family: "Krub", sans-serif;font-weight: 400;font-style: normal;font-size: 15px;
    width: auto;
    height: auto;
    padding: 5px;
    margin: 0 2.5px;
    text-align: left;
}
.minipic button {
    width: 70px;
    height: 20px;
    margin: 10px 5px;
}
.minipic:hover {
    filter: invert(100%);
}
.alltag {
    border: 0px solid #ff0000;
    width: auto;
    margin: 0 -40px;
    display: inline-flex;
    cursor: pointer;
}
.alltag img:hover{
    filter: drop-shadow(0 0 3px #ffffff );
}
.alltag img {
    border: 0px solid #ffffff43;
    margin-left: 15px;
    padding: 5px;
    width: auto;
    height: 110px;
}
.alltagedit {
    display: none;
}
.alltagedit.active {
    display: block;
}
.boxa {
    margin: 5px 8px;
    width: auto;
    height: auto;
    text-align: left;
    border: 0px solid #01ac12;
  }
.page-ff a{
    border: 0px solid #f70000;
    color: #0091f8;
    font-family: "Krub", sans-serif;font-weight: 600;font-style: italic;font-size: 10px;
    letter-spacing: 0;
}
.page-ff a:hover{
    color: #ffffff;

}
.page-gg a{
    border: 0px solid #f70000;
    color: #0091f8;
    font-family: "Krub", sans-serif;font-weight: 600;font-style: italic;font-size: 10px;
    letter-spacing: 0;
}
.page-gg a:hover{
    color: #ffffff;
}
/*----- custom scrollbar ----- */
::-webkit-scrollbar{
    width: 20px;
}
::-webkit-scrollbar-track{
    background: #000000;
    border: inset 3px #3a4d62;
}
::-webkit-scrollbar-thumb{
    background-color: #000000;
    box-shadow: #93ccff 0 0 50px,#93ccff 0 0 50px, inset 3px 2px #3a4d62;
}
::-webkit-scrollbar-corner {
    background: #000000;
}