:root {
  --dkest: #091349;
  --dark: #24369e;
  --mid: #5551d4;
  --light: #6978ce;
  --lightest: #B2B0E8;
  --main: #eff9ff;
}

html {
     background-image:url('https://thegreenroom.neocities.org/spr_dw_tv_starbgtile_0.gif');
     background-repeat:repeat;
     background-position: top left;
     animation: mymove 20s linear infinite;
     color:var(--dark);
      cursor: url("https://file.garden/aGVgARL4OBP7L4sn/sym599.cur"), auto;
     }

     @keyframes mymove {
  50% {background-position: center;}
}

body {
         margin:0;
     font-family:"MS Gothic", Arial;
     font-size:15px;
}

.layout {
display: grid;
grid-template-columns: 1fr 350px;
grid-template-rows: auto 10px 1fr 10px 50px;
grid-column-gap: 0px;
grid-row-gap: 0px;
  grid-template-areas:
    "header header"
    "top top"
    "main right"
    "bottom bottom"
    "footer footer";
  max-width: 1230px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 100vh;
}


.sidebar {
 top:20px;
    padding:10px;
text-align:center;
    grid-area: right;
  border: 5px ridge var(--dark);
  border-block:none;
  background: url(/images/strip05106.gif);
  width: 1fr;
  box-sizing: border-box;
  height:100%;
}

.sidescroll {
  box-sizing: border-box;
  padding-inline:20px;
  padding-block:10px;
    overflow:auto;
    width:100%;
    height:100px;
}


top {
  grid-area: top;
 border: 5px var(--dark) ridge;
 border-block:none;
  background: linear-gradient(to bottom, var(--light), var(--dark));
  height:60px;
}

bottom {
  grid-area: bottom;
  background: linear-gradient(to bottom, var(--light), var(--dark));
 border: 5px var(--dark) ridge;
 border-block:none;
  z-index:3;
  height:20px;
}


header {
  grid-area: header;
  background: url(/images/grid-02.png), linear-gradient(to bottom, var(--light) 0%, var(--mid) 10%, var(--dark) 90%);
  text-align: center;
  padding: 20px;
  border-radius: 20px 20px 0 0;
 border: 5px var(--dark) ridge;
 border-bottom:none;
 top:0;
 z-index:10;
}


main {
  padding:40px;
  text-align:center;
  grid-area: main;
  background: url(/images/strip05106.gif);
 border-left: 5px var(--dark) ridge;
}

.scroll {
    padding:30px;
     height:68vh;
 overflow:auto;
}

.sitelistscroll {
     height:68vh;
 overflow-y:auto;
 overflow-x:hidden;
}

right {
  grid-area: right;
 z-index:2;
}

footer {
 border: 5px var(--dark) ridge;
 border-top:none;
  position:relative;
  grid-area: footer;
  background: #5aacff;
  background: linear-gradient(to bottom, var(--light) 0%, var(--mid) 10%, var(--dark) 90%);
  text-align: center;
  color: var(--main);
  padding: 5px;
  z-index:3;
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
}


leftsticky {
 position:fixed;
 bottom:0;
 left:-20px;
 z-index:20;
 pointer-events:none;
  filter: drop-shadow(3px 10px 3px rgba(10, 10, 12, 0.295));

}

rightsticky {
 position:fixed;
 bottom:0;
 right:-20px;
 z-index:20;
 pointer-events:none;
  filter: drop-shadow(-3px 10px 3px rgba(10, 10, 12, 0.295));
}

.sitelist {
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-rows: 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.sitelist table {
  border-collapse: collapse;
  width: 100%;
}

.sitelist td, th {
  border: 1px solid #ddd;
  padding: 25px;
}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--dark);
  color: white;
}

li, ol, ul {
  margin-bottom:10px;
  text-align:left;
}


/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--dark) #ffffff00;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 15px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--dark);
    border-radius: 0px;
    border: 1px #ffffff;
  }