@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Gruppo&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

/*-- reset styles --*/
html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	font-family: inherit;
	text-align: center;
	}
a {
	text-decoration: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol,ul {
	list-style: none;
	}
q:before,q:after,
blockquote:before,blockquote:after {
	content: "";
	}
/*-- reset styles --*/

body {
	font-family: "Gruppo", sans-serif;
    /*font-family: 'Poppins', Verdana, Geneva, sans-serif;*/
	font-size: 28px;
	color: #f5f5f5;
	background-color: #333;
}
nav {
	padding: 0.5em;
}
nav ul li {
	display: inline;
    padding-left: 1rem;
    padding-right: 1rem;
}
a:link, a:visited {
	color: #f5f5f5;
}
a:hover {
	color: yellow;
}
header {
    padding-top: 1rem;
}
main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem;
}
div.ilustracio {
    width: 10rem;
    flex: initial;
    margin: 1rem;
}
div.ilustracio img {
    width: 10rem;
}

/* galeria */
.marc {
    display: inline-block;  /* s'adapta a la foto */
    position: relative;     /* per a col·locar els botons dins */
    padding-left: 6rem;          /* padding on viuran els botons */
    padding-right: 6rem;          /* padding on viuran els botons */
}

.marc img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;   /* evita que surti de l'ample de la finestra */
    max-height: calc(100vh - 4rem); /* evita que sobrepassi l’alçada de la pantalla */
}
div.marc div.surt {
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 3rem;
}
div.marc div.anterior,
div.marc div.posterior {
    position: absolute;
    top: 45%;
    font-size: 3.5rem;
}

div.marc div.anterior {
    left: 0rem;
}
div.marc div.posterior {
    right: 0rem;
}
div.marc div.surt a:link,
div.marc div.surt a:visited,
div.marc div.anterior a:link,
div.marc div.anterior a:visited,
div.marc div.posterior a:link,
div.marc div.posterior a:visited {
    text-decoration: none;
    color: #BFBFBF;
}
div.marc div.anterior a:link,
div.marc div.anterior a:visited,
div.marc div.posterior a:link,
div.marc div.posterior a:visited {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

div.marc div.surt a:hover,
div.marc div.anterior a:hover,
div.marc div.posterior a:hover {
    color: orange;
}
div.marc div.num {
    position: absolute;
    top: 0.5rem;
    left: 2rem;
    font-size: 260%;
    font-weight: 500;
    color: #BFBFBF;
}

/* footer */
footer {
    padding-top: 0.3em;
	padding-bottom: 0.6em;
    position: fixed;
    bottom: 0em;
    width: 100%;
	background-color: gray;
}
footer p {
	font-size: 0.6em;
	color: ghostwhite;
}
.flor {
	font-size: 1.4em;
}