@font-face {
    font-family: 'excelorateregular';
    src: url('https://arkaik.neocities.org/Fonts/excelorate-font-webfont.woff2') format('woff2'),
         url('https://arkaik.neocities.org/Fonts/excelorate-font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'sladeregular';
    src: url('https://arkaik.neocities.org/Fonts/slade-webfont.woff2') format('woff2'),
         url('https://arkaik.neocities.org/Fonts/slade-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'jeckleregular';
    src: url('https://arkaik.neocities.org/Fonts/jeckle_font-webfont.woff2') format('woff2'),
         url('https://arkaik.neocities.org/Fonts/jeckle_font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  @font-face {
    font-family: 'synkopyregular';
    src: url('https://arkaik.neocities.org/Fonts/synkopy-regular-webfont.woff2') format('woff2'),
         url('https://arkaik.neocities.org/Fonts/synkopy-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
    

html {
    cursor: url("https://arkaik.neocities.org/Cursors/Wii.cur"), auto;
}
    
a{
    cursor: url("https://arkaik.neocities.org/Cursors/wii-pointer-blue.cur"), auto;
}

  
  
body {
background:#cfc0b0 url(https://arkaik.neocities.org/DevGrey.png);
font-family: calibri, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color:#faa039;
letter-spacing:1px;
text-align: justify;
text-justify: inter-word;

}

@keyframes zoom {
  0%   {transform: scale(0);}
  100% {transform: scale(1);}
}

.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {
  position: sticky;
  transition: transform 0.5s ease;
  margin: 10px;
  cursor: zoom-in;
  height: 200px;
  width: 200px;
  object-fit: cover;
  animation-name: zoom;
  animation-duration: 1s;
  animation-direction: normal;  
  float: left;
  border: 5px solid white;
}

.click-zoom input[type=checkbox]:checked~img {
  position: sticky;
  top: 100px;
  transform: scale(4);
  cursor: zoom-out;
  object-fit: contain; 
  z-index: 10;
  border: 0px solid white;
}

.list {
font-family:  Helvetica;
font-size: 12px;
color:#faa039;
letter-spacing:1px;
list-style-type: circle;
list-style-position: inside;
text-align: left;
text-justify: none;

}

#layout {
    margin: 70px auto;
    width: 800px;
    user-select:none;
    border: 0px solid green;

}
  
#navigationbar {
    width: 800px;
    float: left;
    margin: 0 auto;
    border: 0px solid yellow;
    margin-right: auto;margin-bottom: auto
}

#navigation {
  height: 150px;
  line-height:40px;
  background: transparent;
  border-radius: 10px;
  border: 0px solid orange;
  margin-right: auto;margin-bottom: auto;
}
    
 #banner {
    width: 800px;
    float: left;
    margin: 0 auto;
    border: 0px solid blue;
}

#bannertextorimage {
    height: 40px;
    line-height:70px;
    background: transparent;
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
}   
          
#content {
    width: 400px;
    float: left;
    margin: 0 auto;
    border: 0px solid blue;

}

#contentbox {
    background: #FFFFFF;
    border-radius: 10px;
    border: 0px solid #faf9f7;
    margin: 5px;
    padding: 10px;
    margin-bottom:10px;
    z-index: -11;
}
  
#left {
    width: 200px;
    float: left;
    margin: 0 auto;
}

#leftbox {
    border-radius: 10px;
    padding: 10px;
    background: #FFF;
    border-radius: 10px;
    border: 0px solid #1fb8eb;
    margin: 5px;
    margin-bottom:10px;
}
  
#right {
    width: 200px;
    float: left;
    margin: 0 auto;
}

#rightbox {
    padding: 10px;
    border-radius: 10px;
    background: #FFF;
    border-radius: 10px;
    border: 0px solid #b81feb;
    margin: 5px;
    margin-bottom:10px;
}

#AdHolder {
    width: 181px;
    float: left;
    margin: 5px 5px 5px 10px;
}
   
#footer {
    width: 800px;
    margin: 0 auto;
    clear: both;
    left: 50%;
    bottom: 0px;
    border: 0px solid blue;
    
}

