* {
  box-sizing: border-box;
  background-color: black;
  
  }

body {
  font-family: Arial, Helvetica, sans-serif;
  
}

.previa {
    max-width:100%;
    max-height:100%;
    display: block;
    margin: auto;
    border-color:black;
    border-style:double;
    border-radius: 10px;
   }
.previa:hover{
  border-color:white;
  transform: scale(1.05, 1.05);
}

.pal{
  background-color: #003366;
  display: block;
  text-align: center;
  margin: 8px;

}

.boton{
  background-color:  hsla(0, 0%, 0%, 0);
  filter: drop-shadow(7px 7px 4px #000);

}
.boton:hover{
  transform: scale(1.1, 1.1);
}

.donate{
  background-color: #003366;
  grid-area: donate;
  border-radius: 10px;
  position: relative;
}

#logo {
    max-width:100%;
    max-height:100%;
    display: block;
    background-color:  hsla(0, 0%, 0%, 0);
    filter: drop-shadow(11px 7px 4px #000);
}
#logo:hover{
  transform: scale(1.1, 1.1);
  
}



#band_es{
  position: absolute;
  display: block;
  left: 5px;
  bottom: 5px;
  }
#band_en{
  position: absolute;
  display: block;
  left: 40px;
  bottom: 5px;
}

#band_es:hover{
  transform: scale(1.1, 1.1);
}

#band_en:hover{
  transform: scale(1.1, 1.1);
}

/* Style the header */
.header {
  grid-area: header;
  background-color: #003366;
  padding: 30px;
  border-radius: 10px;
  
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header user user' 
    'topnav topnav topnav topnav topnav donate'
    'left left middle middle right right' 
    'left_b left_b middle_b middle_b right_b right_b'
    'left_c left_c middle_c middle_c right_c right_c'
    'left_d left_d middle_d middle_d right_d right_d'
    'prevnext prevnext prevnext prevnext prevnext prevnext'
    'footer footer footer footer footer footer';
    grid-column-gap: 10px; 
    grid-row-gap: 10px;
    /*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    
    
} 

.left,
.middle,
.right,
.left_b,
.middle_b,
.right_b,  
.left_c,
.middle_c,
.right_c,
.left_d,
.middle_d,
.right_d 
{
  border-radius: 10px 30px;
}



/* Style the left column */
.left {
  grid-area: left;
  padding: 10px;
  
  
}

/* Style the middle column */
.middle {
  grid-area: middle;
  padding: 10px;
  
}

/* Style the right column */
.right {
  grid-area: right;
  padding: 10px;
 
}

/* Style the left column */
.left_b {
  grid-area: left_b;
  padding: 10px;
  
  
}

/* Style the middle column */
.middle_b {
  grid-area: middle_b;
  padding: 10px;
 
}

/* Style the right column */
.right_b {
  grid-area: right_b;
  padding: 10px;
  
}

/* Style the left column */
.left_c {
  grid-area: left_c;
  padding: 10px;
  
  
}

/* Style the middle column */
.middle_c {
  grid-area: middle_c;
  padding: 10px;
  
}

/* Style the right column */
.right_c {
  grid-area: right_c;
  padding: 10px;
  
}

/* Style the left column */
.left_d {
  grid-area: left_d;
  padding: 10px;
  
  
}

/* Style the middle column */
.middle_d {
  grid-area: middle_d;
  padding: 10px;
  
}

/* Style the right column */
.right_d {
  grid-area: right_d;
  padding: 10px;
  
}

.topnav {
  grid-area: topnav;
  border-radius: 10px;
  
}

.user {
  grid-area: user;
  color: #ddd;
  /*display: block;*/
  /*margin-top: auto;*/
  /*margin-bottom: auto;*/
  text-align: center;
  vertical-align: bottom;
  background-color: #003366;
  /*border-style: outset;*/
  padding: 10px;
  border-radius: 10px;
position: relative;

  
  
}

#log {
  text-align: center;
  color:white;
  background-color: #003366;
}

/* Style the footer */
.footer {
  grid-area: footer;
  background-color: #003366;
  color: white;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  
}

.azul{
  background-color: #003366;
  
}

