@import url('https://fonts.googleapis.com/css2?family=Koulen&family=Orbitron:wght@500&family=Rubik+Glitch&family=Rubik+Mono+One&family=Saira+Condensed:wght@100&display=swap');

body{
	background-image: url("https://images.squarespace-cdn.com/content/v1/58338d5d37c58135ee05bb45/1580165775261-KSKR6S96PFI5BJFFJ1BZ/AdobeStock_94905049.jpeg?format=1000w");	
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding:0;
	width:100%;
	height: 100vh;
	text-align:center;
}

#title{
	font-family: 'Koulen', cursive;
	font-size: 9em;
	text-align: center;
	align-content: center;
	-webkit-text-stroke-width: 3px;
	background: -webkit-linear-gradient(#40E0D0, #212F3D);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#title span{
	font-family: 'Rubik Glitch', cursive;
	font-weight: lighter;
	-webkit-text-stroke-width: 1.5px;
	background: linear-gradient(to bottom, #ffcc00 0%, #ff0000 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#title img{
	vertical-align: middle;
}

a{
  font-size:12px;
  text-decoration: none;
  color:#ffffff;
}

h1{
  font-size:1.5em;
  color:#525252;
}

.box{
  background:white;
  width:300px;
  border-radius:6px;
  margin: 0 auto 0 auto;
  padding:0px 0px 70px 0px;
  border: #2980b9 4px solid; 
}

.sala, .grup{
  background:#ecf0f1;
  border: #ccc 1px solid;
  border-bottom: #ccc 2px solid;
  padding: 8px;
  width:250px;
  color:#AAAAAA;
  margin-top:10px;
  font-size:1em;
  border-radius:4px;
}

.btn{
  background:#2ecc71;
  width:125px;
  padding-top:5px;
  padding-bottom:5px;
  color:white;
  border-radius:4px;
  border: #27ae60 1px solid;
  margin-left: auto;
  margin-right: auto;
  margin-top:20px;
  margin-bottom: -40px;
  font-weight:800;
  font-size:2em;
}

.btn:hover{
  background:#2CC06B; 
}

.sala, .grup, .sala ::placeholder, .grup ::placeholder{
	font-family: 'Saira Condensed', sans-serif;
	font-size: 0.8em;
	color: black;
	font-weight: bolder;
}

.inicial{
	font-family: 'Saira Condensed', sans-serif;
	font-size: 2em;
}

.textFont {
	font-family: 'Saira Condensed', sans-serif;
}

.codi{
	text-align:  center;
	width: 2.4em;
	height: 2em;
}

#caselles{
	display: flex;
	justify-content: center;
}

.casella{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 5px;
}

.casella input{
	font-size: 60px;
	-webkit-text-security: square;
	background: rgba(255,255,255,0.4);
	text-align: center;
	text-indent: 0.1em;
	box-sizing: content-box;
	border-width: 12px;
	border-style: solid;
	border-image: linear-gradient(to right bottom, #273746, #EAECEE);
	border-image-slice: 1;
}

.casella button{
	display:block;
	height: 5em;
	width: 5em;
	border: 0.2em solid black;
	margin-top: 0.5em;
	border: none;
	border-radius: 100px;
	outline: none;
	background: #b71540;
	color: white; 
	cursor: pointer;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
  	box-shadow: 0 3px 8px #aaa, inset 0 2px 3px #fff;
}

button.prof {
    background: #444;
    border: none;
    border-radius: 80px;
    box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
                inset 0 0 2px 4px hsla(0,0%,0%,.2),
                inset 0 0 2px 6px hsla(0,0%,0%,.2),
                inset 0 0 1px 8px hsla(0,0%,0%,.5),
                inset 0 -4px 2px 4px hsla(0,0%,0%,.5),
                inset 0 1px 1px 8px hsla(0,0%,100%,.25),
                inset 0 -30px 30px hsla(0,0%,0%,.2),
                0 -4px 8px 4px hsla(0,0%,0%,.5),
                0 10px 10px hsla(0,0%,0%,.25),
                0 0 2px 2px hsla(0,0%,0%,.2),
                0 0 2px 4px hsla(0,0%,0%,.2),
                0 0 2px 6px hsla(0,0%,0%,.2),
                0 0 2px 8px hsla(0,0%,0%,.5),
                0 1px 2px 8px hsla(0,0%,100%,.25),
                0 -1px 2px 8px hsla(0,0%,0%,.5);
    color: #303030;
    cursor: pointer;
    font: bold 40px/85px sans-serif;
    height: 80px;
    padding: 0;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25),
                 0 -1px 1px hsla(0,0%,0%,.75);
    width: 80px;
}
button.prof:hover,
button.prof:focus {
    color: #0ab;
    text-shadow: 0 0 20px hsla(240,75%,75%,.5),
                 0 1px 1px hsla(0,0%,100%,.25),
                 0 -1px 1px hsla(0,0%,0%,.75);
}
button.prof:active {
    box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
                inset 0 0 2px 4px hsla(0,0%,0%,.2),
                inset 0 0 2px 6px hsla(0,0%,0%,.2),
                inset 0 0 1px 7px hsla(0,0%,0%,.5),
                inset 0 5px 15px 7px hsla(0,0%,0%,.15),
                inset 0 -4px 2px 3px hsla(0,0%,0%,.5),
                inset 0 1px 1px 7px hsla(0,0%,100%,.25),
                inset 0 -30px 30px hsla(0,0%,0%,.1),
                inset 0 30px 30px hsla(0,0%,0%,.2),
                0 -4px 8px 4px hsla(0,0%,0%,.5),
                0 5px 10px hsla(0,0%,0%,.25),
                0 0 2px 2px hsla(0,0%,0%,.2),
                0 0 2px 4px hsla(0,0%,0%,.2),
                0 0 2px 6px hsla(0,0%,0%,.2),
                0 0 2px 8px hsla(0,0%,0%,.5),
                0 1px 2px 8px hsla(0,0%,100%,.25),
                0 -1px 2px 8px hsla(0,0%,0%,.5);
    line-height: 86px;
}

#nom {
  font-size: 3em;
  text-align: center;
  font-family: 'Rubik Mono One', sans-serif;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: white;
  margin-top: -20px;
}

input::placeholder {
  font-family: 'Saira Condensed', sans-serif;
}