body {
  margin:0;
  font-family: 'Ubuntu', sans-serif;
  background: linear-gradient(160deg, #f0f4f8, #d9e2ec);
}
header {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-image: url(source/banner.jpg);
  background-repeat: no-repeat;
  color: #fff;
  padding: 1.5rem; /* of 0.5rem 1rem */
  text-align:center;
  font-size: 1.8rem;
  font-weight:bold;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.github-link {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.github-link svg {
  width: 35px;
  height: 35px;
  fill: #ffffff;
  transition: transform 0.2s;
}

.github-link:hover svg {
  transform: scale(1.1);
}

.grid {
  display:grid;
  gap:1.5rem;
  padding:2rem;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
}
.card {
  background:white;
  border-radius:15px;
  overflow:hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  cursor:pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  text-align:center;
  padding:1rem;
}
.card:hover { 
  transform: translateY(-8px); 
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}
.card img { 
  max-width:100px;
  margin:15px auto;
  display:block;
}

.card .title { 
  font-weight:700; 
  font-size:1.3rem; 
  margin-bottom:0.3rem; 
  color:#222;
}
.card .subtitle {
  font-weight:400;
  font-size:0.95rem;
  color:#666;
}

.modal {
  display:none;
  position:fixed;
  top:0; left:0;
  width:100%; height:100%;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.6);
  justify-content:center;
  align-items:center;
  padding:1rem;
}
.modal-content {
  background:white;
  border-radius:12px;
  max-width:750px;
  width:100%;
  padding:2rem;
  position:relative;
  max-height:90vh;
  overflow-y:auto;
  font-family: 'Ubuntu', sans-serif;
}
.close {
  position:absolute;
  top:10px; right:15px;
  font-size:28px;
  cursor:pointer;
}
.modal-header {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
}
.modal-header img { width:60px; height:60px; object-fit:contain;}
.modal-header h2 { margin:0; font-size:1.6rem;}

.download-full {
  display:flex; align-items:center; gap:0.5rem;
  cursor:pointer;
  color:white; border:none;
  padding:0.6rem 1.2rem; border-radius:6px;
  font-size:14px;
  margin-bottom:1.2rem;
  transition: background 0.3s;
}

.section { margin-bottom:1.5rem;}
.section h3 { margin-bottom:0.5rem; border-bottom:1px solid #ddd; padding-bottom:0.3rem;}

.logos-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(80px,1fr)); gap:0.5rem; user-select: none;}
.logo-card { background:#f0f0f0; border-radius:8px; padding:0.5rem; position:relative; text-align:center;}
.logo-card img { width:60px; height:60px; object-fit:contain; margin-bottom:0.3rem;}
.logo-card .download-icon { position:absolute; top:5px; right:5px; cursor:pointer; font-size:18px; color:#333;}

.font-list { list-style-type: disc; padding-left:20px; font-family: 'Ubuntu Mono', monospace; }
.font-list li { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.3rem; }
.font-list li .download-icon { cursor:pointer; font-size:18px; color:#333; }

.color-card { display:flex; align-items:center; gap:0.5rem; background:#f0f0f0; padding:0.3rem 0.5rem; border-radius:6px; width:fit-content; margin-bottom:0.3rem;}
.color-circle { width:20px; height:20px; border-radius:50%; border:1px solid #999;}
.color-card .copy-icon { cursor:pointer; font-size:18px; color:#333; margin-left:0.5rem; transition: transform 0.2s, color 0.2s;}
.color-card .copy-icon.copied { color:#4CAF50; transform: scale(1.2);}

.header-icon {
  height: 100px;
  width: auto;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4));
}

.material-icons {
  user-select: none;
}

h1 {
  user-select: none;
}