/*
Selector    Declaration
    h1  {color:   blue;   font-size:12px;}
        {property:value ; property:value}
*/


html {
  scroll-behavior: smooth;
}

.anchor-link {
  /* https://www.youtube.com/watch?v=5g597H594Cc */
  scroll-margin: 100px;
 }
 
 body, h1, h2, h3, h4, h5, h6  {
  font-family: Roboto, sans-serif;
  margin: 20px;
}

/* párrafos - no cambiar */
p {
  margin: 40px;
  font-size: 20px;
}

label {
  margin: 0px;
}

body {
  position: relative;
  margin: 0;
}

.section {
  height: 100vh;
  background: #dedede;
  margin-bottom: 20px;
}

.scroll-container {
  /* https://levelup.gitconnected.com/how-to-implement-scroll-to-top-with-only-css-ae27cb9d4678 */
  position: absolute;
  top: 0;
  right:0;
  height: 100%;
}

/* to hide the button when page first loaded */
.scroll-container:before {
  content: '';
  display: block;
  height: 100vh;
  pointer-events: none;
}

/* fixed to right bottom of page */
.scroll-container a {
  position: sticky;
  top: 88vh;
  cursor: pointer;
  font-size: 20px;
}

.material-icons {
    font-size:32px
}

.encabezado{
  /* fijar scroll */
  position: -webkit-sticky;  /* safari */
  position: sticky;
  top: 0;
}

header.encabezado .grid-container {
  display: grid;
  background-color: #2196F3;
  gap: 2px;
  padding: 2px;
}

header.encabezado .grid-item {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
}

header.encabezado .item1 {
  grid-column: 1;
  grid-row: 1;
}

header.encabezado .item2 {
  grid-column: 2;
  grid-row: 1;
}


header.encabezado .item3 {
  grid-column: 3 / span 5;
  grid-row: 1;
}

.trail3D_logo {
    width: 80px; 
    height: 40px; 
}

ul.top_menu_nav {
    list-style-type: none; /* remove bullets */
    margin: 0;   /* remove browser default settings */
    padding: 0;  /* remove browser default settings */
    overflow: hidden;
    background-color: #f3f3f3;
    border: 1x solid #e7e7e7;
    width: 100%;
}

ul.top_menu_nav li {
    float: left;
    border-right: 1px solid #bbb;
}

ul.top_menu_nav li:last-child{
    border-right: none;
}

ul.top_menu_nav li a{
    display: block; /* Display links as block elements */
    color: #000;
    text-align: center;
    padding: 8px 16px;
    text-decoration: none;
}

ul.top_menu_nav li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.top_menu_nav li a:hover {
   background-color: #9f9c9c;
}

ul.top_menu_nav li a:hover:not {
    background-color: #555;
    color: white;
 }

 h1 {
  text-align: center;
}

.big_trail3D_logo {
  width: 200px;
  height: 100px;
}

.website_content{
  margin-left: 10%;
  margin-right: 10%;
}