body {
    margin: 0;
      padding: 0;
      background-image: url('Imagens/OP_fundo.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      height: 100vh;
    }
    
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

  body.fadeout {
  opacity: 0;

}

body.fadein {
  opacity: 1;

}
 body.fadein .menu a {

  animation: anim 0.6s forwards;

}
 @keyframes anim {

  from {

    opacity: 0;
    transform: translateY(15px);

   }
  to { 
    opacity: 1;
    transform: translateY(0);

   }

 }
  
.menu li:nth-child(1) a { animation-delay: 0.2s; }

.menu li:nth-child(2) a { animation-delay: 0.4s; }

.menu li:nth-child(3) a { animation-delay: 0.6s; }

.menu li:nth-child(4) a { animation-delay: 0.8s; }

.menu li:nth-child(5) a { animation-delay: 1s; }
  

h1 {
    font-family: "Pixelify Sans", sans-serif;
    text-align: center;
    color:rgb(255, 255, 255);
    font-size:42px;
    padding: 15px 15px 15px 15px;
  
}

h2 {
  color: antiquewhite;  
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

p {
    font-family: "Pixelify Sans", sans-serif;
    color: var(--cor);
    margin-bottom: 15px;
    padding-bottom: 15px;
}

a {
    text-decoration: none;
    color:antiquewhite;
}

/* separação entre gerais para classes e ids */

.topPage { 
    text-align: center;
    margin: -8px;
    background-color: black;
    padding: 15px;
    padding-bottom: 35px;
    padding-top: 30px;
    background-image: url(Imagens/Cabeçalhos.jpg);
      background-position: center;
      background-repeat: no-repeat;

    
}


.pixelify-sans {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

 #Gold {
    font-family: "Pixelify Sans", sans-serif;
    background-image: url(Imagens/GoldBackGround.webp);
    width: 400px;
    float: right;
    margin-top: 16px;
    padding: 6px 6px 6px 6px;
    border: 4px solid gold;
    border-radius: 5px;
    text-align: center;
  }

.menu {
    list-style: none;
    margin: -8px;
    padding: 2px;
    padding-bottom: 10px;
    background-color: #1e1f22;
    display: flex;
    justify-content: center;
    border: #1e1f22 solid;
    border-radius: 10px;

   
    }

    .menu li {
    font-family: "Pixelify Sans", sans-serif;
    margin: -8px;
    margin-top: 10px;
    padding-bottom: 9px;
    padding-right: 55px;
    background-color: #1e1f22;

    }
    .menu li img {
        display: none;
     }

    .menu li a {
        display: inline-block;
      transition: all 4s cubic-bezier(0.075, 0.82, 0.165, 1);
    }

     .menu li a:hover {
  
      text-decoration: underline;
      transform: scale(1.3);
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 10px;
      padding-bottom: 10px;

    }
    .menu a {

      transform: translateY(15px);
      opacity: 0;
    }

    .menu a:hover { 
        color: rgb(255, 164, 46);
    
    }

.nomes ol {

    padding: 0;
    text-align: center;
}

    .nomes ol li{

    
        padding-left: 40px;

        padding-top: 10px;
        margin-top: 50px;

        display: inline-block;
        background-color: white;
        border: 5px solid white;
        border-radius: 10px;
        color: black;
        padding-right: 40px;
        margin-left: 30px;

        transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);


    }
     li{
     padding-right: 30px;
    }

    .nomes ol li:hover{

        transform: scale(1.2);

        padding-left: 30px;
        padding-right: 30px;
        background-color: black;
        border: solid black;
        border-radius: 10px;
        color: white;
        border-radius: 10px;
        cursor: pointer;
       /* opacity: 1; */
    }
 
    .nomes ol li {
       margin-left: 30px;
       /* opacity: 1; */
     font-size: 35px;
     top: 25%;
     left: 50%;
     flex-direction: column;
     
     border-radius: 10px;
     font-family: Arial, Helvetica, sans-serif;
     text-decoration: none;
     text-align: center;
 }

 #P {

    text-align: justify;
    color: gold;
    font-family: Arial, Helvetica, sans-serif;

    padding-left: 40%;
    padding-right: 40%;
    padding-bottom: 0px;
      padding-top: 0px;
    border: #1e1f22 solid;
    margin-left: -8px;
    margin-right: -8px;
    border-radius: 10px;
    background-color: #27282c;

 }

 .mestres  {
   
     color: white;
     font-family: "Pixelify Sans", sans-serif; 
     font-size: 15px;
     padding-top: 15px;
     padding-bottom: 10px;
     padding-right: 15px;
     background-color: rgb(71, 27, 27);
     border-radius: 10px;  
     cursor: pointer;
     user-select: none;
     display: flex;
 }

 .comosetornarmestre a {

    display: inline-block;  
    color: #041a5a;
    text-decoration: underline;
    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);  
 }

 :root {

  --cor: #fdf6ff;
  --fonte:arial;
  --cor2: black;
   --cor3: blue;
   --fonte2: Pixelify-sans, sans-serif;
 }


 .comosetornarmestre a:hover {
    font-family: var(--fonte);
    color: var(--cor);
    transform: scale(1.3) translateX(100px);
    padding-top: 20px;
    padding-bottom: 20px;
 }

 .gif img {
    position: fixed;
    bottom: 0;
    right: 0;
    transition: all 2s ease;

 }
 
 
  section {
   
    margin-bottom: 90px;
   }

  .seta{
     display: inline-block;
     transition: all 1.4s ease;
     color: black;
  }

  .seta.girada{

     transform: rotate(180deg);
     color: white;
  }

  .Texto {
    max-height: 0;
    overflow: hidden;
    transition: all 2s linear;
    background-color: #f9f9f9;
    margin-top: 10px;
    padding: 0px 10px;
    border-radius: 10px;
  }

  .Texto.ativado {
    max-height: 300px;
    padding: 10px;
    border: 2px solid rgb(58, 51, 42);
    
  }

  #espada {
   position: absolute;
    pointer-events: none;
  }

  .aviso {

    font-family: var(--fonte);
    color: var(--cor2);
  }

 #WhatIsGurps {
  background-color: ghostwhite;
  width: 600px;
  float: right;
  padding: 10px 10px 10px 10px;
  margin: 5px 5px 5px 5px;
  border: 3px gray solid;
  border-radius: 5px;
  text-align: center;
  color: var(--cor2);
  clear: both;
  box-shadow: 0 0 20px black;
}


