/* Basic Layout*/
.container {
  display:grid;
  grid-gap: 15px;
  grid-template:
   "header header"
   "side main"
   "foot foot"
   / 1fr 4fr;
   padding:65px;
   max-width:1000px;
  margin: auto;
   background-color: lavender;
   border-radius: 60px;
   border: 6px solid #4B0082;
   } 
.header {grid-area: header;
  background-color:white;
  font-family: 'Anta';font-size: 22px;
  text-align:center;
  border: 5px dotted #4B0082;
  border-radius: 20px;
  }
 
.side {grid-area: side;
  background-color:white;
  font-family: 'Anta';font-size: 15px;
  text-align:center;
  padding:15px;
  border-radius: 20px;
  border: 5px double #4B0082;
  
  } 
  
.navbuttons {
  background-color:#EDEDFB;
  align-items:center;
  border-radius: 10px;
  border: 3px outset black;
  padding:10px;
  margin:10px
}
.navbuttons:hover {
  background-color:#EDEDFB;
   align-items:center;
  border-radius: 10px;
  border: 3px inset black;
  padding:10px;
  margin:10px
  
}
.main {grid-area: main;
  background-color:white;
  padding:20px;
  border-radius: 20px;
  border: 5px double #4B0082;
  }

.inmain {
  display:flex;
  flex-wrap:wrap;
  padding:5px;
  justify-content: space-around;
}
.keyboard {
  display:flex;
  flex-wrap:nowrap;
  flex-direction:column;
}
.announcements {
  position: relative;
  width: 375px;
	background: #B39AE5;
	border-radius: 5px;
	padding:20px;
}
.announcements:after {
  content: '';
	position: absolute;
	bottom: 0;
	left: 25%;
	width: 0;
	height: 0;
	border: 32px solid transparent;
	border-top-color: #B39AE5;
	border-bottom: 0;
	border-right: 0;
	margin-left: -16px;
	margin-bottom: -32px;
}

.mainside {
  display:flex;
  flex-wrap:nowrap;
  flex-direction:column;
  align-content:center;
  border-radius:5px;
  border: 6px groove black;
  width:225px;
  padding: 10px;
  
}

.updates {
  overflow: auto;
  border-radius: 5px;
  border: 2px solid black;
  height: 100px;
  width:200px;
  padding:5px;
  margin:20px 5px 20px 5px;
  line-height: 1.5;
}
.spotlight {
  border-radius: 5px;
  border: 2px solid black;
  padding:10px;
  margin:20px 5px 20px 5px;
  }
.sitebuttons {
  border-radius: 5px;
  border: 2px solid black;
  padding:10px;
  margin:20px 5px 20px 5px;
}

.intro {
  text-align:center;
}

.intro p {
  line-height:1.2;
  font-size:20px
  
}

.aboutimgs {
  display:flex;
  flex-wrap:nowrap;
  flex-direction:column;
  border-radius:5px;
  border: 2px solid black;
  width:255px;
  padding: 2px;
  margin:2px;
}
.idbadges {
  display:flex;
  flex-wrap:wrap;
  padding: 2px;
}

.abouttxt {
  border-radius: 5px;
  border: 2px solid black;
  padding:10px;
  font-size:18px;
  width: 55%;
  margin:3px;
}
.aboutnav {
  display:flex;
  justify-content:center;
}
.abtbutton {
  background-color:#EDEDFB;
  border-radius: 10px;
  font-family: 'Anta';
  border: 3px outset black;
  padding:10px;
  margin:10px
  
}
.abtbutton:hover {
  background-color:#EDEDFB;
   align-items:center;
  border-radius: 10px;
  border: 3px inset black;
  padding:10px;
  margin:10px
  
}

.foot {grid-area: foot;
  background-color:white;
  padding:20px;
  border-radius: 20px;
  border: 5px double #4B0082;
}

body {
background-color: #ededfb;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23674799' fill-opacity='0.52'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");
font-family: Verdana;
line-height: 1.5;
font-size:20px;
cursor: url(/Images/catcursor.gif), auto;
}

a, a:visited, a:hover, a:active {
  color:black; text-decoration: none;
}