@import url("/Fonts/BigBlueTermPlusNerdFont-Regular.ttf");

@font-face {
  font-family: BigBlue;
  src: url("/Fonts/BigBlueTermPlusNerdFont-Regular.ttf");
}

/*Animations Section where i'll put some @keyframes aniimations*/
@keyframes blinkingAnim {
    from {
        opacity: 0;
    }
    50% {
        opacity: 100;}
    to {
        opacity: 0%;
    }

}
/*==============================================================================*/


/*Body and background CSS*/
body {
  display: flex; flex-direction: row; justify-content: space-around;
  background: #000000;
  padding: 10%;
  background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 75, 0, 1) 100%);
  height: 100vh;
}
/*==============================================================================*/



/*Titles CSS*/
h1, h2, h3{
  font-family: 'BigBlue', sans-serif;
  margin-bottom: 0px;
  height:auto;
  color: white;
  }

h3 {
  font-size: 14px;  font-weight: normal;
  }
/*==============================================================================*/



/*Common text CSS*/
a {
  font-family: 'BigBlue', sans-serif; font-size: 14px; text-decoration:none;
  color: white;
  }
  
b {
  font-family: 'BigBlue', sans-serif; font-size: 14px; text-decoration:none;  font-weight: normal;
  color: #00FF00;
  cursor: pointer;
  }
/*==============================================================================*/


/* BARRA DE NAVEGAÇAO */
#navigation {  
  background: #000000;
  border-style: solid;
  border-width: 1px;
  border-color: #0f0;
  display: flex;  flex-direction: row;  align-items: center;
  margin: 25px 0px 25px 0px;
}

/* ORGANIZACAO DAS COLUNAS NO SITE PRINCIPAL*/
#content, #map {
  display: flex; flex-direction: column;
}
#mainbar {
   background: #000000;
   height: auto;
   padding: 25px;
   border-style: solid;
   border-width: 1px;
   border-color: #0f0;
}
#content {
  width: 70%;
  }
#map {
  background: #000000;
  border-style: solid;
  border-width: 1px;
  border-color: #0f0;
  padding: 2%;
  }
#topImage {
    max-width: 18%;
    box-shadow: 0px 0px 5px 0px rgba(0,255,0,0.5);
    transition: ease 0.5s;
    border-style: solid;
    border-color: #00ff00;
    border-width: 1px;
}
/*==============================================================================*/


/*CSS para paginas a parte e IDs unicos*/
#card {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}
#errorPage {
  animation: blinkingAnim 1s linear infinite;
}
/*==============================================================================*/

/*Buttons with :hover animations*/
#button {
    font-weight: normal;
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%);
    padding: 15px;
    box-shadow: 0px 0px 3px 0px rgba(0,255,0,0);
    transition: ease 0.25s;
}
#button:hover {
    color: black;
    background: linear-gradient(90deg, rgba(2,226,0,1) 0%, rgba(153,255,0,1) 100%);
    box-shadow: 0px 0px 5px 0px rgba(0,255,0,1);
}
/*==============================================================================*/

/*CSS for the videos page*/
#videoContent {
  width: auto;
  }
#videosMainbar {
   display: flex;
   flex-direction: column;
   align-items: center;
   background: #000000;
   height: auto;
   padding: 25px;
   border-style: solid;
   border-width: 1px;
   border-color: #0f0;
}
iframe{
   border-style: solid;
   border-width: 1px;
   border-color: #0f0;
   justify-content: center;
   background: #000000;
}
  
  

/* MOBILE COMPATIBILITY */
@media only screen and (max-width: 900px) {
  #content { align-items: center; }
  #map { display: none; }
}
/*==============================================================================*/