/* General Reset */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #13171f;
}

  /* Style the header */
  .header {
    grid-area: header;
    padding: 10px;
    /* text-align: center; */
    /* border: 1px solid gray; */
    background-color: black;
    border-bottom: 1px solid #333;
  }
  
  /* The grid container */
  .grid-container {
    display: grid;
    grid-template-areas: 
      'header header header' 
      'left main right' 
      'footer footer footer';
      grid-template-columns: 200px 1fr 200px;
      grid-template-rows: auto 1fr auto;
      min-height: 100vh;
      gap: 10px;
  } 
    
  /* Style the left column */
  .left {
    grid-area: left;
    padding: 10px;
  }
  
  /* Style the main column */
  .main {
    grid-area: main;
    padding: 20px;
    border-radius: 8px;
    min-width: 0; /* apparently forces pre elem to add scrollbar */
  }
  
  .logo {
    font-size: 24px;
  }

  #site-logo {
    text-decoration: none;
    color: #dddddd;
    font-weight: bold;
    transition: color 0.3s ease, transform 0.2s ease;
  }

  #site-logo:hover {
    color: #ffffff;
    transform: scale(1.05);
  }

  /* Style the right column */
  .right {
    grid-area: right;
    padding: 10px;
  }
  
  /* Style the footer */
  .footer {
    grid-area: footer;
    padding: 10px;
    text-align: center;
    background-color: black;
    border-top: 1px solid #333;

    /* border: 1px solid gray; */
  }
  
button {
	margin-bottom: 1.0rem;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

pre {
  overflow-x: scroll !important;
}

pre code {
  display: block;
  white-space: pre;
}

dt {
  font-weight: bolder;
}

#pref-font {
  width: auto;
}
#pref-font-size {
  width: auto;
}

@media (min-width: 769px)
{
	.color-input {
		max-width: 200px;
	}
	.main {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
  #max-attempts {
    max-width: 200px;
  }

  .date-time-input {
    max-width: 250px;
  }
}

.code-box {
	font-family: 'Fira Code', 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;
}

code {
    margin-bottom: 0.8em;
}

code p {
    margin-bottom: 0.3em;
    margin-top: 0.3em;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 991px) {
    .grid-container  {
     
        grid-template-areas:
        "header"
        "left"
        "main"
        "right"
        "footer";

        grid-template-columns: 1fr;
        grid-template-rows:
        auto /* Header */
        minmax(75px, auto) /* Nav */
        1fr /* Content */
        minmax(75px, auto) /* Sidebar */
        auto; /* Footer */
    }

	.color-input {
		max-width: 50%;
	}

	.buttons-container {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

  /* S */

  #donate-link {
    display: none;
  }
}
/* Styles for special components used on various pages */

/* for any error messages */
.dark-warning {
  background-color: #3a0000;
  color:#f0f0f0;
  padding: 1rem;
  border: 1px solid #990000;
  border-radius: 6px;
  margin: 1rem 0;
}

#preview-button {
	display: block;
}

#preview-container {
	background-color: white;
	padding: 2.5rem;
	border: 1px solid #333;
}


/* .title-box {
	max-width: 400px;
} */

.buttons-container {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

.buttons-container button {
	max-width: 30%;
	min-width: 30%;
}

#preview-container iframe {
	font-family: 'Courier New', Courier, monospace;
	width: 100%;
	height: 500px;
	border: 1px solid #ccc;
	background: white;
  }