/* Load custom fonts from server */
@font-face {
  font-family: '1';
  src: url('/fonts/1.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '2';
  src: url('/fonts/2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '3';
  src: url('/fonts/3.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '4';
  src: url('/fonts/4.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '5';
  src: url('/fonts/5.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '6';
  src: url('/fonts/6.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '7';
  src: url('/fonts/7.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '8';
  src: url('/fonts/8.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '9';
  src: url('/fonts/9.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '10';
  src: url('/fonts/10.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '12';
  src: url('/fonts/12.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '13';
  src: url('/fonts/13.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: '16';
  src: url('/fonts/16.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
}

h1 {
  text-align: center;
  color: #333;
}

.input-container {
  margin-bottom: 20px;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}

select {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.preview {
  border: 1px solid #ddd;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  min-height: 100px;
  font-size: 48px;
  color: #333;
}

/* Bubble outline effect classes */
.bubble-outline {
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     2px  2px 2px rgba(0,0,0,0.5);
  color: white;
}

.bubble-thick {
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     3px  3px 3px rgba(0,0,0,0.5);
  color: white;
}

/* Add controls for outline options */
.outline-controls {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.outline-controls button {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
}

.outline-controls button.active {
  background-color: #ddd;
  font-weight: bold;
}

/* Styles for displaying all fonts */
.all-fonts-container {
  margin-top: 20px;
  display: none;
}

.font-sample {
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 4px;
}

.font-name {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.font-preview {
  font-size: 48px;
  color: #333;
  min-height: 60px;
}

.show-all-button {
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
}

.show-all-button:hover {
  background-color: #45a049;
}