<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* ---------------------------
   Base / Global Resets
--------------------------- */
a {
  text-decoration: none;
  color: inherit;
}

/* ---------------------------
   Header
--------------------------- */
header {
  text-align: center;
  color: white;
  margin: 20px 0;
}
.page-title {
  font-size: 2rem;
  margin-bottom: 5px;
}
.page-info {
  font-size: 1rem;
}

/* ---------------------------
   Gradient Container &amp; Panels 
   (if you still need them)
--------------------------- */
.gradient-container {
  display: flex;
  gap: 0;
}
.panel {
  flex: 1;
  height: 300px;
  transition: background-color 0.3s ease;
}

/* 
   Layout container for the gradient 
   and color data box
*/
.info-gradient-container {
  display: flex;
  flex-direction: row; 
  /* Remove fixed "calc(100vh - 550px)" 
     so it can grow/shrink with content. */
  width: 100%;
  max-height: 100%; 
  overflow: hidden; /* or remove if not needed */
  margin-top: 20px; /* optional spacing above if desired */
}

/* The outer containers (#colorDataContainer &amp; #linearGradientContainer) */
#colorDataContainer,
#linearGradientContainer {
  width: 50%; 
  margin: 10px; 
  display: flex;
  justify-content: flex-start; 
  /* Let them size naturally */
  height: auto;
}

/* The box that holds the color data with the background color */
.color-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  background: #222;
  color: white;
  position: relative;
  /* Let it size to content instead of 100% */
  height: auto;
  width: 100%;
}

/* The semi-transparent text container overlay */
.color-data-overlay {
  background: rgba(0, 0, 0, 0.4);
  padding-left: 20px;
  position: absolute; 
  top: 76.5px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  width: calc(100% - 20px);
}
.color-data-overlay p {
  margin: 5px 0;
  line-height: 2;
}

/* Linear Gradient Box */
.linear-gradient-container {
  width: 50%;
  height: auto; 
  background: #333;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  margin-top: 0; /* reset if needed */
  margin-bottom: 0;
}

/* The button overlayed on the gradient box */
.gradient-direction-button {
  position: absolute;
  border-radius: 5px;
  top: 45%; 
  left: 50%; 
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 15px;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  z-index: 2;
}
.gradient-direction-button:hover {
  background: rgba(0, 0, 0, 0.5);
}
#directionArrow {
  font-size: 16px;
  transition: transform 0.3s ease;
}

/* ---------------------------
   Controls
--------------------------- */
.gradient-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}
.button {
  padding: 10px;
  color: white;
  background-color: #333;
  border: none;
  cursor: pointer;
}
.button:hover {
  background-color: #555;
}

/* Prevent text selection on gradient panels */
.gradient-container,
.panel {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ---------------------------
   Modal for naming saved palette
--------------------------- */
.name-saved-palette-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  color: white;
  padding: 20px;
  border-radius: 8px;
  z-index: 9999;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  width: 300px;
}
.name-saved-palette-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.name-saved-palette-modal-buttons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.hidden {
  display: none;
}

/* Let the pickr color picker expand properly */
.pcr-app {
  width: auto !important;
  height: auto !important;
  border-radius: 5px;
  z-index: 99999 !important;
}
/* Hide the default collapsed Pickr button */
.pcr-button {
  display: none !important;
  pointer-events: none !important;
}

/* ---------------------------
   RESPONSIVE MEDIA QUERIES
--------------------------- */

/* 
   Slightly shrink fonts, reduce spacing 
   around 992px 
*/
@media (max-width: 992px) {
  .page-title {
    font-size: 1.6rem;
  }
  .page-info {
    font-size: 0.95rem;
  }

  /* Let .info-gradient-container stack if you want? 
     Or keep row, but let each child shrink. */
  .info-gradient-container {
    flex-direction: column;
    align-items: center;
  }

  #colorDataContainer,
  #linearGradientContainer {
    width: 80%; /* reduce from 50% to 80% each on narrower screens */
    margin: 10px auto;
  }

  .color-data {
    height: auto; 
  }
  .linear-gradient-container {
    height: auto;
  }
}

/* 
   Around tablet size (&lt;=768px): 
   Maybe reduce further? 
*/
@media (max-width: 768px) {
  .page-title {
    font-size: 1.4rem;
  }
  .page-info {
    font-size: 0.9rem;
  }

  /* Possibly hide .gradient-container if not needed? 
     or let it shrink. 
     If you want to scale height: 
     .panel { height: 200px; }
  */

  /* You can also reduce spacing in .gradient-controls */
  .gradient-controls {
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
  }
  .button {
    padding: 8px;
    font-size: 0.9rem;
  }

  .info-gradient-container {
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
  }
  #colorDataContainer,
  #linearGradientContainer {
    width: 95%;
    margin: 5px auto;
  }

  .color-data-overlay {
    top: 60px;
    transform: translate(-50%, -40%);
  }
}

/* 
   Very small screens (&lt;=480px):
   further scaling text &amp; containers 
*/
@media (max-width: 480px) {
  .page-title {
    font-size: 1.2rem;
  }
  .page-info {
    font-size: 0.8rem;
  }

  .button {
    font-size: 0.85rem;
    padding: 6px;
  }

  .color-data-overlay {
    width: calc(100% - 10px);
    top: 40px;
    transform: translate(-50%, -20%);
  }
  .color-data {
    padding: 10px;
  }
}

  
</pre></body></html>