/* Delcaration of Custom fonts we wish to use */
    @font-face {
    font-family: 'Impress BT';
    font-style: normal;
    font-weight: normal;
    src: local('Impress BT'), url('fonts/impress-bt-58d9dc6098a03.woff') format('woff');
    }


/* Style of main page body */
body {
  background: blue;
  background-image: url("images/SonicTimeSeamless.png");
  font-family: "Helvetica", "Arial", sans-serif;
  color: #DBDBDB;
  line-height: 25px;
  word-spacing: 3px;
  letter-spacing: 0px;
  font-size: 18px;
  }

  /* Page content is placed in a box, whose parameters are set here
  such as the corner radii, outer shadow/glow, etc */
  .wrapper {
  width: 1300px;
  margin: 0 auto;
  box-shadow: 0 0 15px 5px #ebe2d9, 0 0 15px 10px #2f1aec, 0 0 25px 20px #0e003f;
  border: 0 solid #042024;
  border-radius: 20px;     /* This needs to match the border-radius in the .header class below */
  }

  /* Container with solid borders for images */
  .imagecontainer-simple {
    width: auto;
    height: auto;
    margin: 0 auto;    
    /*box-shadow: 0 0 15px 5px #ebe2d9, 0 0 15px 10px #2f1aec, 0 0 25px 20px #0e003f; */
    border: 10px solid #d1cdcd;
    border-radius: 20px;
    background: rgb(187, 36, 61);
  }

  /* Container for animated GIFs to align them with the text centerline when used in <br> */
 .gifcontainer {
    width: 10%;      /* Makes the image fill its container's width */
    height: auto;     /* Maintains the aspect ratio */
    max-width: 90px; /* Optional: Prevents it from getting too large on big screens */
    /*display: block;   /* Optional: Helps with centering if needed */
    margin: 0 auto;   /* Optional: Centers the image within its parent container */
    vertical-align: middle;
  }

  /* Left-justified Column used in <div> */
  .ljcolumn {
    margin: 0 auto;
    width: 150%;
    height: auto;
  

  }

  .divspacer{
    height: 10px;
  }

  /* Standard image container */
  .imagecontainer {
    display: block;
    margin: 0 auto;
    max-width: 600px;
    padding: 0px 0px;
    background: rgb(187, 36, 61);
    border: 10px solid #d1cdcd;
    border-radius: 20px;
  }

  /* Add corner radii to the image */
  .imagecontainer img {
    border-radius: 8px;
  }

  .imagecontainer p, .imagecontainer a {
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .imagecontainer img, .imagecontainer p, .imagecontainer a{
    display: block;
    margin: auto;
    max-width: 100%;
    text-align: center;
  }

  /* Standard image container with shadows and hover */
.imagecontainer_t2{
  display: block;
  margin: none;
  max-width: 200px;
  padding: 7px 7px;
  background-color: #e6dede80;
  border-radius: 17px;
  box-shadow: 0 0 7px 5px #181717;
  background-image: url("img/nav_bg.png");
}

.imagecontainer_t2 img{
  border-radius: 13px;
  box-shadow: 0 0 1px 2px #001013;
}

.imagecontainer_t2 img:hover{
  box-shadow: 0 0 3px 2px #04f110;
}

.imagecontainer_t2 p, .imagecontainer_t2 a{
  padding-top: 5px;
}


.imagecontainer_t2 img, .imagecontainer_t2 p, .imagecontainer_t2 a{
  display: block;
  margin: auto;
  max-width: 100%;
  text-align: center;
}


  /* Container used on the 404 page and specific to that page */
  .container404{
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
  /*height: 100vh;           /* Ensures the container takes up the full viewport height */
  /*width: 100vw;            /* Ensures the container takes up the full viewport width */

  }
  .centered-element {
  font-family: "Impress BT";  
  color: #e4e4e4;
  font-size:40px;
}

  /* Header Properties */
  .header {
  background: black;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  background-image: url("images/SonicAdv1Header.png"); 
  background-size:cover;
  box-shadow: 0 0 5px 1px #042024 inset;
  border-radius: 20px 20px 0 0;

  }

   /*If you want to use a smaller title or normal text, add .header p or .header h4 or whatever to the list*/
.header h2, .header h3, .header h1 {
  font-family: "Verdana","Arial", sans-serif;
  font-weight: bold;
  color: white;
  text-align: center;
  margin: 18% auto; /*approx centered*/
  opacity: 0.999999;
}

a:link {
  color: #e9e8e2;
}

a:visited {
  color: #f5f3e8;
}

a:hover {
  color: #EF2200;
}

a:active {
  color: #7c0000;
}

/* Define the background colour behind all the links */
.links {
  background: #042024;
  padding: 12px;
  box-shadow: 0 0 5px 1px #042024 inset;
  }
  
 /* Define the properties for the <a> HTML tag in the links section */ 
.links a {
  font-family: "Impress BT";  
  color: #e4e4e4;
  padding: 3px;
  margin-left: 5px;
  margin-right:5px;
  text-decoration: none;
  font-size:30px; /* Font size in the header */
  }
 
  /* Define the colour of the links when the mouse cursor hovers */
 .links a:hover {
  color: #ffee95;
  text-shadow: 0 0 5px #ef2c00;
  }

  /* Main body properties */
.main {
  padding: 15px;
  margin: 0 auto;
  background: #021c63; /* Background colour */
  box-shadow: 0 0 5px 1px #042024 inset;   /* Inner Shadow colour and property */
  }
 
  /* Main body <p> tag properties */
.main p {
    font-family: "Impress BT";
    font-size: 20px;
  margin-bottom: 35px;
  }

  /* Main Body <h1> tag properties */
.main h1 {
  margin: 5px auto 25px auto;
  font-family: "Impress BT";
  font-size: 40px;
  }

  /* Main Body <ul> tag properties */
.main ul{
    font-family: "Impress BT";
    font-size: 20px;
}
  
/*Prevent overflow of large images in main text areas.*/
.main img {
  max-width: 100%;
  height: auto;
  }
 
 /* Footer Properties */ 
.footer {
  background: #042024;
  padding: 20px;
  padding-top:5px;
  padding-bottom:5px;
  font-size:10px;
  box-shadow: 0 0 5px 1px #042024 inset;
  border-radius: 0 0 20px 20px;
  }
  
  

  
  /* Image 2-wide display */
.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}

