@font-face {
    font-family: 'faune';
    src: url('fonts/faune/regular.woff');
    src: local('?'), url('fonts/faune/regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'faune_italica';
    src: url('fonts/faune/italic.woff');
    src: local('?'), url('fonts/faune/italic.woff') format('woff');
    font-style: italica;
}

@font-face {
    font-family: 'faune_bold';
    src: url('fonts/faune/bold.woff');
    src: local('?'), url('fonts/faune/bold.woff') format('woff');
    font-style: bold;
}

@font-face {
    font-family: 'faune_black';
    src: url('fonts/faune/black.woff');
    src: local('?'), url('fonts/faune/black.woff') format('woff');
    font-style: black;
}

@font-face {
    font-family: 'faune_thin';
    src: url('fonts/faune/thin.woff');
    src: local('?'), url('fonts/faune/thin.woff') format('woff');
    font-style: thin;
}

@font-face {
    font-family: 'faune_bi';
    src: url('fonts/faune/bolditalic.woff');
    src: local('?'), url('fonts/faune/bolditalic.woff') format('woff');
    font-style: thin;
}



:root {
  --blue: rgb(76,80,169);
  --dark: rgb(20, 20, 20);
  --violet: rgb(98, 96, 161);
}

body {  
  background-color: white;
  margin: 0px;
  font-family: 'faune', sans-serif;
  font-style: normal;
  font-size: 1em;
}



#container {
  margin: auto;
  border: none;
  max-width: 960px;
  background-color: #FFFFFF;
  padding: 15px;
  box-sizing:border-box;
}

article {  
  font-family: 'faune', sans-serif;
  font-style: normal;
  font-size: 1em;
  line-height: 0.1em;
}

h1 {
  font-family: 'faune_black', sans-serif;
  font-size: 2em;
  text-align: left;
  text-decoration: none;
  line-height: 1.8em;
  color: black;

}

h2 {
  font-family: 'faune_bold', sans-serif;
  font-size: 0.8em;
  text-align: left;
  text-decoration: none;
  line-height: 1em;
  color: black;
}

h3 {
  font-family: 'faune_bold', sans-serif;
  font-size: 0.8em;
  text-align: left;
  text-decoration: none;
  line-height: 0.1em;
  color: black;
}

h4 {
  font-family: 'faune_bold', sans-serif;
  font-size: 1em;
  text-align: left;
  text-decoration: none;
  line-height: 0.1em;
  color: black;
}

a:link, a:visited {
  color: var(--blue);
}

.fancy {
  font-family: 'faune_bi', sans-serif;
  font-style: italic;
  font-size: 2em;
  line-height: 0.8em;
}

/*capçalera*/

.mail {
  font-family: 'faune', sans-serif;
  font-style: normal;
}


.side {
  display: grid;
  height: 45vh;
  overflow: hidden;
  place-items: center;
  position: absolute;
  width: 100%;
}

.side .title {
  font-family: 'faune_bold', sans-serif;
  font-size: 4vh;
  margin: 5px 10vh;
  width: 60%;
}

.side .fancy {
  font-family: 'faune_bi', sans-serif;
  font-style: italic;
  font-size: 1em;
  line-height: 0.8em;
}

#left-side {
  background-color: var(--blue);
  width: 60%;
  z-index: 2;
}

#left-side .title {  
  color: white;  
}

#left-side .fancy {
  color: black;
}

#right-side {
  background-color: black;
}

#right-side .title {
  color: var(--blue);
}

#right-side .fancy {
  color: white;
}

/* pastilles */

#source-link {
  top: 50px;
}

#source-link > i {
  color: var(--blue);
}

#yt-link {  
  top: 10px;
}

#yt-link > i {
  color: var(--blue);
}

.meta-link {
  align-items: center;
  backdrop-filter: blur(3px);
  background-color: var(--blue);
  border-radius: 6px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;  
  display: inline-flex;
  gap: 5px;
  left: 10px;
  padding: 5px 10px;
  position: fixed;
  text-decoration: none;
  z-index: 10000;
}

.meta-link:hover {
  background-color: rgb(70, 70, 70);
}

.meta-link > i, .meta-link > span {
  height: 20px;
  line-height: 10px;
}

.meta-link > span {
  color: white;
  font-family: 'faune', sans-serif;
  font-style:normal;
  font-size: 0.8em;

}



/*peu de pàgina*/

footer {
  font-family: 'faune_thin', sans-serif;
  text-align: center;
  color: black;
  font-size: 0.8em;
  line-height: 0.1em;
  font-weight: lighter;
  position: relative;
  bottom: 0;
  width: 100%;
  height: 150px;
  padding-top: 60px;
}

footer a {
color: black;
font-weight: 400;
text-decoration: none;
  font-family: 'faune_italica', sans-serif;
  font-style: italic;
}

footer a:hover {
  background-color: var(--blue);
  text-decoration: none;
  font-family: 'faune_italica', sans-serif;
  font-style: italic;
}



.claim{
    box-sizing:border-box;
    background: black;
    min-height:200px;
    width: 100%;
    border:25px solid var(--blue);
    padding-right: 80px;
    padding-left: 80px;
    overflow:hidden;
    margin:20px auto;
    font-family: 'faune', sans-serif;
    color: white;
    text-decoration: none;
    font-size: 8em;
    line-height:8em;
    text-transform: uppercase;
    text-align: center;
}

/*noticias destacadas index*/

.destacats {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
  justify-content: space-between;
}

.destacats figure{
  margin:0 1.5em 0.5em 0;
}


.destacats h3{
  color:var(--blue);
  font-weight: 600;
  line-height: 1.0;
 }

.destacats article {
  display: flex;
  margin: 0 0 3em 0;
  position: relative;
  width: 47%; 
}

.destacats .workshop {
  display: flex;
  margin: 0 0 3em 0;
  position: relative;
  width: 90%; 
}

.destacats .content p{
  font-size: 0.8em; 
  margin-bottom: 0.5em; 
  line-height: 1.3;
}

.destacats h5{
  color:var(--blue);
  font-size: 0.8em; 
  line-height: 1.5;
}


/* mediaquerie 550px móvil*/

@media screen and (max-width : 550px) {

    .destacats article{
      flex-direction: column;
    }

    .destacats article{
      width:80%;
    }
}