body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

html{
  font-family: "Poppins", sans-serif;
  scroll-behavior:auto;
}

.side-side{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}

.side-side > ul{
  text-align: start;
  text-decoration: none;
  padding: 16px 20px;
}

/* Navigation bar */
header {
  /* background-color: #5b6c8b; */
  background-color: #232222;
  color: #fff;
  padding: 10px 0;
  margin-left: 250px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  text-align: end;
  margin-right: 50px;
}

nav ul li {
  display: inline;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 16px 20px;
}

nav ul li a:hover {
  background-color: #555;
}



/* Most important */
.header-content {
  margin-left: 250px; /* Adjust based on sidebar width */
  padding: 20px;
  background-color: #fb59ce;
  color: white;
  text-align: center;
  margin-bottom: 10px;
}

/* This is the big container, beside the sidebar */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-left: 300px;
  margin-right: 50px;
  /* height: 60vh; */
  align-items: stretch;
}

.grid-container-height{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-left: 300px;
  margin-right: 50px;
  height: 60hv;
  margin-bottom: 20px;
}

/* .three-columns{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-left: 300px;
  margin-right: 50px;
  margin-bottom: 20px;
} */

.placed-right{
  grid-area: 1 / 3 / 1/ 4;
}
.unite{
  grid-column: span 2;
  display: flex;
  gap: 20px;
}



.grid-item {
  background-color: #fdbdeb;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 0;
  
  /* height:fit-content; no cuz it prevent the box to stretch*/
}

/* .flex-container {
  background-color: aquamarine;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
} */


/* .flex-container {
  background-color: blue;
  display: flex; */
  /*MOvemflex-wrap: wrap;*/ /* Allows items to wrap to the next line */
  /* flex-direction: row;
} */

.flex-item {
  flex: 1; /* Each item takes equal space */
  max-width: 100%; /* Adjust according to the number of items per row */
  padding: 0px 5px;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.flex-item img {
  width: 100%;
  height: auto;
}

.grid-item.together{
  background-color: rgb(101, 62, 101);
  grid-column: span 3;
  padding: 5px;
}

.paragraph{
  text-align: start;
  margin-left: 10px;
  color: rgb(0, 0, 0);
  font-family: "Poppins", sans-serif;
}

p{
  padding: 0;
  margin: 10px 5px;
}

.pink-background{
  background: linear-gradient(-45deg, #c947a5, #fb59ce, #fdbdeb, #fedef5);
}

.logo{
  text-align: start;
}

.logo > img {
   background-color: white;
   
}

h2{
  margin: 0 5px;
  padding: 8px;
  font-family: "Poppins", sans-serif;
}

.flex-container {
  /* background-color: aquamarine; */
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  grid-template-rows: 0.2fr 1fr;
}

.both2{
  grid-column: span 2;
  grid-area: 1 / 1 / 1 / 3;
  /* background-color: antiquewhite; */
}

.label{
  border-bottom: 1px solid black;
}

.label h3{
  margin: 5px auto;
}

div.grid-item.no-background{
  background-color: white;
}

ul.observation-list > li{
  list-style-type: none;
  margin: 5px auto;
  font-family: "Poppins", sans-serif;
}

.unhide-button{
  background-color: rgb(106, 210, 255);
  color: rgb(0, 0, 0);
  font-weight: 500;
  padding: 10px;
  width: 150px;
  border: 0;
  margin: 20px auto 0;
  border-radius: 4px;
  cursor: pointer;
  display: block;
}

.unhide-button:hover{
  background-color: rgb(0, 122, 174);
  font-weight: 700;
  color: #fff;
  border: 3px solid white;

}


.challenge-container {
  /* background-color: aquamarine; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.2fr 1fr;
}

.letter-both{
  grid-column: span 2;
  grid-area: 1 / 1 / 2 / 3;
  padding: 10px;
}



.bottom-buttons{
display: flex;
flex-direction: row;
margin-left: 250px;
gap: 40px;
justify-content: center;
align-items: center;
padding: 46px;

}

.home-icon{
background-color:#555;
border: none;
padding: 8px 12px;
border-radius: 50%;
}

.home-icon:hover{
background-color:#232222;
}

.next-button{
background-color:  #1590F5;
padding: 8px 16px;
align-items: center;
justify-content: center;
border: none;
border-radius: 12px;
font-size: 16px;
color: #fff;
font-weight: 600;
display: flex;

}

.next-button:hover{
background-color: #1558f5;
}

button.blue > img{
align-items: center;
justify-content: center;
padding-left: 5px;
}

.bottom-buttons a{
text-decoration: none;
}

P{
  font-family: "Poppins", sans-serif;
}