/* index.css */

	/* - - - - place all variables here - - - - */
:root
{

	
	--body-color: rgba(255, 255, 255,1);
	--background-color: rgba(255, 255, 255, 1); /* rgba(245, 245, 244,1); */
	--primary-color: rgba(154, 153, 147, 1);
	--secondary-color: rgba(245, 245, 244, 2); /* rgba(210, 210, 208, 1); */
	--accent-color: rgba(110, 110, 104, 1);
	--text-color: rgba(26, 26, 25, 1);
  --border-color: rgba(0, 0, 0, 1);
  --link-hover-top: rgba(255, 255, 255,1);
  --link-hover-bottom: rgba(220, 237, 250, 1);
  --box-shadow: rgba(0,0,0, 0.2);
  --box-shadow-darker: rgba(0, 0, 0, 0.5);
  --hover-color: rgba(0, 0, 255, 0.8);

  /* Google Fonts- font-family: 'Comic Neue', cursive; */
  --h1font-family: 'Comic Neue', cursive;
}



/* - - - - FONT STACK - - - - */

p { font-family: Verdana, Geneva, sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 1.5rem; }

h1 { font-family: var(--h1font-family), Cursive, sans-serif; font-size: 2.5rem; font-style: normal; font-variant: normal; font-weight: 900; line-height: 2.75rem; }
h2 { font-family: var(--h1font-family), Cursive, sans-serif; font-size: 2rem; font-style: normal; font-variant: normal; font-weight: 700; line-height: 2.25rem; }
h3 { font-family: var(--h1font-family), Cursive, sans-serif; font-size: 1.5rem; font-style: normal; font-variant: normal; font-weight: 700; line-height: 1.75rem; }
h4 { font-family: var(--h1font-family), Cursive, sans-serif; font-size: 1rem; font-style: normal; font-variant: normal; font-weight: 700; line-height: 1.25rem; }

blockquote { font-family: Verdana, Geneva, sans-serif; font-size: 1.25rem; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; }
pre { font-family: Verdana, Geneva, sans-serif; font-size: .75rem; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5667px; }

/* - - - - end font stack - - - - */


/* - - - - RESET - - - - */

*,
*::before,
*::after
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img
{
  display: block;
  width: 100%;
  height: auto;

}

/* - - end reset - - */


/* - - Utility Classes - - */

.center
{
  text-align: center;
}

ul
{
  list-style: none;
}

.mar-bottom-10
{
  margin-bottom: 10px;
}

.mar-bottom-30
{
  margin-bottom: 30px;
}

.img-border-5-10
{
  border: 5px solid var(--border-color);
  border-radius: 10px;
}

.hrsimple
{
  height: 1px;
  width: 99%;
  margin: 15px auto;
  background-color: var(--text-color);
  border: 2px solid var(--accent-color);
  border-radius: 3px;
  box-shadow: 0px 0px 3px 3px var(--box-shadow);
}

/* - - - - end utility classes - - - - */


/* - - - - Mobile Screen - - - - */

#container
{
    background-color: var(--background-color);
    width: 100%;
    max-width: 1440px;
    margin: auto;
    padding-top: 1px;
    padding-bottom: 50px;
}

header, footer
{
  display: flex;
  width: 90%;
  height: 100px;
  margin: 20px auto;
  padding-left: 20px;
  justify-content: left;
  align-items: center;
	/* border-radius: 10px; */
	border: 1px solid var(--border-color);
  background-color: var(--secondary-color);
	/* box-shadow: 5px 5px 5px 0px var(--box-shadow); */
}

header h1
{
  font-size: 1.5rem;
}

footer
{
  justify-content: center;
  margin-bottom: 20px;
  padding: 10px;
  text-align: center;
}

.main
{
  background-color: var(--background-color);
  width: 90%;
  margin: 20px auto;
}

.main1
{
  background-color: var(--background-color);
}

article h1, h3
{
  margin-bottom: 10px;
}




article p
{
  margin-bottom: 10px;
}

article a
{
  text-align: left;
}

a
{
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: var(--text-color);
}

h2 a
{
  padding: 0px;
  font-family: var(--h1font-family);
}

li a
{
  font-size: 1.25rem;
}

a:hover
{
	color: var(--hover-color);
	background-image: linear-gradient(
	  to bottom,
	  var(--link-hover-top),
	  var(--link-hover-bottom));
	text-decoration: none;
	border-radius: 10px;
}

.menu
{
	background-color: var(--secondary-color);
  position: absolute;
  top: 50px;
  right: 40px;
  height: 40px;
  width: 40px;
  border-radius: 10px;
}

button
{
  color: var(--text-color);
  background-color: var(--secondary-color);
  border: none;
  height: 100%;
  width: 100%;
	font-size: 30px;
}

button:hover
{
  cursor: pointer;
}

.dropdown-content
{
	display: none;
	position: absolute;
	top: 40px;
  right: 0px;
	background-color: var(--secondary-color);
  min-width: 125px;
	/* border-radius: 10px; */
	border: 1px solid var(--border-color);
	box-sizing: border-box;
	padding: 5px 10px;
	/* box-shadow: 5px 5px 5px 0px var(--box-shadow); */
	z-index: 1;
}

.dropdown-content a
{
	color: var(--text-color);
	padding: 10px 5px;
	background-color: var(--secondary-color);
	text-decoration: none;
	display: block;
	box-sizing: border-box;
}

.dropdown-content a:hover
{
	color: var(--hover-color);
	background-image: linear-gradient(
		to bottom,
	  var(--link-hover-top),
	  var(--link-hover-bottom));
	border-radius: 10px;
}

.menu:hover .dropdown-content
{
  	display: block;
}

.menu:hover .dropbtn
{
  background-color: var(--secondary-color);
  border-radius: 10px;
  cursor: pointer;
  border-top: 2px solid var(--accent-color);
  border-right: 2px solid var(--body-color);
  border-bottom: 2px solid var(--body-color);
  border-left: 2px solid var(--accent-color);

}

.notes
{
  margin-bottom: 1rem;
}

ul .here
{
	text-align: center;
	font-size: 1.35rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border-radius: 10px;
  background-image: linear-gradient(
	  to bottom,
	  var(--link-hover-top),
	  var(--link-hover-bottom));
  border: 1px solid var(--text-color);
  margin: 7px 0px;
}

/* - - - - end mobile screen - - - - */


/* - - - - Large Screen - - - - */


@media screen and (min-width:600px)
{
  
  header h1
  {
    font-size: 2.5rem;
  }
  
  .main
  {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 50px;
    width: 90%;
  }



  button, .menu
  {
    display: none;
  }
  
  .menu
  {
    display: none;
    position: relative;
    height: auto;
    top: 0px;
    left: 0px;
    width: 25%;
    display: block;
    border: none;
  }
  
  .dropdown-content
  {
    display: block;
    top: 0px;
    left: 0px;
    height: 100%;
    border: 1px solid var(--border-color);
  }
 
  .icon
  {
    display: block;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translatex(-50%);
    width: 90%;
  }
  .birdie
  {
	  display: block;
	  text-align: center;
	  position: absolute;
	  bottom: 10px;
    left: 50%;
    transform: translatex(-50%);
    width: 90%;
  }
	  
  
  header, footer
  {
    justify-content: center;
  }

  .main1
  {
    margin:0;
    width: 100%;
  }


}

/* - - - - end large screen - - - - */

/* - - - - THIS IS THE END - - - - */