#footerbox {
    background: transparent;
    border-radius: 0px;
    border: 0px solid yellow;
    margin: 5px;
    padding-top:5px;
    text-align:center;
}

 #Table {
			border-collapse:collapse;
			padding:5px;width:380px;
		}
    
		#Table th {
		  padding:0px;
		  background: #EFF4FF;
	      color: #666;border-top-left-radius:10px;border-top-right-radius:10px;
          width:50%;
          text-align:left;
          font:12px excelorateregular;
          line-height:12px;
          text-transform:uppercase;
          letter-spacing:2px;
		}
    
	#Table td {
		text-align:center;
		padding:5px;
		background: #ffffff;
		color: #313030;
          width:50%;
          text-align:left;}
          
  #Sticky {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 200px;
    z-index: 20;
  }
  
    #StickyLeft {
    position: fixed;
    bottom: 65px;
    left: 10px;
    z-index: 20;
  }
  
   #StickyTop {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 200px;
  }
  
   #StickyBot {
    position: fixed;
    bottom: 0px;
    z-index: 10;
    width: 100%;
  }
  
  #StickyTopRight {
    position: absolute;
    Top: 0;
    Right: 0;
    width: 200px;
  }

  a:link {
  color:#222;
  text-decoration:none;
  }
  a:visited {
  color:#222;
    text-decoration:none;

  }
  a:hover {
  color:#fc8905;
    text-decoration:none;

  }
       
    
  ::-webkit-scrollbar-thumb {
  background-color: #fff;  
  border-radius: 0px;
  border:1px solid #999;
  }
  ::-webkit-scrollbar {
  width: 7px; height: 4px; 
  background: #fff;
  }
  
  #navigation a:link, a:visited, a:active {font:12px monospace;
  text-transform:uppercase;font:24px excelorateregular;line-height:20px;
  padding:4px; letter-spacing:2px;margin-right: auto;margin-bottom: auto;background:#fff;border-radius:10px;color:#f28729
  
  }
  
  #sidenavigation a:link, a:visited, a:active {font:12px monospace;
  text-transform:uppercase;font:15px jeckleregular;line-height:20px;
  padding:4px; letter-spacing:2px;margin-right: auto;margin-bottom: auto;background:#fff;border-radius:10px;color:#f28729
  
  }
      
  #navigation a:hover {background:#999;
  text-transform:uppercase;font:24px excelorateregular;line-height:20px;
  padding:4px; letter-spacing:2px;margin-right: auto;margin-bottom: auto;
  color:#fff;
  }
  
  #sidenavigation a:hover {background:#999;
  text-transform:uppercase;font:15px jeckleregular;line-height:20px;
  padding:4px; letter-spacing:2px;margin-right: auto;margin-bottom: auto;
  color:#fff;
  }
     
  textarea {font-size:10px;letter-spacing:1px;color:#999;}
  
  .text {font:italic 100px sladeregular;border-bottom:0px solid #fff;text-align:center;color:#fff;letter-spacing:4px;text-transform:uppercase;}
    
  .center {display: block; margin-left: auto;margin-right: auto;width: 50%;}
    
  .small-title {color:#ffffff;text-transform:uppercase;font:12px synkopyregular;line-height:20px;background:#faa039;border-radius: 10px;margin-bottom:5px;}
  .big-title {color:#ffffff;text-transform:uppercase;font:16px excelorateregular;line-height:25px;background:#faa039;border-radius: 10px;margin-bottom:5px;}

 /* moveable div */

  .mydiv {
      position: absolute;
      z-index: 9;
      background-color: #f1f1f100;
      border: 1px solid #d3d3d300;
      text-align: center;
      user-select:none;
      }

  .mydivheader {
      padding: 10px;
      cursor: url(https://arkaik.neocities.org/Cursors/wii-open.cur), auto !important;
      z-index: 10;
      background-color: rgba(76, 175, 80, 0);
      color: #fff;
      user-select:none;
      }
      
    .moveable {
      cursor: url(https://arkaik.neocities.org/Cursors/wii-open.cur), auto !important;
      z-index: 10;
      user-select:none;
      }

  .windowbkg {
      position: absolute;
      background-color: #cecece;
      margin-top: 20px;
      Background-color: rgba(76, 175, 80, 0);
      padding:10px;
      height:70px;
      width:180px;
      user-select:none;
    }

  .scroll-left {
     height: 50px;	
     overflow: hidden;
     position: relative;
     background: orange;
     color: white;
     border: 10px solid white;
     border-radius: 10px;
  }
  .scroll-left p {
     position: absolute;
     width: 100%;
     height: 100%;
     margin: 0;
     line-height: 50px;
     text-align: center;
     /* Starting position */
     transform:translateX(10%);
     /* Apply animation to this element */
     animation: scroll-left 30s linear infinite;
  }
  /* Move it (define the animation) */
  @keyframes scroll-left {
   0%   {
    transform: translateX(100%); 		
   }
   100% {
     transform: translateX(-100%); 
   }
  }
