/* --------------------------------------------------
   1. VARIABLES
-------------------------------------------------- */
:root {
  --light_color: #F7F7F9;
  --input_color: #FFFFFF;
  --input_feedback_color: #E8F3FF;
  --highlight_color: #E63946;
  --medium_color: #4A90E2;
  --dark_color: #1D3557;
}

/* --------------------------------------------------
   2. BASE ELEMENTS
-------------------------------------------------- */
html {
  background-color: var(--light_color);
  font-family: Arial, Helvetica, sans-serif;
  color: var(--dark_color);
  margin-left: 10%;
  margin-right: 10%;
}

body {
  font-family: Arial, Tahoma, Geneva, Verdana, sans-serif;
}

h1 { font-size: larger; }
h2 { font-size: large; }
h3 { font-size: medium; }

p { text-align: justify; }

/* --------------------------------------------------
   3. LAYOUT COMPONENTS
-------------------------------------------------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.logo img {
  height: 60px;
}

.lang-select a {
  margin-left: 15px;
  text-decoration: none;
  font-weight: bold;
  color: #333;
}

.lang-select a:hover {
  color: #0077cc;
}

/* Navigation */
.topnav {
  padding: 1em;
  margin: 0;
  overflow: hidden;
}

.topnav a {
  margin-left: 0.2em;
  float: left;
  color: var(--dark_color);
  text-decoration: none;
  font-size: 22px;
}

.topnav a:hover {
  color: var(--medium_color);
}

.topnav a.active {
  color: var(--highlight_color);
}

/* Home icons */
.home {
  background: url('image/home24dark.png') no-repeat;
  padding: 1em;
}

.home:hover {
  background: url('image/home24light.png') no-repeat;
}

.homeActive {
  background: url('image/home24hl.png') no-repeat;
  padding: 1em;
}

/* Tables */
.table_example,
.table_centered {
  width: 100%;
  border-collapse: collapse;
}

.table_example th,
.table_centered th {
  background-color: var(--input_color);
  text-align: center;
  border: 1px solid;
}

.table_centered td {
  border: 1px solid;
  text-align: center;
}

/* --------------------------------------------------
   4. FORM ELEMENTS
-------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 5px;
  font-size: 16px;
  background: var(--input_color);
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--dark_color);
  transition: all 0.25s ease;
  box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
  background: var(--input_feedback_color);
  border-color: var(--medium_color);
  outline: none;
  box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.25);
}

/* Select arrow */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%231D3557' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

/* Buttons */
button,
input[type="submit"],
input[type="button"] {
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 600;
  background: var(--medium_color);
  color: var(--light_color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.25s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--dark_color);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: scale(0.97);
}

button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.25);
}

/* Fixed-size buttons */
.buttonMax {
  width: 150px;
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  background: var(--medium_color);
  color: var(--light_color);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.buttonMax:hover { background: var(--dark_color); }
.buttonMax:active { transform: scale(0.97); }
.buttonMax:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.25);
}

/* --------------------------------------------------
   5. UTILITY COMPONENTS
-------------------------------------------------- */
.codeblock {
  font-size: large;
  font-family: monospace;
  font-weight: bold;
  padding: 1em;
  background: var(--input_color);
  color: var(--dark_color);
  border: 2px solid var(--highlight_color);
}

#boxedText {
  padding: 1em;
  border: medium solid var(--dark_color);
}

#explanationBox {
  padding: 1em;
  border: 2px solid var(--dark_color);
}

/* --------------------------------------------------
   6. MISC
-------------------------------------------------- */
#previewCanvas {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
}