#WhatIsGurps p {
  color: var(--cor2);
}
#WhatIsGurps  h2 {
  color: black;
}
.abaixo {
  margin-top: 50px;
}
 
.comosetornarmestre p {

  color: black;
}

.ficha {
  text-align: center;
 color: white;
 float: left;
 width: 270px;
 border: 2px solid white;
 border-radius: 5px;
 padding: 5px;
 background-color: gray;
 font-family: "Pixelify Sans", sans-serif;
 margin: 5px 5px 5px 5px;
 margin-top: 69px;
 margin-right: 14px;
 }

 .ficha p {
  color: black;
  font-size: 20px;
  font-style: oblique;

 }
.tableFicha {
  display: flex;
  justify-content: center; 
  align-items: center;   
}


#GMandPlayers {
  clear: both;
  height: 0;
}

#GMandPlayers h2 {
  text-align: center;
}

#portrait {
  margin: 15px 15px 15px 15px;
  width: 470px;
  box-shadow: 0 0 20px black;
    border-radius: 8px;
}
#centeronediv {

    display: flex;
    padding: 20px;
    justify-content: space-evenly;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;

}
#Back {

  margin-bottom: 100px;
  margin-top: 80px;
}
.menu a.active {
      color: gray;
      pointer-events: none;
      cursor: default;

    }
#Darkmode {
  margin-top: 12px;
    cursor: pointer;
   top: 0;
  background-color: white;
    opacity: 0.5;
    border-radius: 8px;
    float: right;
    margin-right: 10px;

}

p,
h2,
iframe {

  opacity: 1;
  transform: scale(1);
  transition: opacity 1s ease, transform 1s ease; 

}

body.galeria section:not(.menu) p,
body.galeria section:not(.menu) h2,
body.galeria section:not(.menu) iframe {

  opacity: 0;
  pointer-events: none;
  transform: scale(0.95);

}

body.galeria #WhatIsGurps{
  opacity: 0;
}

body.galeria #guts {
    width: 500px;
    height: auto;
    margin-left: 330px;
}

body.galeria #firstImg {
    margin-left: 400px;
    height: 700px;
    width: auto;
}

body.galeria #firstGIF {
  margin-left: 900px;
  display: block;
  float: left;
  align-content: space-between;
  align-items: baseline;
}

  
#Darkmm{

    color: white;
    transition: all  0.5s ease;
    margin-left: 35px;
    margin-right: 80px;
  }
