* {
  box-sizing: border-box;
}
@font-face {
  font-family: "DOS"; 
  src: url('Px437_DOS-V_re_ANK24.woff2') format('woff2');
}
header {
			width: fit-content;
			padding: 7px;
			margin: 7px auto -7px auto;
			text-wrap: balance;
			position: relative;
			z-index: 100;
			font-size: 18px;
			text-align: center;
		}
h1 { font-size: 26px; line-height: 26px; color: #000;
			text-shadow: none; margin: 0; text-align:left; color: white; }
body {
			overflow-x: hidden;
			font-family: "DOS";  
			src: url('Px437_DOS-V_re_ANK24.woff2') format('woff2');
		}
		
/* Top navigation bar */
.navbar {
  margin-left: 200px;
  margin-right: 200px;
  display: flex;
  background: #522a9b;
  background: linear-gradient(90deg,rgba(82, 42, 155, 1) 0%, rgba(87, 124, 199, 1) 50%, rgba(83, 114, 237, 1) 100%);
}

/* Navigation bar links */
.navbar a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.container {  
  display: flex;
  flex-wrap: wrap;
  margin-left: 15%;
  margin-right: 15%;
}

/* Sidebar/left column */
.side {
  flex: 15%;
  padding: 20px;
  text-align: justify;
  border-style: dotted;
  border-width: 2px;
  border-color: white;
}


/* Main column */
.main {
  flex: 55%;
  padding: 20px;
  text-align: justify;
  text-justify: inter-word;
  border-style: dotted;
  border-width: 2px;
  border-color: white;

}h

	/* this is a css cpde that is responsible to make something rotate when hovered... this will be used later
	.rotate, .appear {
			width: fit-content;
			height: fit-content;
			display: inline-block;
			position: absolute;
			color: transparent; background:transparent;
		}
	.rotate:hover, .rotate:focus, .appear:hover, .appear:focus {
			color: transparent; background:transparent;
		}
	.rotate:hover img, .rotate:focus img {
			transform: rotate(3deg);
		}
	.rotate:hover span, .rotate:focus span, a:focus span {
			opacity: 1;
		}
	.appear img {
			opacity: 0;
		}
	.appear:hover img, .appear:hover span, a:focus img {
			opacity: 1;
		} */
	
	  /* Making a "Blink" effect since the actual tag is dead */
    .blink {
        animation: blinker 1s linear infinite;
        color: red;
        font-weight: bold;
        text-decoration: none;
    }

    @keyframes blinker {
        50% { opacity: 0; }
        }
	
	/* this makes her hop when the cursor hovers her */
  hop:hover {
  position: relative;
  animation-name: janetcursor;
  animation-duration: 0.25s;
}

	/* this changes the image when you hover her*/	
	.janet-hover {
    display: inline-block;
    background-image: url('https://2nz.neocities.org/images/janetidle2.png');
    background-size: cover; 
    cursor: pointer;
    font-size: 20px;
  }
  .janet-interact img {
    display: block;
  }
  .janet-hover:hover img {
    opacity: 0;
    animation-name: janetcursor;
    animation-duration: 0.10s;
  }
  
  /* animation keyframes for janet lol*/
  @keyframes janetcursor {
  0%   {top:0px;}
  50%  {top:-10px;}
  100% {top:0px;}
}

 /* this is to stylize the links*/
  a:link {
  color: #9292A8;
  background-color: transparent;
  text-decoration: none;
}
  a:visited {
  color: #717182;
  background-color: transparent;
  text-decoration: none;
}
  a:hover {
  color: #5f5f85;
  background-color: #373752;
  text-decoration: underline
}
  a:active {
  color: #373752;
  background-color: transparent;
  text-decoration: underline;
}

.topnav {
  overflow: hidden;
  background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background: linear-gradient(0deg,rgba(77, 76, 76, 1) 0%, rgba(153, 153, 153, 1) 100%);
  color: black;
  text-decoration: underline;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.subnav {
  float: left;
  overflow: hidden;
}

.subnav .subnavbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.subnav-content {
  display: none;
  position: absolute;
  background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
  z-index: 1;
  width: 120px;
  bottom: -166px;
}

.subnav-content a {
  color: white;
}

.subnav-content a:hover {
  background: linear-gradient(0deg,rgba(77, 76, 76, 1) 0%, rgba(153, 153, 153, 1) 100%);
  color: black;
}

.subnav:hover .subnav-content {
  display: block;
}