a{
    color:black;
    font-size: 1em;
    font-weight: 400;
    font-family: "Manrope";
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
.my-class{
    color: #a5b4fc;
}

p{
  font-family: "Manrope", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 1.1em;
  font-variation-settings:
    "ELSH" 0;
}

h1{
    padding: 10px;
    font-size: 2.5em;
    color: #7b0081;
    font-family:"Montserrat";
}
h2{
    font-size: 1.5em;
    color: #7b0081;
    font-family:"Montserrat";
}

header h1{
    padding: 10px;
    font-size: 3.5em;
    color: #f1def2;
    font-family:"Montserrat";
}

ul{
    font-size: 1em;
    font-family: "Manrope";
}
em{
    font-style: normal;
    font-weight: 400;
}
img {
  max-width: 60%;
  height: auto;
}
header {
   height: 200px;
    background-image: url(images/portocolom.jpg);
   background-size: cover;
   position: relative;
}
nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0px;
}
.menu a{
    padding: 5px;
    margin: 0px;
    background-color: #f1def2;
    border-radius: 5px;
    border-left: 5px #e38de8 solid;
    font-size: 1.5em;
}
footer {
  display: flex;
   flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #f1def2;
    border-radius: 5px;
  padding: 5px 20px 5px 0px;
}
.container{
    display: grid;
    margin: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}
.introduction{
    grid-column: 1/2;
}
.tableau{
    grid-column: 2/4;
    grid-row: 1/3;
}
.contact{
    grid-column: 1/2;
    grid-row-start: 2;
}
.titre{
    font-style: italic;
}