/* comment */

@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: #25361E;
  background: url('mascot_corner.png') no-repeat fixed right top, linear-gradient(180deg, #000000 0%, #25361E 8%, #25361E 15%, #000000 105%);
  background-size: 35%;
  min-height: 100%;
  overflow-x: clip;
  margin: 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;
  padding: 0px 40px;
  letter-spacing: 0.06em;
  background: #FF1616;
  border: solid transparent 3px;
  border-radius: 100%;
  width: fit-content;
  margin: 1% auto;
}
  
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%;
  }
}

.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;
}

.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: 90pt;
  display; inline-flex;
  align-content: center;
}

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

.navlink {
	display:inline-block;
	padding: 0px 5px 0px 5px;
	margin: 3px 3px;
}

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

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

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

@media (max-width:950px){
/* mobile style here */	
}

@media (min-width:950px){
.navlink {
	background-color: #545454;
	background: url('button_bg.jpg') center;
	border: 3px solid #ffffff00;
	border-radius: 5px;
	font-family: "Play";
	font-style: bold;
	font-size: 22px;
	color: #ffffff;
	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: 1% 0%;
  display: grid;
  grid-template-columns: 2fr 0.5fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "main rightbar";
}

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;
}
  
.gallery {
  grid-area: "main";
	}

.gallery-item {
    display: flex;
    flex-direction: column;
}
  
.gallery-row-x2 {
  display: grid;
  grid-template-columns: repeat(2, 0.5fr);
  justify-content: space-between;
  gap: 3%;
  padding: 1%;
  margin-bottom: 5%;
  }
  
.gallery-row-x3 {
  display: grid;
  grid-template-columns: repeat(3, 0.5fr);
  justify-content: space-between;
  gap: 3%;
  padding: 1%;
  margin-bottom: 5%;
  }
  
.gallery-row-x4 {
  display: grid;
  grid-template-columns: repeat(4, 0.5fr);
  justify-content: space-between;
  gap: 3%;
  padding: 1%;
  margin-bottom: 5%;
  }

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

.contact-me {
	float: right;
	position: sticky;
	bottom:0%;
	left: 100%;
	width: 25%;
}
	
}