/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
strong 
{ 
  font-weight: bold; 
}















/*font

  Heading and Logo: Super Boys Font by All Super Font
    Link: https://www.fontspace.com/super-boys-font-f100951
  
    Subheading: Montserrat

    Body: Tahoma
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat|Tahoma');

@font-face 
{
  font-family: walkyourstreetsfont;
  src: url(super-boys-font/SuperBoys-vmW67.ttf);
}

/*General*/
html 
{
  height: 100%;
  width: 100%;
  background-color: #fce0ce;
  color: #272b5d;
}

body 
{

    /* Add a background color or image */
    /*background-color: white;
    background-image: url('');*/

    /* Customize the font, size, and color for text*/
    font-family: 'Tahoma';
    font-weight: 400;


    /* Adjust the padding and margins */
    margin: 0;
    padding: 0;
}

.content
{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.content div, .content img, .content h1, .content h2, .content ul, .content ol
{
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
}
.content p
{
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
}


/*
  Style Text: Add style rules for any headings (h1-6),
  paragraphs and links
*/

h1
{
  font-family: 'walkyourstreetsfont';
  font-weight: 700;
  font-size: 32px; 
}

h2
{
  font-family: 'Montserrat';
  font-weight: bold;
  text-align: center;
  font-size: 24px;
}

p 
{
  font-family: Tahoma;
  font-size: 16px;
}

/*Link*/
a:link
{
  color: #771d47;
}
a:visited
{
  color: #176282;
}
a:hover
{
  color: #045d0e
}
a:active
{
  color:#6f0b0b
}



/*logo for page*/

/*
  Style Buttons: Add style rules for any headings (h1-6),
  paragraphs and links
*/
button 
{
  background-color:  #AF9CB8;
  border: none;
  color: black;
  font-size: 16px;
  text-align: center;
  padding: 15px 32px;
  cursor: pointer;
}

.banner
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ae9db8;
  height: 100px;
  margin-bottom: 20px;

  top:0;
  position:fixed;
  width: 100%;
}

.logo
{  
  display: flex;
  align-items: center; /* Aligns image and text vertically */
  padding-left: 20px;
  gap: 10px; /* Adds space between the image and text */
  width: 100%
}

.navbar
{
  display: flex;
  gap: 20px;
  list-style-type: none;
  justify-content: flex-end; /* Aligns items to the right */
  padding-right: 20px; /* Optional: Add space from the right edge */
  width: 100%;
}
.navbar li {
  display: inline-block;   /* Ensures the items remain inline */
}
.navbar a {
  text-decoration: none;   /* Removes underline from links */
  color: #272b5d;          /* Sets the color for the links */
}



/* Parallax Section */
.parallax 
{
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('img/3005676.jpg'); /* Path to your image */
  height: 100vh; /* Set the height of the parallax section */
  background-attachment: fixed; /* This creates the parallax effect */
  background-position: center; /* Keeps the image centered */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-size: cover; /* Makes sure the image covers the entire section */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* Change text color to make it readable on the image */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Optional: adds a shadow to the text for better readability */
}


.Site_Guide
{
  width: 800px;
  text-align: left;
}


/* Container for the 2x2 grid */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  grid-template-rows: auto auto; /* 2 rows */
  gap: 20px; /* Space between sections */
}

/* Styling for each section */
.section {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* Additional styling to fit your theme */
.content {
  margin: 0 auto;
  padding: 20px;
  max-width: 1200px;
}