#Darkmm.darkmode{
      transition: all 0.5 ease;
      color: black;



  }
#Darkmm.darkmode p {

  color: black;
  transition: all 0.5 ease ;

}
#Backtopage {
 
   margin: 30px;
   transition: all 1s linear;
   display: inline-block; 
   
}
#Backtopage:hover {
   
  opacity: 0.5;
  transform: scale(0.8);

}
.nomes li p {

  opacity: 0;
  margin: 0;
  padding: 0;
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
}
.nomes li:hover p  {
  padding: 15px;
  visibility: visible;
  opacity: 1;
  max-height: 60px;

}
.nomes li:hover p a {

 text-decoration: underline;

}
.nomes li p img {
 
  animation: rotating 1.3s linear  0s infinite alternate;
  margin-right: 10px;

}
@keyframes rotating {
  from{ transform: rotate(15deg);}
  to { transform: rotate(-15deg);}
  
}


 @media (max-width:900px){

  ul.menu{ margin-left:40px;}
  ul.menu{ padding-left: 30px}
 }
 
 @media (max-width:920px){

  .gif{ opacity: 0;}
 } 
 
 
 @media (max-width:480px){

  ul.menu{ width: calc(100%/2);}
 }


  .otherSystems {
  transition: all 1.5s ease;
  text-align: center;
  max-width: 800px;
  margin: 40px auto;
  background-color: gray;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 20px black;
}
.otherSystems:hover{

  transform: scale(1.1);
  padding: 20px;
  box-shadow: 20px 20px 20px;
}
/*
#Ordem_Paranormal:hover,
#Vampiro_A_Mascara:hover,
#D_and_D:hover {

   animation: updown 1s linear  0s infinite alternate;

}
   */
   .otherSystems:hover #Ordem_Paranormal,
.otherSystems:hover #Vampiro_A_Mascara,
.otherSystems:hover #D_and_D{

     animation: updown 1s linear  0s infinite alternate;

}

@keyframes updown {

  from{transform: translateY(0);}
  to{ transform: translateY(-10px);}
  
}

#D_and_D {
  max-width:244px;
  max-height:218px;
  border-radius: 4px;
  box-shadow: 0 0 10px black;
    transition: transform 0.5s ease;

}
#DnD {
  background-image: url(Imagens/imagem\ de\ fundo.png);
}

#Ordem_Paranormal {
  max-width:320px;
  max-height: 180px;
  border-radius: 4px;
  box-shadow: 0 0 10px black;
  transition: transform 0.5s ease;
}
#OPD {
  background-image: url(Imagens/OP_fundo.jpg);
}

#Vampiro_A_Mascara {
  max-width:272px;
  max-height: 279px;
  border-radius: 4px;
  box-shadow: 0 0 10px black;
    transition: transform 0.5s ease;

}
#VAMP {
  background-image: url(Imagens/Vampire-The-Masquerade-back.jpg);
  margin-bottom: 40px;
}
.clearleft{
  clear: left;
}

#firstImg {
  float: left;
  width: 336px;
  height: 600xp;
  box-shadow: 0 0 10px black;
  margin: 15px 15px 15px 15px;
  margin-left: 20px;
  margin-top: 35px;
  border-radius: 4px;
    transition: all 1s ease;

}
#firstGIF{
  display: flex;
  justify-content: center; 
  align-items: center;
  width: 100vh;
    transition: all 1s ease;

  max-width: 577px;
  max-height: 277px;

  box-shadow: 0 0 10px black;
  border-radius: 4px;
}

#guts{
  display: flex;
  justify-content: center; 
  align-items: center;
  width: 100vh;
  transition: all 1s ease;
  width: 216px;
  height: 216px;
  border-radius: 8px;
  box-shadow: 0 0 20px black;
}
img#medievalKitty {
    height: 54px;
      width: 52 px;
}
.Autorais {

  font-family: Arial, Helvetica, sans-serif;
   
  text-align: center;
}
.AAutores{
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

#pgfM {
  margin-top: 30px;
  text-align: center;
}
.FOoter{

  display: block;
  position: fixed;
  background-color: #1e1f22;
  padding-top: 50px;
  width: 100%;
  padding: 20px 0;
  bottom: 0;
}
.suuui {
  cursor: default;
}