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

body{
	background-image: url("https://wallpaperaccess.com/full/2467256.jpg");	
	background-position: center;
	-webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
	margin-left: 3%;
	margin-right: 3%;
	padding:0;
}

#title{
   font-family: 'Righteous', cursive;
	color: #4A235A;
	text-align: center;
	font-size:5em;
  	-webkit-text-stroke-color: #5DADE2;
	-webkit-text-stroke-width: 3px;
	 text-shadow: 4px 4px 3px black;
}

.objectes{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}
.objecte{
   flex-basis: 18%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: rgba(255,255,255,0.3);
   margin: 5px;
   height: 100%;
   padding: 5px 0;
}

.objecte:hover{
   background-color: rgba(255,255,255,0.5);
}

.objecte input{
   background-color: rgba(255,255,0,0.4);
   border: none;
   border-bottom: solid black 1px;
   width: 50px;
   font-size: 2em;
   text-align: center;
   font-family: 'Ubuntu Mono', monospace;
   font-weight: bolder;
   margin-top: 5px;
}

.objecte label{
   font-family: 'Ubuntu Mono', monospace;
   font-size: 1.2em;
   width: 80%;
   text-align: center;
   font-weight: bolder;
}

 .inici .text-inici{
   font-family: 'Ubuntu Mono', monospace;
   font-size: 1.5em;
   background-color: rgba(255,255,255,0.5);
   padding: 2%;
   text-align: center;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
            0 1px 5px 0 rgba(0,0,0,0.12),
            0 3px 1px -2px rgba(0,0,0,0.2);
}

.inici{
   margin: 0 auto;
   padding: 20px;
}

    .titol-missio{
      font-family: 'Ubuntu Mono', monospace;
      text-align: center;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: black;
      position: relative;
      left: -1.5em;
   }
    .info{
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      margin-bottom: 0.2em;
      position: relative;
    }

    .ocult {
       display: none;
    }

   .titol-alert{
      font-family: 'Righteous', cursive;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: white;
      font-size: 2.5em;
      background-image: url('../img/botoObrir.png');
      background-size: 240px;
      background-repeat: no-repeat;
      background-position: bottom;
   }

   .text-alert{
         font-family: 'Ubuntu Mono', monospace;
         font-size: 1.2em;
   }

   .input-alert{
      text-align: center;
   }

   .boto-alert{
      font-family: 'Righteous', cursive;
      font-size: 1.5em;
   }
   
   body,html{
      margin:0;
      width:100%;
      height: 100%;
   }

   .inferior button {
      background-color: rgba(0,0,0,0);
      outline: none;
      cursor: pointer;
      border: none;
      position: relative;
      display: -webkit-box;
      margin: 0 auto;
      margin-top: 10px;
   }

.inferior button img { 
  margin: auto;
  width: 200px;

}

.inferior button label{
   font-family: 'Righteous', cursive;
  font-size: 2em;
   position: relative;
   top: -17px;
   left: 140px;
   cursor: pointer;
   margin-left: -75px;
}

.inferior button label:hover{
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: white;
}

.puntuacions{
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   text-align: center;
}

.titol-res{
   text-align: center;
   font-family: 'Ubuntu Mono', monospace;
   font-size: 1.5em;
}

.puntSol, .puntGrup{
   font-family: 'Righteous', cursive;
   font-size: 3em;
   -webkit-text-stroke-width: 2px;
   -webkit-text-stroke-color: white;
}

.resultats{
   margin: 0 auto;
   background-color: rgba(255,255,255,0.5);
   width: 60%;
}

.resSol, .resGrup{
   font-family: 'Ubuntu Mono', monospace;
   font-size: 1.8em;
   flex-basis: 33%;
   margin: 10px;
}

.resSol label, .resGrup label{
   font-weight: bolder;
}

.explicacio{
   text-align: center;
   font-family: 'Ubuntu Mono', monospace;
   padding: 3px;
}

.resultatsNASA{
   text-align: center;
}

.resultatsNASA .objecte .puntRes{
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
}

.resultatsNASA .objecte .puntRes label{
   font-family: 'Righteous', cursive;
   color: white;
   padding: 3px 0;
}

label.numero{
   background-color: #1F618D;
}

label.pUsu{
   background-color: #F39C12;
}

label.pGrup{
   background-color: #0BDA51;
}

.labels{
   font-family: 'Righteous', cursive;
   font-weight: bolder;
   color: white;
}

.labels label{
   padding: 3px;
}