body {
    background-color: #898c7b;
    text-align: center;
    color: #4A4A48;
    font-family: monospace;
}

a {
    color: #A4C2A5;
    text-decoration: dashed;
}

a:hover {
    color: #5D5179;
    text-decoration: underline;
}

main {
    max-width: 1200px;      
    width: 90%;            
    margin: 0 auto;        
    text-align: left;
}

h1,
h2 {
    text-align: center;
}

h3 {
    font-style: italic;
    text-align: center;
}

p {
    text-align: center;
    font-style: italic;
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
    text-align: center;
  }

figure {
    text-align: center;
    font-style: oblique;
}

.validator-icon {
    border: 0;
    width: 88px;
    height: 31px;
}

#evaluation {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-style: italic;
}

#websites {
   text-align:center; 
}

h3 a {
    font-size: x-large;
    color: #5D5179;
    font-weight: bold; 
}

section p {
    text-align: justify;
}

.fancy-table {
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
    font-family: sans-serif;
  }
  
  .fancy-table th,
  .fancy-table td {
    border: 1px solid #333;
    padding: 10px;
    text-align: left;
  }
  
  .fancy-table thead tr {
    background-color: #000;
    color: #fff;
  }
  
  .fancy-table tfoot tr {
    background-color: #000;
    color: #fff;
    font-weight: bold;
  }
  
  .fancy-table tbody tr:nth-of-type(odd) {
    background-color: #b0adad;
  }
  
  .fancy-table tbody tr:nth-of-type(even) {
    background-color: #e0e0e0;
  }
  
.fancy-table td[rowspan] {
    background-color: #d0d0d0 ;
    font-style: italic;
  }
  
  .centered-list {
    width: fit-content;
    margin: 0 auto;
    padding-left: 1.5rem; 
    font-family: sans-serif;
  }

  .centered-table {
    border: 2px solid black;         
    border-collapse: collapse;       
    margin: 2rem auto;               
    font-family: sans-serif;
  }
  
  .centered-table th,
  .centered-table td {
    border: 1px solid black;         
    padding: 8px;
    text-align: left;
  }
  
  .wireframe {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
  }

  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px; 
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1rem;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1rem;
}

button {
  background-color: #222;     
  color: #fff;               
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background-color: #444;     
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="url"],
select {
  border: 1px solid #ccc;        
  padding: 8px;
  font-family: Arial, sans-serif;
  font-size: 1rem;              
  border-radius: 4px;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;

}

.checkbox-group,
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.checkbox-group label,
.radio-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1rem;
}

.website-form {
  background-color: #858080;       
  padding: 30px;
  border-radius: 10px;
  max-width: 600px;
  margin: 40px auto;               
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
  color: #ddee899e; 

}

#slideshow-container {
  max-width: 700px;
  margin: auto;
  position: relative;
  text-align: center;
}


.slide {
  display: none;
}

.slide img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
}



.caption {
  font-size: 18px;
  padding: 10px;
  background: #898c7b; 
  color: #4A4A48;       
}

.thumbnail-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 15px;
}

.thumbnail-list img {
  width: 100px;
  height: 56px; 
  margin: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  box-sizing: border-box; 
}


.thumbnail-list img:hover {
  border-color: #333;
}

.slide {
  display: none;
}

#canvas-container {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  /* keep your width limits if you want, e.g.: */
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}



  
@media screen and (max-width: 600px) {
    img {
        max-width: 100%;
        height: auto;
    }

    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 601px) and (max-width: 992px) {
    body {
        font-size: 18px;
    }

    main {
        width: 95%; 
    }
}

@media screen and (min-width: 993px) {
    body {
        font-size: 18px;
    }
}