.prevnext{
  grid-area: prevnext;
  padding: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.previous {
  background-color: #be7878;
  color: white;
  float: left;
  padding: 10px;
  margin-right: 25px;
  border-radius: 10px;
}

.next {
  background-color: #04AA6D;
  color: white;
  float: right;
  padding: 10px;
  margin-left: 25px;
  border-radius: 10px;
 
}
.page{
  color: white;
  text-align: center;
  padding: 10px;
}

.next:hover {
  background-color: #ddd;
  color: black;
}

.previous:hover {
  background-color: #ddd;
  color: black;
}

.nextdisable{
  float: right;
  padding: 10px;
  margin-left: 25px;
  background-color:slategray;
  color:rgb(142, 161, 180);
  border-radius: 10px;
}

.previousdisable{
  float: left;
  padding: 10px;
  margin-right: 25px;
  background-color:slategray;
  color:rgb(142, 161, 180);
  border-radius: 10px;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header user user' 
      'topnav topnav topnav topnav topnav topnav'
      'left left left left left left' 
      'middle middle middle middle middle middle' 
      'right right right right right right' 
      'left_b left_b left_b left_b left_b left_b' 
      'middle_b middle_b middle_b middle_b middle_b middle_b' 
      'right_b right_b right_b right_b right_b right_b' 
      'left_c left_c left_c left_c left_c left_c' 
      'middle_c middle_c middle_c middle_c middle_c middle_c' 
      'right_c right_c right_c right_c right_c right_c' 
      'left_d left_d left_d left_d left_d left_d' 
      'middle_d middle_d middle_d middle_d middle_d middle_d' 
      'right_d right_d right_d right_d right_d right_d' 
      'prevnext prevnext prevnext prevnext prevnext prevnext'
      'donate donate donate donate donate donate'  
      'footer footer footer footer footer footer';
  }
  .page{
    padding: 1px;
  }
  .previous {
    padding: 5px;
    margin-right: 10px;
  }
  
  .next {
    padding: 5px;
    margin-left: 10px;
   }
   .nextdisable{
    padding: 5px;
    margin-left: 10px;
   }
  
  .previousdisable{
    padding: 5px;
    margin-right: 10px;
  }
}

.topnav {
  overflow: hidden;
  background-color: #141f1f;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  background-color: #141f1f;
}

.topnav a:hover {
  background-color: #ddd;
  color:#141f1f;
}

.topnav a.active {
  background-color: #003366;
  color: white;
}

.topnav .icon {
  display: none;
  background-color: #141f1f;
}



@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

button {
  background-color: #3e5e96;
  color: white;
  padding: 4px 24px;
  margin: 4px 4px;
  border: outset;
  cursor: pointer;
  width: 100%;
  opacity: 0.7;
}

button:hover {
  opacity:1;
}

table {
  overflow:hidden;
  border:solid rgb(190, 165, 165) 1px;
  border-radius:10px;
  width: auto ;
  background-color: #ddd;
}
th{
  background-color: rgb(31, 30, 30);
}

.userbutton{
  background-color: rgb(32, 31, 100);
  border-radius: 10px;
}
#facebook_logo{
  background-color: hsla(0, 0%, 0%, 0);
  filter: drop-shadow(7px 7px 4px #000);
}

#facebook_logo:hover{
  transform: scale(1.1, 1.1);
  
}

/* The grid container */
.grid-container2 {
  display: grid;
  grid-template-areas: 
    'header header header header user user' 
    'topnav topnav topnav topnav topnav donate'
    'actiondiv actiondiv actiondiv puzzlediv puzzlediv puzzlediv'
    'triviadiv triviadiv triviadiv ataridiv ataridiv ataridiv'
    'footer footer footer footer footer footer';
    grid-column-gap: 10px; 
    grid-row-gap: 10px;
    /*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
} 



.choicediv {
  padding: auto;
  margin: 1%;
  margin-top: 0%;
  margin-bottom: 0%;
  width: 98%;
  /*left: -100%;*/
  background-color: #141f1f;
  border-radius: 10px ;
  position: relative;
  display: block;
  cursor: pointer;
  height: 30vh;
  border: 10px solid #141f1f;
  
  }
  .choicediv:hover{
    transform: scale(1.05, 1.05);
    
  }

#act_div {
    grid-area: actiondiv;
    /*background: radial-gradient( #6867AC 52%, #134040 95%); */
    /*background-color: #797ef6;*/
    background: linear-gradient(#797ef6 , black);
    
}
#puz_div {
  grid-area: puzzlediv;
  /*background: radial-gradient( #CC9752 52%, #134040 95%);*/
  background: linear-gradient(#1aa7ec , black);
}

#triv_div {
  grid-area: triviadiv;
  /*background: radial-gradient(#CCCC00 52%, #134040 95%);*/
  background: linear-gradient(#1aa7ec , black);
 }

#atari_div {
  grid-area: ataridiv;
  /*background: radial-gradient(#E5DBCF 52%, #134040 95%);*/
  background: linear-gradient(#797ef6 , black);
}





.imagen{
  display: block;
  background-color:  hsla(0, 0%, 0%, 0);
  padding-top: 2%;
  padding-bottom: 2%;
  
  /*width: 98%;*/
  height: 96%;
  /*margin: 0%;*/
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px ;
  width:23vw;
  
  
  /*
  padding-top: 1.5%;
  padding-bottom: 1.5%;
  padding-left: 1%;
  */
  filter: drop-shadow(19px 21px 5px #000);
  /*float:left;*/
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container2  {
    grid-template-areas: 
      'header header header header user user' 
      'topnav topnav topnav topnav topnav topnav'
      'actiondiv actiondiv actiondiv actiondiv actiondiv actiondiv'
      'puzzlediv puzzlediv puzzlediv puzzlediv puzzlediv puzzlediv'
      'triviadiv triviadiv triviadiv triviadiv triviadiv triviadiv'
      'ataridiv ataridiv ataridiv ataridiv ataridiv ataridiv'
      'donate donate donate donate donate donate'  
      'footer footer footer footer footer footer';
  }
  .imagen{
    width:75vw;
    
  }
  
}
/*
@media (max-width: 800px) {
  .imagen{
    width:85vw;
    
  }
  
}
*/