@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,700;0,900;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Bakbak+One&display=swap');

:root {
  --margens_color_bkg: #000000;
 /* --margens_color_bkg: #6c6036;
 /* --pages_color_bkg: #82743f;*/
  --pages_color_bkg: #000000;
  /*--row_container_bkg_color: #82743f;*/
  /*--row_container_bkg_color: #1a1a1a;*/
  --row_container_bkg_color: #000000;
  --txt_color: #dedede;/*ffdb4d;ffcc00;*/
  --txtitalic_color: #ff0000;
  --lnk_unvisited: #00b3b3;
  --lnk_visited: #008080;
  --lnk_hover: #00f2f2;
  --lnk_active: #005d5d;
  /*--lnk_active: #008080;*/
}

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  /*padding: 0;*/
}

/* Hide scrollbar for Chrome, Safari and Opera, replaces |overflow: hidden;| but keeps the funcionality*/
.noschrome::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.noscrollie {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.realpage{
  /*display: flex;
  width: 90%;
  height: 100%;
  width: 960px;
  height: 1080px;
  margin:5%;
  flex-direction: column;
  background-color: blue;
  background-color: #red;
  /*display:block;*/
  display: flex;
  float:left;
  padding:0px;
  margin:5%;
 flex-direction: column;
}

.realpageinsideframe {
  width: 960px;
  height: 200px;
  flex-grow: 1;
  border: none;
  margin: 0;
  padding: 0;
}

model-viewer {
  width: 960px;
  height: 540px;
}

h1, .titleGiant {
  font-family: Titillium Web, Bakbak One, Play,Tahoma, Verdana,Arial, sans-serif;
  /*font-weight: bold;*/
  font-size: 42px;
  color: var(--txt_color);
  text-shadow: 2px 2px #000000;
}

h2, .titleNormal {
  font-family: Titillium Web, Bakbak One, Play,Tahoma, Verdana,Arial, sans-serif;
  /*font-weight: bold;*/
  font-size: 36px;
  color: var(--txt_color);
  text-shadow: 2px 2px #000000;
}

h3, .titleSub {
  font-family: Titillium Web, Bakbak One, Play,Tahoma, Verdana,Arial, sans-serif;
  /*font-weight: bold;*/
  font-size: 30px;
  color: var(--txt_color);
  text-shadow: 2px 2px #000000;
}


a, ul, li, p, .textNormal {
  font-family: Play, Tahoma, Verdana,Arial, sans-serif;
  font-weight: normal;
  font-size: 24px;
  color: var(--txt_color);
  text-shadow: 2px 2px #000000;
}

.textItalic {
  font-family: Play, Tahoma, Verdana,Arial, sans-serif;
  font-weight: normal;
  font-style: italic;
  font-size: 24px;
  color: var(--txtitalic_color);
}

/* unvisited link */
a:link {
  color: var(--lnk_unvisited);
  text-decoration: none;
}

/* visited link */
a:visited {
  color:  var(--lnk_visited);
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: var(--lnk_hover);
  text-decoration: none;
}

/* selected link */
a:active {
  color: var(--lnk_active);
  text-decoration: none;
}

.margens_color_bkg {
  background-color: var(--margens_color_bkg);

}

.pages_color_bkg {
  /*background-image: url("/body_960x610_black.png");*/
  background-repeat: repeat-y;
  background-color: var(--pages_color_bkg);
  
}

.row-container {
  display: table;
  empty-cells: show;
  border-collapse: collapse;
  width: 960px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--row_container_bkg_color);
  /*background-image: url("/body_960x610_black.png");*/
}

.banner {
  width: 960px;
  height: 120px;
  display: table-row;
  
  /*background-color doesn't work here*/
  /*background-color: var(--row_container_bkg_color);*/
  /*background-color: blue;*/
}

/*
.box {
  max-width: 960px;
  display: table-row;
  height: 100%;
  background-image: url("./body_960x610_black.png");
}

.div_box {
  width: 960px;
  height: 100%;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}
*/
.box iframe {
  width: 960px;
  height: 540px;
  border: none;
  margin: 0;
  padding: 0;
  display: block;
}

.footer {
  width: 960px;
  height: 60px;
  display: table-row;
  /*background-color doesn't work here*/
}

.divclean {
  list-style: none;
  empty-cells: show;
  /*display: table;
  
  border-collapse: collapse;*/
  width: 960px;
  height: 40px;
  margin-left: auto;
  margin-right: auto;
  background-color: red;
  /*background-color: var(--row_container_bkg_color);*/
}

/* Navigation Bar Settings */
nav {
  /* next two lines makes the nav bar sticks to the top of the page */
  /*position: sticky;*/
  /*top: 0;*/
  list-style: none;
  /* next three lines makes the nav bar sticks to the bottom of the page */
  position: fixed;
  bottom: 0;
  width: 960px;
  height: 40px;
  text-align: center;
  padding: 0;
  display: flex;

  align-items: center;
  /*
  list-style: none;
  text-align: center;
  list-style: none;
  justify-content: center;
  text-align: center;
  justify-content: center;
  */
  /*min-height: 8vh;*/
  background-color: teal;
  font-family: Titillium Web, Bakbak One, Play,Tahoma, Verdana,Arial, sans-serif;
  /*"Montserrat",*/
}

.heading {
  color: white;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  /* width: 30%; */
}

.nav-links li {
  list-style: none;
}

.nav-links ul {
  list-style: none;
  /* position: -webkit-sticky;
  position: sticky;
  top: 0;
  justify-content: center;*/
}

.nav-links a {
  color: white;
  text-decoration: none;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 24px;
  padding: 14px 16px;
}

.nav-links a:hover:not(.active) {
  background-color: lightseagreen;
}

.nav-links li a.active {
  background-color: #4caf50;
}