/* styles.css */

/* Reset de marges i padding */

@font-face {
  font-family: Arcane; /* set name */
  src: url(Arcane\ Nine.otf); /* url of the font */
}

body{
  background-color:#000000;
  font-family: tenon;
  width: 100%;
}

.good-anchor {
    display: block;
    position: relative;
    top: -180px;
    visibility: hidden;
}

body a {
 color: #ca98ea;
}

body a:hover {
 color: #805799;
}


h1 {
  font-size: 30px;
  font-weight: bold;
  text-align: left;
}

h2 {
  font-size: 20px;
  font-weight: initial;
  font-style: italic;
  text-align: left;
}

h3 {
  font-size: initial;
  font-weight: initial;
  font-style: initial;
  text-align: justify;
}

h4 {
  font-size: initial;
  font-weight: initial;
  font-style: italic;
  text-align: justify;
}

h5{
  font-size: initial;
  font-weight:bold;
  text-align: justify;
  font-style: italic;
}


#videofons {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%; 
  z-index: -1;
  object-fit: cover;
}

/* Navbar mòbil */
.navbarsuperior {
  overflow: hidden;
  background-color: #39a9e2 !important;
  /* Set the navbar to fixed position */
  top: 0 !important; /* Position the navbar at the top of the page */
  width: 100% !important; /* Full width */
  text-align: center !important;
  margin-top: none;
}

.navbarsuperior img{
  display: block;
  margin: auto;
  width: 60%;
}

/* Navbar inferior nou */
.navbarnou{
  background-color: #7bd0fa !important;
  color: #e2eff5 !important;
  font-weight: bold !important;
  font-family: Tenon;
  width: 100% !important;
}

.navbarnou a{
  color: #f1fbff !important;
  font-weight: bold !important;
  font-family: Tenon;
}

.navbarnou a:hover{
  color: #343e91 !important;
}

.dropdownmenu-nou{
  background-color:#e2eff5!important;
}

.dropdownmenu-nou ul{
  background-color:#e2eff5 !important;
  
}

.dropdownmenu-nou a{
  color: #272829 !important;
}
  

.dropdownmenu-nou li a:hover
{
  background-color:#aedff5 !important;
}

/* Navbar inferior antic */
.navbarinferior {
  overflow: hidden;
  background-color: #7bd0fa;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
  margin-top: 120px;
}

.navbar-inferior-centrado
{
  margin-left: 30%;
  margin-right: auto;
  display: inline-flex; 
  width: 35%;
}

/* Links inside the navbar */
.navbarinferior a {
  float: left;
  display: block;
  color: #272829;
  font-weight: bold;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;
}

/* Change background on mouse-over */
.navbarinferior a:hover {
  background: #343e91;
  color: rgb(255, 255, 255);
}

/* Footer mòbil */
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  font-family: Tenon;
  width: 100%;
  background-color: #39a9e2;
  color: #272829;
  text-align: center;
}

/* Flex esquerra x footer*/
.flex-item-left-footer {
  margin-top: 10px; 
  padding: 0px;
  flex: 60%;
  display: inline-flex;
  background-color:transparent;
  font-size:small
}

/* Flex dret x footer*/
.flex-item-right-footer {
  margin-top: 10px; 
  padding: 0px;
  flex: 40%;
  background-color:transparent;
  font-size:small
  
}

*{
  box-sizing: border-box;
}

/* Caixes personatges, per si s'ha de fer quelcom especific en aquesta part*/
.contingutpersonatges {
  background-color: #f5e9e9;
  padding: 20px;
  font-family: Tenon;
  border-radius: 10px;
  margin-bottom: 10px;
  height:200px /* Ajustar height quan s'hagi acabat tot, només posada per exemple*/
}

/* Contingut dels apartats esquerra*/
.contingut {
  background-color: #cbeaf8;
  color: #272829;
  padding: 20px;
  font-family: Tenon;
  border-radius: 10px;
  margin-bottom: 10px;
  width: 100%;
 /* Ajustar height quan s'hagi acabat tot, només posada per exemple*/
}

/* Títols apartatss*/
.contenidortitols {
  background-color: #39a9e2;
  color: #fffda4;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-family: "scatterplot-vf",sans-serif;
  font-variation-settings: 'wght' 399, 'RAND' 199;
  font-size: 60px;
  font-weight: bold;
  margin-top: 5%;
}

.contenidortitols-primera {
  background-color: #39a9e2;
  color: #fffda4;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-family: "scatterplot-vf",sans-serif;
  font-variation-settings: 'wght' 399, 'RAND' 199;
  font-size: 60px;
  font-weight: bold;
}

/* Contenidor general, no modificar massa*/
.flex-container {
  display: inline-flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
  
}

/* Flex esquerra*/
.flex-item-left {
  margin-top: 20px; 
  background-color: #7bd0fa;
  padding: 10px;
  flex: 60%;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 10px;
}


/* Flex dret*/
.flex-item-right {
  margin-top: 20px; 
  background-color: #395eb5;
  padding: 10px;
  flex: 30%;
  margin-left: 5px;
  margin-right: 5px;
  border-radius: 10px;
  height: 11255px;
}

.img-fandom-gran {
  width: 50%;
}

.img-fandom-petita {
  height: 250px;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}


/* Formulari*/
form {
  border-radius: 5px;
  background-color: #cbeaf8;
  padding: 20px;
  font-family: Tenon;
  font-size: smaller;
}

::placeholder{
  font-size: small;
  color: #cbeaf8;
}

label {
  display: block;
  font-family: Tenon;
  margin-top: 7%;
  font-weight: bold;
  color: #395eb5;
}

input[type=text], select {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #395eb5;
  color: #cbeaf8;
  font-size: smaller;
}

input[type=text] {
  background-color: #395eb5;
}
  
input[type=submit] {
  width: 100%;
  background-color: #fffda4;
  color: #aedff5;
  padding: 14px;
  font-weight: bold;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #c4c24c;
  color: #39a9e2;
}

.enmarcar{
  display: inline-flex;
  border: 2px solid #cc9de9;
  border-radius: 4px;
}

.imatges-capitols{
  margin-left: 5px;
  margin-top: 20px;
}

.titols-capitols{
  width: 210px;
  border: 2px solid #cc9de9;
  border-radius: 4px;
  font-size: small;
  margin-left: 5px;
}

.imatges-recomana{
  width: 100%;
  border-radius: 3%;
  margin-bottom: 2%;
}

.imatges-sticker{
  border-radius: 3%;
  margin-bottom: 2%;
  width: 70%;
}

.seccions-body{
  font-size: small !important;
  text-align: left !important;
}

.acordeo-div{
  margin-top: 4%;
}

.acordeo-div button{
  background-color: #93d7f7 ;
  border-color: #fefb45;
  font-weight: bold;
}

.acordeo-div button:focus {
  background-color: #92b1ea ;
  border-color: #fefb45;
  font-weight: bold;
}

.acordeo-parts{
  border-color: #135d7f !important;
  color:#fffda4;
  background-color: #395eb5;
}