/*
    Cores
    #3574F2 - azul
    #51F24B - verde
    #F2E74B - amarelo
    #F24B4B - vermelho
    #0D0D0D - preto

    Fonts
    .mogra-regular {
  font-family: "Mogra", system-ui;
  font-weight: 400;
  font-style: normal;
}

    .barriecito-regular {
  font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
}

    .knewave-regular {
  font-family: "Knewave", system-ui;
  font-weight: 400;
  font-style: normal;

  .gochi-hand-regular {
  font-family: "Gochi Hand", cursive;
  font-weight: 400;
  font-style: normal;
}

}


*/

:root{
  --blueColor: #3574F2;
  --greenColor: #51F24B;
  --yellowColor: #F2E74B;
  --redColor: #F24B4B;
}

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

h1{
  font-family: 'Knewave', system-ui;
  color: var(--blueColor);
  text-shadow: 4px 4px 6px #b4b4b4;
  font-weight: 300;
  font-size: max(20px, 2.6vw);
  text-align: center;
}

h2{
  font-family: 'Knewave', system-ui;
  text-shadow: 4px 4px 6px #464646;
  font-weight: 700;
  font-size: max(20px, 2.8vw);
}
header {
    max-width: 100%;
    height: 200px;
    background: linear-gradient(rgba(255, 255, 255,255),rgba(255,255,255,0));
    background-repeat: no-repeat;
    background-size: auto 180px;
    background-position: top center;
    position: relative;
}

header nav#nav-left div#logo{
  max-width: 240px;
  max-height: 240px;
  margin-left: 5rem;

}

header nav#nav-left div#logo img{
  max-width: 100%;
  max-height: 100%;
}

/*---- Menu Main ----*/

header nav#nav-left{
  width: 100%;
  height: 150px;

  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
}

header nav#nav-left ul.menu-main{
  margin-left: 5rem;
  display: flex;
  flex-flow: row wrap;
}

header nav#nav-left ul.menu-main li{
  list-style: none;     /* tira as bolinhas */
  margin-right: 2rem;
}

header nav#nav-left ul.menu-main li a{
  text-decoration: none;  /* tira o sublinhado */
  font-family: 'Gochi Hand', cursive;
  color: #000000;
  font-size: 180%;
  text-shadow: 4px 6px 10px #7a7a7a;
  padding-bottom: 10px;   /* espaçamento com a barrinha de baixo */
  transition: .3s ease-in-out;

}

header nav#nav-left ul.menu-main li a:hover{ /* hover é o que vai ser feito quando passar o mouse */
  opacity: .6;
  color: var(--blueColor);
  border-bottom: 1px solid var(--blueColor);
  color: var(-blueColor);
}

body{
    max-width: 100%;
    background: url('../Images/BodyTopG.png');
    background-repeat: repeat-y;
    background-size: auto;
    background-position: top center, center;
}