/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: 'Play';
    src: url('fonts/play-regular.woff2');
    src: url('fonts/play-regular.woff2') format('woff2'),
        url('fonts/play-regular.woff') format('woff'),
        url('fonts/play-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Exo';
    src: url('fonts/Exo-Regular.eot');
    src: url('fonts/Exo-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Exo-Regular.woff2') format('woff2'),
        url('fonts/Exo-Regular.woff') format('woff'),
        url('fonts/Exo-Regular.tatf') format('truetype'a);
    font-weight: normal;
    font-style: normal;
}
body {
  color: #FFF9A2;
  font-family: "Verdana";
  background: #F0F0F0;
  background: linear-gradient(180deg, #FCEEA0 0%, #F0F0F0 2%, #9CA5B5 105%);
  background: #25361E url('mascot_corner.png') no-repeat fixed right top;
  background-size: 35%;
  min-height: 100%;
  overflow-x: clip;
  margin: 0px;
}

.home-bg {
  background: url('site_bg (a).jpg') left 0% no-repeat, url('site_bg (b).jpg') right 0% no-repeat ;
  background-size: 15%;
  margin: 0px;
  padding: 0px;
}

h1 {
  font-family: "Play";
  font-weight: bold;
  font-size: 40px;
  color:#FF1616;
  letter-spacing: 0.06em;
  }

h2 {
  font-family: "Play";
  font-weight: bold;
  font-size: 30;
  color:#FFFFFF;
  margin: 3px auto;
  padding: 0px 40px;
  letter-spacing: 0.06em;
  background: #FF1616;
  border: solid transparent 3px;
  border-radius: 100px;
  width: fit-content;

}
  
header {
	font-family: "Play";
	font-weight: bold;
	font-size: 60px;
	text-align: center;
	margin: auto;
    /*background-image: url('banner2.png');
  background-repeat: repeat-x;
  background-attachment: scroll;
  background-position: center top;  
  animation-name:backgroundloop;
  animation-iteration-count: infinite;
  animation-duration:55s;
  animation-timing-function: linear;*/
}


@keyframes backgroundloop {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position:1879px 0%;
  }
}

.front-page {
	font-family: "Play";
	font-weight: bold;
	font-size: 25px;
	text-align: center;
	margin: auto;
	position: absolute;
	bottom: 0%;
	top: 0;
	left: 0;
	right: 0%;
}

.front-page  h1, .front-page h2,  .front-page p {
	margin: 2px;
}

img {
	max-width: 100%;
	max-height: 100%;
}

