/********** Reset **********/
:root{
	--gris-fosc:#3f3f3f;
	--gris:#6f6f6f;
	--gris-clar:#bfbfbf;
	--blanc:#eaeaea;
	--negre:#010101;
	--blau:#3b83bd;
	--font:raleway, sans-serif;
	--mida-titol-petit:4.2vw;
	--mida-subtitol:3.6vw;
	--mida-text-normal:2.8vw;
	--mida-text-petit:2vw;
}
html{
	box-sizing:border-box;
	font-family:var(--font);
	font-size:16px;
	scroll-behavior:smooth;
	margin:0;
	padding:0;
}

*,*::after,*::before{
	box-sizing:inherit;
	scroll-behavior:smooth;
	margin:0;
}

body{
	margin:0;
	overflow-x:hidden;
}

/************ header ************/




/* |versió-movil| */







.header{
	position:fixed;
	z-index:1000;
}

.caixa-dintre-header{
}

/* menu */
.header·caixa-dintre-header·menu{
	width:100vw;
	height:70px;
	background-color:var(--gris-fosc);
}

.header·caixa-dintre-header·menu·caixa-dintre-menu{
	width:100%;
	height:100%;
	
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}

.header·caixa-dintre-header·menu·caixa-dintre-menu·btn-versio-movil{
	background-color:var(--gris-fosc);
	border:0;
	position:relative;
}

.header·caixa-dintre-header·menu·caixa-dintre-menu·logo{
	display:flex;
	flex-direction:row;
	align-items:center;
	margin-right:2rem;
}

.header·caixa-dintre-header·menu·caixa-dintre-menu·logo·foto-perfil{
	width:3.5rem;
	margin-right:1vw;
	
	margin-right:.5rem;
	border-radius:1.75rem;

}

.header·caixa-dintre-header·menu·caixa-dintre-menu·logo·h2{
	font-size:1.5rem;
	color:var(--gris-clar);
}

.none{
	display:none;
}




/* enllaços */


.header·caixa-dintre-header·contenidor-enllaços{
	
	position:absolute;
	background-color:var(--gris);
	margin-top:100vh;
	margin-left:0;
	width:100vw;
	height:calc(100vh - 70px);
	transition:all .5s ease;
	display:flex;
	flex-direction:column;
}

.header·caixa-dintre-header·contenidor-enllaços.is-active{
	margin-top:0;
	margin-left:0;
}

.header·caixa-dintre-header·contenidor-enllaços div{
	padding:2rem;
}

.header·caixa-dintre-header·contenidor-enllaços div a{
	font-size:1.2rem;
	text-decoration:none;
	color:var(--blanc);
}

.header·caixa-dintre-header·contenidor-enllaços·div-inici{
	display:flex;
	justify-content:center;
	border:0;
}

.header·caixa-dintre-header·contenidor-enllaços·div-jocs{
	display:flex;
	justify-content:center;
	border:0;
}

.header·caixa-dintre-header·contenidor-enllaços·div-xarxes-socials{
	display:flex;
	justify-content:center;
	border:0;
}
.header·caixa-dintre-header·contenidor-enllaços·div-xarxes-socials a{
	font-weight:700;
}




	.header·caixa-dintre-header·contenidor-enllaços·div-inici a:hover{
		color:var(--blau);
		font-weight:400;
	}
	
	.header·caixa-dintre-header·contenidor-enllaços·div-jocs a:hover{
		color:var(--blau);
		font-weight:400;
	}
	
	.header·caixa-dintre-header·contenidor-enllaços·div-xarxes-socials a:hover{
		color:var(--blau);
		font-weight:700;
	}



/* |versió-ordinador| */

@media screen and (min-width: 1024px){
	
	.header·caixa-dintre-header·menu·caixa-dintre-menu{
		justify-content:space-around;
	}
	
	.header·caixa-dintre-header·menu·caixa-dintre-menu·btn-versio-movil{
		display:none;
	}
	
	.header{
		background-color:var(--gris-fosc);
		width:100vw;
		display:flex;
		justify-content:center;
	}

	
	.header·caixa-dintre-header{
		width:100vw;
		max-width:100rem;
		height:70px;
		display:flex;
		justify-content:space-between;
	}
	
	.header·caixa-dintre-header·menu{
		width:20rem;
		background-color:transparent;
		position:static;
		
	}
	
	.header·caixa-dintre-header·contenidor-enllaços.is-active{
		width:35rem;
		height:70px;
		position:static;

		margin-right:2%;
		padding:0;
		
		transition:none;
		flex-direction:row;
		align-items:center;
		justify-content:center;
		background-color:transparent;
	}
	
	.header·caixa-dintre-header·contenidor-enllaços·div-inici div a{
		font-size:1.2rem;
	}
	
	.header·caixa-dintre-header·contenidor-enllaços·div-inici a:hover{
		color:var(--blau);
		font-weight:400;
	}
	
	.header·caixa-dintre-header·contenidor-enllaços·div-jocs a:hover{
		color:var(--blau);
		font-weight:400;
	}
	
	.header·caixa-dintre-header·contenidor-enllaços·div-xarxes-socials a:hover{
		color:var(--blau);
		font-weight:700;
	}

	
	.header·caixa-dintre-header·contenidor-enllaços div{
		padding:0;
		margin:0 8%;
		display:flex;
		justify-content:center;
		align-items:center;
	}
	
	.header·caixa-dintre-header·contenidor-enllaços·div-xarxes-socials{
		border-bottom:3px solid var(--blau);
	}
	

	.header·caixa-dintre-header·contenidor-enllaços div:hover{
		background-color:transparent;
	}
	
	
	.header·caixa-dintre-header·menu·caixa-dintre-menu·logo{
		margin-right:0;
		margin-left:1%;
	}
}


/************ main ************/
	
	.main{
		width:100vw;
		background-color:var(--blanc);
		color:var(--gris-fosc);
	}
	
	.main·contenidor-imatges{
		display:flex;
		flex-direction:column;
		align-items:center;
	}
	
	.main·contenidor-imatges a {
		margin:50px 0;
	}
	
		
	.main·contenidor-imatges·enllaç-youtube·contenidor-youtube {
    width: 40vw;
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gris-clar);
    border-radius: 20vw;
	}
	
	.main·contenidor-imatges·enllaç-instagram·contenidor-instagram {
    width: 40vw;
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gris-clar);
    border-radius: 20vw;
	}
	
	.main·contenidor-imatges·enllaç-instagram·contenidor-twitter {
    width: 40vw;
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gris-clar);
    border-radius: 20vw;
	}
	
	.main·contenidor-imatges·enllaç-facebook·contenidor-facebook {
    width: 40vw;
    height: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--gris-clar);
    border-radius: 20vw;
	}
	
	.img-youtube {
    width: 34vw;
	}
	
	.img-instagram {
    width: 34vw;
    }
	
	.img-twitter {
    width: 34vw;
	}
	
	.img-facebook {
    width: 29vw;
	}
/************ footer ************/

.footer{
	background-color:var(--gris);
	color:var(--gris-clar);
	display:flex;
	bottom:0;
	justify-content:center;
}