.column h1, .column h2, .column h3 {
  margin: 0 5% 15px 5%;
}

/* Stamp 6-wide display */

.columnstamp {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 5px;
}

.projectbox {
  border: 3px dashed #ffd500;
  background-color: #00000080;
  max-width: 80%;
  height: auto;
  margin: 0 auto;
  padding: 5px;
  border-radius: 15px;
  box-shadow: 0 0 5px 5px #083d48;
}
.projectbox p{
  margin: 5px 10px 5px 10px;
}

.imgcentered{
  display: block;
  margin: auto;
  max-width: 100%;
}

.contentnav{
  display: block;
  margin: auto;
  max-width: 200px;
  padding: 5px 10px;
  background-color: #00000080;
  border-radius: 10px;
  box-shadow: 0 0 3px 5px #083d48;
}

.contentnav img{
  border-radius: 10px;
}

.contentnav p, .contentnav a{
  padding-top: 5px;
}


.contentnav img, .contentnav p, .contentnav a{
  display: block;
  margin: auto;
  max-width: 100%;
  text-align: center;
}

.blogentry h1{
	font-size: 22px;
	margin: 15px 0 1% 2%;
}

.blogentry h4{
	font-size: 14px;
	margin: 0 0 0 4%;
	color:#77B900;
	font-style:italic;
}

.blogentry p{
	margin: 10px 5% 0 5%;
}

.dividerimg{
	margin: 30px auto 5px auto;
	max-width: 100%;
	display: flex;
}

.bottombutton{
  display: block;
  margin: 15px 0 0 auto;
  width: 100px;
  height: 30px;
  background-color: #ED5200;
  text-decoration: underline;
  transition-duration: 0.2s;
  border: 2px solid #EF2200;
  border-radius: 5px;
  box-shadow: 0 0 1px 5px #083d48;
}  

.bottombutton:hover {
  border: 2px solid #B11900;
  background-color: #EF2200;
  color: #ffd500;
}  

.returnbtn {
  font-size: 13px;
  padding: 0;
  margin: 0;
} 

.imginfotext {
  font-size: 13px;
  padding: 0;
  text-align: center;
}  


/*For narrow screens*/
@media(max-width: 790px) {
  .wrapper {
    width: 95%;
    }
  .header h1, .header h2, .header h3 { /*Vertical centering gets wonky when the box is variable width*/
    margin: 20% 5% auto;
    }
  .contentnav {
    max-width: 150px;
    } 
  }  

/*Mobile compatibility*/
@media(orientation: portrait) {
  .wrapper {
    width: 95%;}
  .header {
    height:230px;
    }
  .header h1, .header h2, .header h3 {
    margin: 20% 3% auto;
    }
  .contentnav {
    width: 75px;
    }  
  }