/*base*/
@charset "utf-8";
body{
  background-image: url("/gplaypattern.png");
  color: black;
}
:root{
    --modular-scale: 1.2;
  }
/*layout*/
#topnav{
  top: 0;
  left: 0;
  right: 0;
  background-color: #36415F;
  z-index: 99;
  vertical-align: middle;
  position: fixed;
  height: 70px;
}
#menu-items{
  display: flex;
  /*margin: 0 8.35vw;*/
  width: 83.3vw;
  margin: auto;
  justify-content: space-between;
}
#logo {
  z-index: 2;
  height: 70px;
  width: 16.66vw;
  object-fit: contain;
}
#menu_buttons_full{
  /*grid-column:9/12;*/
  display: flex;
  justify-content: flex-end;
}
/*modules*/
#news_button{
  order: 1;
}
#about_button{
  order: 2;
}
#contact_button{
  order: 3;
}
.button{
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding: 0 10px;
}
.button, button {
  background-color: #F3B3A6;
  border: solid;
  border-color: #F29380;
  box-shadow: 5px 5px 5px 2px #C77969;
  cursor: pointer;
  text-decoration: none;
  margin: 0px 5px 0px 5px;
}
#topnav button {
  height: 65px;
}
#topnav .button {
  height: 60px;
  width: auto;
  white-space: nowrap;
  justify-content: center;
  line-height: 65px;
}
header > .buttons {
  margin-bottom: 1vw;
}
a:link, a:visited {
  text-decoration: none;
  color: black;
}
.dropbtn{
	height: 65px;
	font-size: 2.8vh;
}
.dropdown {
  float: right;
  right: 5vw;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    background-color: #f1f1f1;
    width: 100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align: center;
	  font-size: 2.8vh;
}
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    display: block;
    text-decoration: none;
    font-size: 2.8vh;
    background-color: #F3B3A6;
    border: solid;
    border-color: #F29380;
    cursor: pointer;
    text-decoration: none;
    margin: 0;
    /*font-family: acumin-pro, sans-serif;
    font-style: normal;
    font-weight: 400; */
}

/*typography modular scale 5:6 minor third*/
h1{
  font-size: calc(var(--modular-scale, 16px) * 2.488em);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: Georgia, serif;
  font-style: normal;
  font-weight: 400;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
h2 {
  font-size: calc(var(--modular-scale, 16px) * 2.074em);
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
h3 {
  font-size: calc(var(--modular-scale, 16px) * 1.728em);
  font-family: fira-sans, sans-serif;
  font-weight: 600;
  font-style: normal;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
li, .form_text{
  text-align: left;
  font-size: calc(var(--modular-scale, 16px) * 1.44em);
  font-family: fira-sans, sans-serif;
  font-weight: 500;
  font-style: normal;
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
.button {
  font-family: fira-sans, sans-serif;
  font-weight: 300;
  font-style: normal;
  /*font-size: 2.8vh;*/
  font-size: calc(var(--modular-scale, 16px) * 1.2em);
}

/*state*/
.show {
 display:block;
}

.dropbtn:hover, .dropbtn:focus, .button:hover, .button:focus {
    background-color: #EC7C79;
}
.dropdown-content a:hover {
	background-color: #EC7C79;
}
/*media queries*/
@media screen and (max-width: 799px){
  :root{
        --modular-scale:1.4;
    }
	header .button{
		display:block;
	}
	.full{
	  display:none;
	}
	.mobile{
    display: block;
	}
  #menu-items{
    display: flex;
    margin: 0 8.33vw;
    justify-content: center;
  }
  #menu-items > * {
    margin: 0 5vw;
  }
  #topnav img {
    cover: fill;
    width: auto;
  }
}

@media screen and (max-width: 450px){
  :root{
        --modular-scale:0.55;
    }
}
@media screen and (min-width:800px){
	.full{
	  display:block;
	}
	.mobile{
	  display:none;
	}
}