.Aboutme{
    margin-left: 1200px;
}

body{
background-color: #f2f8fd;
}

/* Barra de navegació fixa */
.navbar {
  overflow: hidden;
  position: fixed; 
  top: 0; 
  left:0;
  background-color: #f2f8fd;
  width: 100%;
}


.Menu:hover {
  text-decoration: underline;
}

/* Add a top margin to avoid content overlay */
.main {
margin-top: 30px; 
}


h1{
   color:#1c4870
}

.Text{
    color:#000000 ;
}

/* Being a Researcher means  */
.frase{
    width: 100ch;
    padding-top: 3rem;
}


  /*  Les targetes dels dos projectes que tinc */
   .projecte-card {
    transition: all 0.3s ease;/* Add a smooth transition for the styles */
    padding: 20px; 
  }
  
  .projecte-card:hover {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
  }
 
/* Construcció del marc de la diapositiva i la distribució interna */

.diapositiva {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: 0.75rem/* 12px */;
  align-items: space-between; /* Add this to distribute the articles evenly */
  min-height: 100vh;
  max-height: 100vh;
  width: 90%;
  background-color: #fff;
  margin: 0 auto;
  margin-bottom: 4rem;
  gap: 4px;
  resize: none;
}

/* títol de la diapositiva amb el text i el svg*/

.titolDiapo{
  width: 100%;
  padding-top: 3rem;
  font-size: x-large;
  grid-column: span 12 / span 12;
  grid-column-start: 6;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-right: 20rem;
 }

/* Col·locació del svg dins al costat de la diapositiva */

 .svg{
   padding-top: 2rem;  
   grid-column-start: 5;
   
 }

/* Primera columna */
.contingut1{
  grid-column: span 5 / span 5;
  grid-row: span 10 / span 10;
  grid-row-start: 3;
  grid-column-start: 2;
  padding-right: 1rem;
}
/* Segona columna */
.contingut2{
  grid-column: span 5 / span 5;
  grid-row: span 10 / span 10;
  grid-column-start: 7;
  grid-row-start: 3;
  padding-left: 1rem;
}

/* Index, primer pàgina de la presentació */
.Index{
  grid-column: span 2 / span 2;
  grid-row: span 1 / span 1;
  grid-row-start: 6;
  grid-column-start: 2;
  padding-right: 1rem;
  font-size: 4rem/* 24px */;
    line-height: 5rem/* 32px */;
}

/* Elements que inclou l'index */

.Nutshell{
  grid-column: span 3 / span 3;
  grid-row: span 2 / span 2;
  grid-row-start: 2;
  grid-column-start: 9;
  padding-right: 1rem;
  font-size: 1.5rem/* 24px */;
  line-height: 2rem/* 32px */;
  display: flex;
  gap: 2rem;
  width: fit-content;
  flex-direction: row-reverse;
       
}

.svgIndex{
  width: 70px;
  height: 70px;
}


.Methdology{
  grid-column: span 2 / span 2;
  grid-row: span 1 / span 1;
  grid-row-start: 4;
  grid-column-start: 10;
  padding-right: 1rem;
  font-size: 1.5rem/* 24px */;
    line-height: 2rem/* 32px */;
}

.Goals{
  grid-column: span 2 / span 2;
  grid-row: span 1 / span 1;
  grid-row-start: 6;
  grid-column-start: 10;
  padding-right: 1rem;
  font-size: 1.5rem/* 24px */;
    line-height: 2rem/* 32px */;
}

.Results{
  grid-column: span 2 / span 2;
  grid-row: span 1 / span 1;
  grid-row-start: 8;
  grid-column-start: 10;
  padding-right: 1rem;
  font-size: 1.5rem/* 24px */;
    line-height: 2rem/* 32px */;
}

.Steps{
  grid-column: span 2 / span 2;
  grid-row: span 1 / span 1;
  grid-row-start: 10;
  grid-column-start: 10;
  padding-right: 1rem;
  font-size: 1.5rem/* 24px */;
    line-height: 2rem/* 32px */;
}







/* 'congress-blue': {
    '50': '#f2f8fd',
    '100': '#e5eef9',
    '200': '#c5ddf2',
    '300': '#92c1e7',
    '400': '#58a0d8',
    '500': '#3284c5',
    '600': '#2369a6',
    '700': '#1c5081',
    '800': '#1c4870',
    '900': '#1c3d5e',
    '950': '#13273e',
}, */