@font-face {
  font-family: "template";
  src: url("font.ttf");
}
@font-face {
  font-family: "header1font";
  src: url("https://whizzy.neocities.org/webtopia/font/titanone.ttf");
}
@font-face {
  font-family: "navbuttonfont";
  src: url("https://whizzy.neocities.org/webtopia/font/webhostinghub.ttf");
}
@font-face {
  font-family: "div2titlefont";
  src: url("https://whizzy.neocities.org/webtopia/font/orbitron.ttf");
}
@font-face {
  font-family: "pfont";
  src: url("https://whizzy.neocities.org/webtopia/font/chakrapetch.ttf");
}
@font-face {
  font-family: "aboutfont";
  src: url("https://whizzy.neocities.org/webtopia/font/chakrapetch.ttf");
}
@font-face {
  font-family: "box4font";
  src: url("https://whizzy.neocities.org/webtopia/font/chakrapetch.ttf");
}
@font-face {
  font-family: "hoptitlefont";
  src: url("https://whizzy.neocities.org/webtopia/font/orbitron.ttf");
}
@font-face {
  font-family: "hopdescfont";
  src: url("https://whizzy.neocities.org/webtopia/font/orbitron.ttf");
}

p {
 font-family: "pfont", sans-serif;
}

a {
}
a:hover {
}

h2 {
  font-weight: lighter;
  font-family: "div2titlefont", sans-serif;
  color: white;
  font-weight: ;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size:15px;
}

h3 {
  font-weight: bold;
  font-family: "fontname2", sans-serif;
  font-size:16px;
}

