/* basics */
body {
    background-image: url(https://miiaqa.neocities.org/16.png);
}

.container {
  max-width: 1000px;  
  margin: 20px auto;
  display: grid;
  grid-gap: 00px;
  grid-template-columns: 200px minmax(0, 1fr);
  font-family: monospace;
}

::selection {
background: #cc3030;
/* Change highlight text color */
color: #ffffff;
}

/*HEADER*/

header {
    border: black 0px solid;
    grid-row:  1 / 2;
    grid-column: 1 / 3;
   box-shadow: 0px 10px 41px -5px rgba(0, 0, 0, 1.00);
   background-color: #000000;

}


/*SIDEBAR*/

nav {
    border: black 2px solid;
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    height: max-content;
    background-color: #000000;
  box-shadow: 0px 10px 41px -5px rgba(0, 0, 0, 1.00);

}

/*MAIN CONTENT*/

main {
    border: black 0px solid;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    height: max-content;
    padding: 10px;
    background-color: #000000;
    color: #f4f4f4;
   box-shadow: 0px 10px 41px -5px rgba(0, 0, 0, 1.00);
}

.secondcon {
    display: flex;

}

.boxinfo {
    border: rgb(0, 0, 0) 2px solid;
    margin: 10px;
}


/*FOOTER*/

footer {
    border: black 2px solid;
    grid-row: 3 / 4;
    grid-column: 1 / 3;
    background-color: #000000;
    color: #f4f4f4;
    box-shadow: 0px 10px 41px -5px rgba(0, 0, 0, 1.00);
    
}

/*TEXT*/

h1 {
  text-align: center;
  color: #ff0000;
}

h2 {
  text-align: center;
  color: #2cc50a;
}

h3 {
  text-align: center;
  color: #2cc50a;
}

/*LINKS*/

ul {
    padding: 0%;
}

ul li::marker {
    content: none;
}

li a {
  display: block;
  color: rgb(255, 255, 255);
  padding: 8px 16px;
  text-decoration: none;
}
li a:hover{
    color: #ff0000;
}

 #text {
    color: #000000;
    animation: blinkingText 1.2s infinite;
  }

  @keyframes blinkingText {
    0% {
      color: #000000;
    }

    49% {
      color: #000000;
    }

    60% {
      color: white;
    }

    99% {
      color: white;
    }

    100% {
      color: #000000;
    }
  }

/*TEXT N IMAGE HOVER*/

/*Tooltip Follow Start*/
.contents {
  cursor: pointer;
  display: inline-block;
}

.contents:hover .contentstooltip {
    opacity: 1;
}

.contents h1 {
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 2px;
  color: black;
  font-size: 14px;
  text-align: right;
  font-family: serif;
}

.contentstooltip {
  opacity: 0;
  margin-top: -5px;
  margin-left: 32px;
  position: fixed;
  z-index: 1000;
  min-width: 210px;
  max-width: 300px;
  height: auto;
  font-size: 13px;
  line-height: 1.5em;
  text-align: left;
  padding: 0.5em;
  padding-bottom:0.2em;
  background: rgba(0,0,0,0.8);
  color: #fff;
  border-radius:5px;
  pointer-events: none; /* This prevents the box from appearing when hovered. */
  -webkit-transition: opacity .1s linear, top .1s ease-in-out;
  transition: opacity .1s linear, top .1s ease-in-out; 
}

.contentstooltip.arrow-left:after {
  content: " ";
  position: absolute;
  left: -10px;
  top: 5px;
  border-top: 10px solid transparent;
  border-right: 10px solid rgba(0,0,0,0.8);
  border-left: none;
  border-bottom: 10px solid transparent;
}

.contentstooltip h1 {text-align: left;}

.max {width: max-content;}
/*Tooltip Follow End*/



/*IMAGENES*/

.imgone:hover {
    transform: scale(1.1);
}

/*LINKS*/

main a,
main a:visited {
  color: #5d5e58;
  text-decoration: none;
}

main a:hover,
main a:focus {
  color: #c5c5c5;
}