.title-box {
  background: linear-gradient(#FFFFFF00 10%, #F0F0F000 50%, #F0F0F000 100%);
  margin: 0px 0px 20px 0px;
  padding: 20px 0px 0px 0px;
  height: 110px;
}

nav {
  margin: 0px 15px 0px 15px;
	text-align: center;
}

.navlink img {
	height: 50px;
	vertical-align: middle;
}

.navlink:hover {
	background-color: #FF1616;
	background: url('button_bg2.jpg') center, #D73D3D;
}


.rightbar h2{
	text-align: center;
	#margin: 5px 13px;
	font-size: 30px;
}

.link {
	margin: 10px 15px;
	background: #F0F0F0;
	border: 5px solid #F0F0F0;
	border-radius: 10px;

}

.link h3{
	text-align: center;
	margin: 0px 0px 5px 0px;
	font-size: 16px;
}
.link p{
	font-size: 11pt;
	margin: 1px;
	text-align: center;
}

.link_img {
	margin: 10px 20px 11px 11px;
}
.link_img img{
	display: block;
	width: 100%;
	border: 2px solid #F0F0F0;
	border-radius: 2px;
}

.link a:link {
	text-decoration: none;
	color: #FF1616;
}

.link a:link:hover {
	background-color: #FF5E5E00;
	text-decoration: underline;
	border-radius: 5px;
}

.leftbar {
	color: black;
	font-weight: bold;
}

.contact-me {
    background-color: #;
    font-family: "Play";
	font-size: 20px;
    color: #000000;
    margin: 10px;
}

main {
	font-family: "Exo";
	padding: 15px 8% 15px 8%;
	margin-top: 15px;
	line-height: 25px;
	font-size: 15px;
}

.blog-entry h3{
	margin: 5px 0px;
}
.blog-entry p{
	padding: 0px;
	margin: 8px 0px 8px 15px;
	font-size: 15px;
}


@media (max-width:950px){
	
.navlink {
	display:inline-block;
	background-color: #545454;
	background: url('button_bg.jpg') center;
	border: 3px solid #ffffff00;
	border-radius: 13px;
	font-family: "Play";
	font-style: bold;
	font-size: 22px;
	color: #ffffff;
	padding: 4px 6px 4px 6px;
	text-decoration: none;
}

.title-box {
	padding-top: 15px;
	padding-bottom: 0px;
	margin-bottom:1%;
	top: 0;
	height:fit-content;
	width: 100%;
}
	
#mascot, #mascot_top, .stripes{
	display: none;
}

header {
	background-size: contain;	
	height:fit-content;
}
header br {
	display:none;
}
.navlink {
	margin: 1% 1%;
}


.leftbar { 
    font-weight: normal;
    font-family: "Play";
	padding: 0% 5%;
}
.leftbar p {
	margin: 0px;		
}
.leftbar img {
	display: none;
	width: 15%;
}

table {
	overflow-y: scroll;
	display: block;
	max-height: 100px;
	font-face: "Play";
	font-weight: normal;
}
table td{
	font-size: 14px;
	padding-right: 5px;
	vertical-align: top;
	horizontal-align: left;
}

.rightbar {
	text-align: center;
}
.rightbar img {
	width: 70%;
	display:inline;
}
	
}

@media (min-width:950px){
.navlink {
	background-color: #545454;
	background: url('button_bg.jpg') center;
	border: 3px solid #ffffff00;
	border-radius: 13px;
	font-family: "Play";
	font-style: bold;
	font-size: 22px;
	color: #ffffff;
	padding: 4px 6px 4px 6px;
	text-decoration: none;	
}

#mascot {
	max-width: fit-content;
	max-height: fit-content;
	width: 450px;
	position: absolute;
	top: -30px;
	left: 70%;
	z-index: -99;
	
}
#mascot_top{
	max-width: fit-content;
	max-height: fit-content;
	width: 450px;
	position: absolute;
	top: -30px;
	left: 70%;
	pointer-events: none;
}
	
.grid-container {
  margin: 0% 0% 0% 3%;
  display: grid;
  grid-template-columns: 2fr 0.5fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "main rightbar";
}

.subgrid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 10px 10px;
  grid-template-areas:
    "g1 g2 g2 g3";
}
.g1 { grid-area: g1; }
.g2 { grid-area: g2; }
.g3 { grid-area: g3; }
}
/*Keeping the stripes for future reference*/
.stripes {
	display: none;
	background: url('stripes.png');
	background-size: cover;
	color: #00000000;
	border: none;
	border-radius: 3px;
	margin: 0px;
	padding: 0px;
	width: 100%;
}

main { 
  grid-area: main;  
  #border: 2px  dashed #7F7F7F;
  #border-left: 2px dashed #7F7F7F;
  #background: url('watermark2.png') center, #F5F5F2;
  background-repeat: no-repeat;
  background-size: 30%, 100%;
  background-attachment: scroll, scroll;
}

table {
	overflow-y: visible;
	display: block;
	font-family: "Play";
	font-weight: normal;
}

table td{
	font-size: 12px;
	vertical-align: top;
	horizontal-align: left;
}

.rightbar { 
    grid-area: rightbar;
	margin-top: 15px;
	margin: 5px;
}

#featured {
	background: url('featured.png') left;
	background-size: cover;
	width: 100%;
	padding: 0px 20%;
	margin: 10px 15px;
	text-align: center;
	border-radius: 5px;
	border: none;
}

.leftbar {
	float: left;
	width: auto;
	height: 100%;
	background: #000000;
	font-weight: bold;
	writing-mode: vertical-lr;
	text-align: center;
	position: fixed;
	left: 0;
	top: 0;
}
	
}