html {
  background-image:url(image.gif);
  background-color: #RRGGBB;
  background-image:
    repeating-linear-gradient(45deg, #f1f1f1 25%, transparent 25%, transparent 75%, #f1f1f1 75%, #f1f1f1),
    repeating-linear-gradient(45deg, #f1f1f1 25%, #e1e1e1 25%, #e1e1e1 75%, #f1f1f1 75%, #f1f1f1);
  background-position: 0 0, 11px 11px;
  background-size: 22px 22px;
}

body {
  font-family: "MS PGothic", sans-serif;
  font-size: 13px;
  color: #606060;
  image-rendering: pixelated;
  background-position: top;
  margin: auto;
  width: 1200px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background: rgba(0, 0, 200, 0.1);
  padding: 5px;
  background: #d5d5d5;
  box-shadow: inset 0px 0px 5px #6d6d6d, 0px 0px 15px blue;
  border: 1px solid #f3f3f3;
  border-radius: 10px;
  outline: 2px solid black;
}

header {
  background: linear-gradient(
    180deg,
    #432978 0%,
    #6D258F 20%,
    #330D59 54%,
    #4E1775 100%
  );
  border: solid 1px black;
  border-top-left-radius: 10% 90%;
  border-top-right-radius: 10% 90%;
  box-shadow: 0px 0px 3px black;
  color: #fff;
  font-size: 13px;
  font-weight: bolder;
  margin: auto;
  padding: 10px;
  text-align: left;
  width: 90%;
}

header h2 {
  font-weight: lighter;
  font-family: "header1font", sans-serif;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 50px;
  font-size: 23px;
  filter: drop-shadow(1px 1px 0 #250025) drop-shadow(-1px 1px 0 #400040) drop-shadow(0 -1px 0 #400040) drop-shadow(1px 0 #400040);
  background: linear-gradient(#D9C52C, #D9972C);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Hide text color */
}

.headerimage {
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px;
  width: 90%;
  margin: auto;
  display: flex; 
  justify-content: center;
  align-items: center; 
}

.navbar {
  border:1px solid black;
  border-radius:5px;
  padding:5px;
  width:90%;
  margin:auto;
  background: #9D9C9C;
  background: linear-gradient(
    180deg,
    #B07242 0%,
    #ECDC5F 24%,
    #ECC632 78%,
    #ECDC5F 100%
  );
  text-align:center;
  box-shadow: 0px 0px 3px #575757;
}

/* nav buttons */
.navbutton {
  box-shadow: inset 0px 1px 0px 0px var(--button-shadow, #ff9933), 0px 2px 1px black;
  background-color: var(--button-background, #f9f9f9);
  border-radius: 6px;
  border: 1px solid white;
  display: inline-block;
  cursor: pointer;
  color: white;
  font-family: "navbuttonfont", MS; 
  font-size: 10px;
  padding: 3px;
  text-decoration: none;
  text-shadow: 0px 1px 0px black;
  width: 120px;
  margin-right: 3px;
  text-align: center;
  font-weight: ;
}
.navbutton:active {
  position: relative;
  top: 1px;
}
.navbutton-red {
  background: linear-gradient(
    180deg,
    #830505 0%, #B01009 24%, #6B0606 78%, #B80D0D 100%);
}
.navbutton-red:hover {
  background: linear-gradient(
    0deg,
    #660707 0%, #A10D06 24%, #6B0606 78%, #B80D0D 100%);
}
.navbutton-orange {
  background: linear-gradient(
    180deg,
    #875D0B 0%,
    #BF7A09 24%,
    #6B4006 78%,
    #B8600D 100%
  );
}
.navbutton-orange:hover {
  background: linear-gradient(
    0deg,
    #664607 0%,
    #A16606 24%,
    #6B4006 78%,
    #B8600D 100%
  );
}
.navbutton-yellow {
  background: linear-gradient(
    180deg,
    #5C6607 0%,
    #A19C06 24%,
    #586B06 78%,
    #B5B80D 100%
  );
}
.navbutton-yellow:hover {
  background: linear-gradient(
    0deg,
    #5C6607 0%,
    #A19C06 24%,
    #586B06 78%,
    #B5B80D 100%
  );
}
.navbutton-green {
  background: linear-gradient(
    180deg,
    #07661B 0%,
    #06A141 24%,
    #066B09 78%,
    #0DB821 100%
  );
}
.navbutton-green:hover {
  background: linear-gradient(
    0deg,
    #07661B 0%,
    #06A141 24%,
    #066B09 78%,
    #0DB821 100%
  );
}

.navbutton-teal {
  background: linear-gradient(
    180deg,
    #076651 0%,
    #06A18C 24%,
    #066B4C 78%,
    #0DB892 100%
  );
}
.navbutton-teal:hover {
  background: linear-gradient(
    0deg,
    #076651 0%,
    #06A18C 24%,
    #066B4C 78%,
    #0DB892 100%
  );
}
.navbutton-blue {
  background: linear-gradient(
    180deg,
    #074066 0%,
    #0663A1 24%,
    #063A6B 78%,
    #0D65B8 100%
  );
}
.navbutton-blue:hover {
  background: linear-gradient(
    0deg,
    #074066 0%,
    #0663A1 24%,
    #063A6B 78%,
    #0D65B8 100%
  );
}
.navbutton-purple {
  background: linear-gradient(
    180deg,
    #320766 0%,
    #6806A1 24%,
    #46066B 78%,
    #880DB8 100%
  );
}
.navbutton-purple:hover {
  background: linear-gradient(
    0deg,
    #320766 0%,
    #6806A1 24%,
    #46066B 78%,
    #880DB8 100%
  );
}
/* end of navbuttons */

.main {
  box-shadow:inset 0px 0px 5px rgba(0,0,255,0.76);
  border-radius:3px;
  padding:5px;
  width:90%;
  margin:auto;
  opacity: 1;
  background-image: radial-gradient(#CE3C8A 1px, #B02C72 1px);
  background-size: 13px 13px;
  box-shadow:0px 0px 2px black;
}

.parent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; text-align:center; }
.div2 { grid-area: 1 / 2 / 2 / 3; padding-right:10px;}

/* div1 */
.about {
  border-radius:3px;
  padding:10px;
  width:250px;
  word-wrap: break-word;
  margin:5px;
  margin-left:10px;
  color:grey;
  padding: 5px;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0px 0px 0px 1px white, 0px 2px 0px 1px white inset, 0px -1px 0px 1px grey inset;
  background: #e1e1e1;
  opacity: 1;
  font-family: "aboutfont", sans-serif;
  font-size:10px;
}

.aboutin {
  padding:7px;
  margin:2px;
  color:grey;
  border: 1px #093A56;
  border-radius: 5px;
  box-shadow: inset 0px 0px 2px rgba(0,0,0,0.5);
  background: #6fb7d1;
}

.contact {
  background: linear-gradient(
    180deg,
    #763BCB 0%,
    #5D0E94 16%,
    #470377 31%,
    #280051 50%,
    #470377 68%,
    #5D0E94 90%
  );
  border-radius: 5px;
  border: 2px solid black;
	padding:5px;
	width:95%;
}
.contact h2 {
 filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
 font-family: "abouth2font", sans-serif;
}

.box {
  box-sizing: border-box;
  border-radius: 4px;
  margin: 0 auto;
  padding: 5px;
  font-size: 14px;
  border: 1px solid grey;
  background: rgb(255, 255, 255);
background: linear-gradient(
  50deg,
  #ECD7D7 0%,
  #ECDACC 15%,
  #E3E5C9 30%,
  #C9E8CA 45%,
  #D0E0E8 60%,
  #D8C6E5 80%
);
  box-shadow: 0px 0px 0px 1px white, 0px 2px 0px 1px white inset,
    0px -1px 0px 1px grey inset;
  display: flex;
  color: white;
  text-shadow: 1px 1px 1px black;
}

.box2 {
  background:#e9e9e9;
  box-sizing: border-box;
  font-size: 14px;
  margin: 0 auto;
  font-size:13px;
  color:grey;
  background: rgb(233,233,233);
  background: linear-gradient(
    180deg,
    rgba(233,233,233,1) 46%,
    rgba(201,201,201,1) 100%);
  box-shadow:0px -1px 0px 1px rgba(0,0,0,0.2) inset;
  border:1px solid grey;
  padding:3px;
  border-radius:5px;
} 
.box2 h2 {
filter:none;
}

/* Box3 Container */
.box3 {
    background: linear-gradient(to bottom, #dddddd, #aaaaaa);
    height: 100px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
}
.box3-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 220px; 
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    color: black;
}
.box3-title {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    margin: 0;
}
.box3-url {
    font-size: 13px;
    font-family: Arial, sans-serif;
    margin: 0;
    color: blue;
}
.box3-descbox {
    position: relative;
    background: linear-gradient(to bottom, #eeeeee, #cccccc);
    color: #333333; 
    padding: 10px;
    padding-left:40px;
    font-size: 13px;
    font-family: Arial, sans-serif;
}
.box3-descimage {
    position: absolute;
    top: 50%; 
    transform: translateY(-50%);
    left: 0px;
    width: 40px;
    height: 40px;
}
.box3-image {
    position: absolute;
    top: 0;
    right: 120px; 
    height: 100%;
    padding: 0 10px;
}
.box3-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    background: linear-gradient(to right, #666666, #444444);
    text-decoration: none;
}
.box3-arrow:hover {
    background: linear-gradient(to right, #444444, #222222);
}
.arrow-symbol {
    text-decoration: none; 
}

/* box4 */
.box4 {
  width: 777px;
  border-radius: 10px;
  background-color: rgba(178, 210, 221, 0.8);
  padding: 5px;
  font-family: "box4font", sans-serif;
}
.hop {
  background-color: #6FB8D2;
  border-radius: 10px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: 5px;
  vertical-align: top;
}
.hopheader {
  background: linear-gradient(
    #2E8992 0%,
    #3BA5CA 10%, /* Purple */
    #2E6F92 45%, /* Orangek */
    #14577C 80%
  );
  border-radius: 10px 10px 0 0;
  padding: 10px;
}
.hoptitle {
  font-size: 18px;
  font-weight: bold;
  color: white;
  padding: 5px;
  display: inline-block;
  margin-bottom: 1px;
  font-family: "hoptitlefont", MS;
}
.hopurl {
  font-size: 14px;
  color: #DBDDDC;
  text-decoration: none;
}
.hopdescimage {
  position: absolute;
  top: 5px; /* Adjust based on padding */
  left: 5px; /* Adjust based on padding */
  width: 50px;
  height: 50px;
  border-radius: 10px; /* Adjust the border-radius to make it a rounded square */
  background-color: #CACACA; /* Set the background color */
  z-index: 1;
}
.hopdesc {
    background: linear-gradient(to bottom, #F7F7F7, #dddddd);
  border-radius: 5px;
  padding: 10px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  padding-left: 64px;
  position: relative;
  min-height: 40px;
  font-family: "hopdescfont";
  font-size: 15px;
  color: black;
}
.hopfooter {
background: linear-gradient(
  to right, /* Horizontal gradient */
  #E19393 0%,
  #E19A61 15%,
  #D9E161 30%,
  #61E165 45%,
  #61B4E1 60%,
  #AC61E1 80%
);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15px;
  text-align: center;
  z-index: 1;
}
.hopfooter span {
  color: #FFFFFF;
  font-size: 24px;
}
.top-right-image {
  position: absolute;
  top: 10px; /* Adjust top margin as needed */
  right: 10px; /* Adjust right margin as needed */
  width: 40px;
  height: 40px;
}
.hopheader:hover{
background: purple;
}

/* div2 */
.title {
  background: linear-gradient(
    180deg,
    #641d60 0%,
    #8B2A66 20%,
    #641d60 54%,
    #701B50 100%
  );
  color: black;
  padding: 5px 5px 5px 5px;
  border-radius: 20px 20px 0px 0px;
  margin-top: 5px;
  border: 2px solid #833307;
  text-align: center;
}
.title h2 {
  font-weight: bold;
  font-family: "div2titlefont", sans-serif;
  color: white;
  margin-top: 0px;
  margin-bottom: 0px;
  font-size:16px;
}  	

.info {
  background:white;
  padding:10px;
  padding-top:1px;
  width:770px;
  color:#0d0d57;
  word-wrap: break-word;
  border-radius:0px 0px 4px 4px;
  background: rgb(255,255,255);
  background: linear-gradient(
  180deg, 
  rgba(255,255,255,1) 46%, 
  rgba(233,233,233,1) 100%);
  font-size:14px;
  font-family: sans-serif;
  box-shadow: 0px 0px 0px 1px white, 0px 2px 0px 1px white inset, 0px -1px 0px 1px grey inset;
}

.divider{
  padding-top:10px;
  margin:0px;
  width:100%;
  background:linear-gradient(
  180deg, 
    rgba(203, 59, 59, 1) 0%, 
    rgba(148, 14, 14, 1) 16%, 
    rgba(119, 3, 4, 1) 31%, 
    rgba(81, 0, 0, 1) 50%, 
    rgba(119, 3, 4, 1) 68%, 
    rgba(148, 14, 14, 1) 90%);
  border-radius:10px 10px 0px 0px ;
  border:2px solid black;
}

.portalbutton-link {
  display: inline-block; 
  width: 97%; 
  height: 100%; 
  text-decoration: none;
}
.portalbutton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border-radius: 10px;
  background: linear-gradient(
    0deg,
    #698EB8 0%,
    #CECECE 10%,
    #878787 78%,
    #CECECE 100%
  );
  overflow: hidden;
}
.portalbutton:active {
  top: 1px;
}
.portalbutton:hover {
  background: linear-gradient(
    180deg,
    #61925D 0%,
    #A3E5B0 10%,
    #4EC471 78%,
    #56E373 100%
  );
}
.portalbutton-text {
  margin: 10px;
  font-size: 20px;
  color: white; 
  flex-grow: 1;
  font-weight: bold; 
  -webkit-text-stroke: 1px #ccc;
  text-shadow: 
    0 0 5px red, 
    0 0 10px yellow,
    0 0 15px blue, 
    0 0 20px purple; 
}
.portalbutton-leftimage {
  width: 50px;
  border-radius: 5px;
}
.portalbutton-rightimage {
  height: 30px;
  border-radius: 5px;
}

footer {
  background: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
  background: linear-gradient(
    180deg,
    #432978 0%,
    #6D258F 20%,
    #330D59 54%,
    #4E1775 100%
  );
  border: solid 1px black;
  border-bottom-left-radius: 10% 90%;
  box-shadow: 0px 0px 3px black;
  font-size: 13px;
  font-weight: bolder;
  margin: auto;
  text-align: center;
  text-shadow: 2px 2px 0px black;
  width: 90%;
}
		
.tg  {
border-collapse:collapse;
border-spacing:0;
}

table.minimalistBlack {
  border: 1px solid #000000;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  margin-top:10px;
}
table.minimalistBlack td, table.minimalistBlack th {
  border: 1px solid #919191;
  padding: 5px 10px;
}
table.minimalistBlack tbody td {
    font-size: 13px;
    background: white;
}
table.minimalistBlack td:nth-child(even) {
  background: #F4F4F4;
}
table.minimalistBlack thead {
  background: linear-gradient(
    180deg, 
    rgba(30,18,107,1) 0%, 
    rgba(36,38,141,1) 20%, 
    rgba(12,14,85,1) 54%, 
    rgba(32,22,115,1) 100%);
  border-bottom: 2px solid #150758;
}
table.minimalistBlack thead th {
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: left;
  border-left: 2px solid #130B65;
}
table.minimalistBlack thead th:first-child {
  border-left: none;
}
table.minimalistBlack tfoot td {
  font-size: 11px;
}
table.minimalistBlack td, table.minimalistBlack th {
    border: 1px solid #000000;
    padding: 5px 10px;
}
table h2 {
  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
  font-size:12px;
}

.interest {
  height: 100px;
  overflow-y:scroll;
}

.stop img {
  border:3px outset #bababf;
  width:80px;
}
 
.marquee{
  display: inline-block;
  padding-left: 100%;
  animation: marquee 5s linear infinite;
}
@keyframes marquee{
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

#scroll {
  width: 334px;
  height: 250px;
  font-size: 2em;
  overflow-y: scroll;
  float: left;
  background-image: url("https://zanarkand.neocities.org/backgrounds/red1.jpg");
  border: 5px groove rgb(153, 153, 153);
  background-color: rgb(255, 255, 255);
  }

::-webkit-scrollbar {
  width: 16px;
  height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #fff;
    background-image: url(https://i.imgur.com/Qtm9Z60.png);
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
  ::-webkit-scrollbar-track {
    background-color: #fff;
    background-image: url(https://i.imgur.com/IGXGYKz.png);
  }
  ::-webkit-scrollbar-button:vertical:increment {
    background-image: url(https://i.imgur.com/WhC8iy3.png);
    width: 14px;
    height: 16px;
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
  ::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(https://i.imgur.com/fQ18mrR.png);
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    width: 14px;
    height: 16px;
  }
  ::selection {
color: white;
background: rgb(150,150,150);
}