@font-face {
  font-family: 'Press Start 2P';
  src: url('https://static.igem.wiki/teams/5406/fonts/press-start-2p/pressstart2p-regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


:root {
  --color-background: #008080;
  --color-white: #fdffff;
  --color-grey_light: #c3c3c3;
  --color-grey_dark: #818181;
  --color-black: #000000;
  --color-blue: #010081;
  --color-pink: #FF0081;
  --color-dark-blue: #000066;
}

body {
  background-color: var(--color-background);
  color: var(--color-white);
  font-family: 'Press Start 2P', Arial, sans-serif;
}

/* General text styling */
p, span, div:not(.visual_window *) {
  color: var(--color-white);
}

/* Header styling */
h1, h2, h3, h4, h5, h6 {
  background-color: var(--color-dark-blue);
  color: var(--color-white);
  padding: 10px 20px;
  border-radius: 15px;
  display: inline-block;
  margin: 20px auto;
  text-align: center;
  width: auto;
  max-width: 58%;

}

/* Center headers */
h1, h2, h3, h4, h5, h6 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.visual_window {
  width: auto;
  max-width: 80%;
  display: inline-block;
  background-color: var(--color-white);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  margin: 20px auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px;
}

.window-titlebar {
  background-color: var(--color-blue);
  color: var(--color-white);
  padding: 2px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-button {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.window-content {
  overflow-y: auto;
  background-color: var(--color-white);
  border: 2px inset var(--color-grey_light);
}

.content-area {
  padding: 10px;
  white-space: normal; /* Changed from nowrap to normal */
  word-wrap: break-word; /* Added to allow long words to break */
  overflow-wrap: break-word; /* Added for better browser support */
}

/* Ensure text inside visual_window is black */
.visual_window, .visual_window * {
  color: var(--color-black);
}
.visual_window a {
  color: lightseagreen;
  text-decoration: underline;
}

.visual_window h1,
.visual_window h2,
.visual_window h3,
.visual_window h4,
.visual_window h5,
.visual_window h6 {
  color: var(--color-white);
  font-size: 1.2rem;
}
/* Scrollbar styles */
.window-content::-webkit-scrollbar {
  width: 16px;
}

.window-content::-webkit-scrollbar-track {
  background-color: var(--color-grey_dark);
  width: 20px;
}

.window-content::-webkit-scrollbar-thumb {
  background-color: var(--color-grey_light);
  width: 6px;
}

.window-content::-webkit-scrollbar-button {
  display: none;
}

/* Additional styles for general use */
a {
  color: var(--color-blue);
  text-decoration: none;
}

a:hover {
  color: var(--color-pink);
}

.container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Utility classes */
.text-center {
  text-align: center;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.window-title {
  color: white;
}

a {
  color: var(--color-dark-blue);
}

.window-image {
  width: 90%;  /* Image takes up 90% of the container width */
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.internal-header {
  color:white
}



.parts-table {
  width: 100%;
  border-collapse: collapse;
}

.parts-table th, .parts-table td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid var(--color-grey_dark);
}

.parts-table th {
  background-color: var(--color-black);
  color: var(--color-white);
}

.parts-table tr:nth-child(even) {
  background-color: var(--color-grey_light);
}

.parts-table tr:nth-child(odd) {
  background-color: var(--color-white);
}

.parts-table a {
  color: var(--color-blue);
  text-decoration: none;
}

.parts-table a:hover {
  color: var(--color-pink);
}


.main-icon {
  width: 15%;
  max-width: 20%;
  height: auto;
  display: block;
  margin: 2rem auto 0rem;
}
.main-icon-caption {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 2rem;
}



/* 2. Adding a row with icons and captions */
.icon-row {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  margin-bottom: 7%;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.icon-item img {
  width: 256px;
  height: 256px;
  margin-bottom: 10px;
}

.section-icon {  
  
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 256px;
  height: 256px;
  margin-bottom: 10px;}


.category-caption{
  background-color: transparent;
  color:var(--color-black);
  font-size: 1rem;
}


.page-caption{
  background-color: transparent;
  color:var(--color-black);
  font-size: 2rem;
}




.centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}



.page-header {
  text-align: center;
  margin-bottom: 40px;
  margin-top: 40px;
}

.header-icon {
  width: 240px;
  height: 240px;
  display: block;
  margin: 0 auto 20px;
}

.header-caption {
  font-size: 24px;
  color: var(--color-white);
}


.pdf-container {
  width: 100%;
  margin: 20px 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

ol{margin-left:10px;}

img{max-width: 100%;}


p,li{
  font-size: 0.8rem ;
}

h1,h2,h3,h4,h5{
  font-size: 1.2rem ;
}