/* Color Pallete*/
:root {

    --whitesmoke: #2B619Bff;
    --vanilla: #E4DDA6ff;
    --mint-green: #C9DFD7ff;
    --vista-blue: #86A2C4ff;
    --steel-blue: #5278A0ff;
    --martinique: #303655;
}

img {
  display: block;
  max-width: 100%;
}

body {
  width: auto;
  margin: 0;
  overflow-x: hidden;
  

}

.flex-container {
    display: flex;
    flex-direction: column;
    background-color: whitesmoke;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    background-color: whitesmoke;

  }

  .header-icon {
    width: 25px;
    height: 25px;
    border-radius: 20px;
    border: 2px solid whitesmoke;
    background-color: whitesmoke;
  }
  
  .header-section {
    position: sticky;
    top: 0px;
    display: flex;
    flex-direction: row;
    background-color: var( --whitesmoke);
    max-width:100%;
    height:auto;
    column-gap: 20px;
    color: #F9FAF8; 
}

  .header-section p {
    display: flex;
    align-items: center;
    color: #F9FAF8;
    text-decoration:none;
    
}

   .header-section p a:visited{
      color:inherit
    }


.header-logo {
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    font-weight: 900;
}

.header-link div{
    flex: 0 0 auto;
    font-size: 12px;
    align-items: center;
    flex-direction: column;
    width: 120px;
    
   
    align-items: center;
    color: #E5E7EB;
}


  .flex-container div {

    font-family: 'Helvetica';
    background-color: #1D2D50;
    
  }

.description-section {
    display: flex;
    max-width:100%;
    justify-items: center;
    align-items: center;
    margin: 100px;
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    
  
}

.description-header {
    font-size: 32px;
    font-weight: bold;
    color: #2a3a48;
    color: #F9FAF8; 
}

.description-greeting {
    font-size: 24px;
    font-weight: bold;
    color: #F9FAF8; 
}


.description-txt {
  background-color: var(--whitesmoke);
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  color: #F9FAF8; 
  margin: 100px;

}

.description-box 
{
     background-color: var(--whitesmoke);
    border-radius: 15px;
    flex-direction: row;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    

}

.description-txt div {
    width: 500px;
    padding: 10px;

    
}

.description-img {
  display: flex;
  width: 500px; 
  height: 300px;
  margin: 50px;
}

.projects-info-section {
  display: flex;
  max-width:100%;
  font-weight: bold;
  height:auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background-color:var(--whitesmoke);
  
}

.projects-header {
  font-size: 32px;
  color: #F9FAF8; 
  font-weight: bold;
  margin: 10px;
}

.projects-container {
  width: 800px;
 
}

.projects-container{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-items: center;
  gap: 20px;
  padding: 50px;
  width: auto;
  height: auto;


  
}

.project-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.project-box div{
  margin: 10px;
}

.projects-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width:100%;
  height:auto;
  
}

.projects-img {
  opacity: 0.3;
  filter: alpha(opacity=10);
  width: 240px;
  height: 180px;
  border-radius: 10px;
  border: 2px solid white;
  background: var(--whitesmoke);
  cursor: pointer;
}



.projects-description {
  width: 160px;
  text-align: center;
  font-size: 18px;
  padding: 20px;
}

.projects-img.selected {
  opacity: 1.0;
  filter: alpha(opacity=40);

}

.preview-section {
    display: flex;
    height: max-content;
    justify-items: center;
    align-items: center;
    text-align: left;
    flex-direction: column;
    border: 2px 2px solid white;
    max-width:100%;
    height:auto;
    background-color:var(--steel-blue);
}

.preview-box {
    display: flex;
    height: max-content;
    justify-items: center;
    align-items: center;
    text-align: left;
    flex-direction: row;
    background-color:var(--steel-blue);

}

#preview-title {
    font-size: 16px;
    font-weight: bold;
    color: #F9FAF8; 
}



#preview-description {
    display: flex;
    flex: 0 0 auto;
    font-size: 16px;
    color: #F9FAF8; 
    margin: 20px;
    text-align: left;
    
}


#preview-tools {
    font-size: 16px;
      color: #F9FAF8; 
    font-weight: bold;
}

#preview-image {
    width: 600px;
    height: 500px;
    margin: 50px;
    border-radius: 20px;
    border: 2px solid whitesmoke;
}

@media (max-width: 768px) {
    .description-box {
        flex-direction: column;
        text-align: center;
        
    }
    
    .description-txt {
        order: 1;
    }
    
    .description-img {
        order: 2;
        margin: 1rem 0;
    }
    
    .projects-container {
        flex-direction: column;
        align-items: center;
        
    }
    
    .preview-box {
        flex-direction: column;
        text-align: center;
        width: 500px;
    }
    

    #preview-image {
        order: 2;
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .header-section {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    

    .description-box div{
      width: 200px;
    }
}