body{
  background-color: rgb(175, 246, 175);
  color: black;
  font-size: 20px;

}


p {
  color: palevioletred;
  font-family: Georgia, 'Times New Roman', Times, serif;
  border: 3px dotted white;
  padding: 10px;
  text-align: center;
  width: 700px;       /* choose a width */
  max-width: 90%;     /* keeps it responsive */
  margin: 10px auto;  /* centers it */
  box-sizing: border-box;
  display: block;
  justify-content: center;
}
p:first-of-type {
  display: block;
  width: 700px;
  max-width: 90%;
  margin: 10px auto;
  text-align: center;
  border: 3px dotted white;
  padding: 10px;
  box-sizing: border-box;
}

h2, p {
  margin: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgb(175, 246, 175);
  display: flex;
  overflow: hidden;
  justify-content: center;
}
ul li a.active {
  background-color: #04AA6D;
}

ul li a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;
}
#nav {
  height: 60px;          /* make it taller */
  line-height: 60px;     /* keeps text centered vertically */
  margin: 0;
  width: 100%;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

#nav li {
  list-style: none;
}

#nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  color: white;
  text-decoration: none;
  font-size: 18px;
}




.dark-mode {
  background-color: black;
  color: white;
}
.dark-mode .info-grid {
  background-color: #1a1a1a;
  padding: 20px;
  border-radius: 12px;
}

.dark-mode .info-card {
  background-color: #222;
  border: 1px solid #444;
  color: white;
}

.dark-mode .info-card h3,
.dark-mode .info-card p {
  color: white;
}

.Acorn{
    color: palevioletred;
    font-family:Georgia, 'Times New Roman', Times, serif;
    display: flex;
    margin:2 auto;
    display: inline;
    list-style: inside;
    text-align: center;
    width: 250px;
  
    
}

.list{
        color: palevioletred;
       list-style-position: inside;
       text-align: center;
        width: 350px;         
        margin: 2 auto;  
        display: grid; 
        grid-template-columns: auto auto auto;
        grid-template-rows: auto auto;
        display: inline;
        list-style: inside;
   
}

img{
    border-radius: 15px;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    /* display: block; */
    margin-top: 40px; 

}

h1{
    text-align: center;
}
h2{
 
    text-align: center;
}

.video{
    justify-self: center;

}

 button{
    border: 3px solid navy;
    border-radius: 15px;
    padding: 5px;
    background-color:aliceblue;  
    padding: 10px 20px;
    font-size: 15px;
    cursor: pointer;
 }

 button:hover{
     background-color:chartreuse;
     color: indigo;
 }

 #mainPage {
    margin-left: 105px;
    margin-right: 105px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
 }
.info-grid {
  /* 1. Remove list formatting */
  list-style: none;
  padding: 0;
  margin: 0;

  /* 2. Activate Grid */
  display: grid;

  /* 3. Create 3 equal columns */
  grid-template-columns: repeat(3, 1fr);

  /* 4. Let row heights adjust automatically based on information size */
  grid-auto-rows: minmax(120px, auto);

  /* 5. Space between rows and columns */
  gap: 20px;
}

/* Styling for the items containing information */
.info-card {
  background-color: #ffffff;
  border: 1px solid #e1e4e8;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 6px 10px palevioletred;
}

.info-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #333;
}
.info-card p {
  width: 70%;          /* smaller than the card */
  max-width: 300px;    /* keeps it compact */
  margin: 0 auto;      /* centers it */
  display: block;
  text-align: center;
  border: 2px dotted white;
  padding: 8px;
  box-sizing: border-box;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}
/* Makes the 7th item stretch across all 3 columns wide */
.item-7 {
  grid-column: span 2; 
  justify-content: center;
}


a {
    color:red
}

h2{
    color:skyblue;
}

button{
  display: block;
   margin: 20px auto;
}