@font-face {
  font-family: 'hnb2';
  src: url('../f/fnt/hnb2.woff2') format('woff2'),
       url('../f/fnt/hnb2.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'kb';
  src: url('../f/fnt/kb.woff2') format('woff2'),
       url('../f/fnt/kb.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Global Variables and Base Styles */
:root {
  --primary-color: #d990ff;
  --error-color: #ff2b13;
  --success-color: #b0ee00;
  --text-color: #010101;
  --font-main: 'hnb2', sans-serif;
  --font-secondary: 'kb', sans-serif;
  --transition-speed: 0.3s;
}

/* Global Base styles (from ccssss.css) */
body {
  background: #f0ffff;
  font-family: var(--font-main);
  color: var(--text-color);
  margin: 0;
  padding: 0;
}
header {
  background: var(--primary-color);
  padding: 1rem;
  text-align: center;
  color: #fff;
}

/* Example Card Styling (from ccssss.css) */
.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin: 0.5rem 0;
}

/* Public view */
#public-view {
  display: block;
  padding: 1rem;
}
#public-view main {
  display: flex;
  gap: 1rem; /* Adjust the space between columns as needed */
}
#public-view section {
  flex: 1;
}

/* Apply card styling to the posts and featured sections.
   If the global .card is defined and your HTML adds that class,
   you wouldn’t need to duplicate these rules. */
#public-posts, 
#public-featured {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

/* Admin Featured Area – remove any inline styles from index.html and use these rules */
#admin-featured-content,
#current-featured-preview {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-bottom: 10px; /* replaces the inline style in index.html */
}

/* (Optional) If you want the inner content to have some margin */
#public-posts > *, #public-featured > * {
  margin-bottom: 0.5rem;
}

/* Admin view and other styles remain unchanged */
#admin-view {
  display: none;
}
.griddy-admin {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1rem;
  padding: 1rem;
}
.blog-content, .admin-panel {
  background: #fff;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.content-container {
  margin-top: 1rem;
}
.admin-form, .featured-form {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}
.admin-form label,
.featured-form label {
  margin-top: 0.5rem;
}
.admin-form input,
.featured-form input,
.admin-form button,
.featured-form button {
  margin-top: 0.5rem;
  padding: 0.5rem;
}

/* Post list styling */
.post-item {
  border-bottom: 1px solid #ddd;
  padding: 0.5rem 0;
}
.post-actions button {
  margin-right: 0.5rem;
}

/* Modal Styling */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
}
.modal.active {
  display: flex;
}

/* Editor Styling */
.ql-toolbar {
  background: #fff;
  border-color: #000 !important;
}
.ql-editor {
  font-family: var(--font-main);
  min-height: 300px;
  background: #fff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #public-view main {
    flex-direction: column;
  }
  .griddy-admin {
    grid-template-columns: 1fr;
  }
  .ql-editor {
    font-size: 16px !important;
  }
}

/* Other global adjustments */
[data-admin-only] {
  display: none !important;
  opacity: 0.95;
  transition: opacity var(--transition-speed);
}
button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}
footer
{
  background:transparent;
  border: 0; 
  box-shadow:#b0ee0022 0 0 3px;
width:33%;
height:auto;
padding-top:0.5rem;
padding-bottom:1.5rem;
margin: 1rem auto;
vertical-align:middle;
border-radius: 50% 50% 50% 50% ;
opacity:0.3666;

}

h2:nth-of-type(1) {
  color: #ff2b13;
}
h2:nth-of-type(2) {
  color: #b0ee00;
}
h2:nth-of-type(3) {
  color: #d990ff;
}
h2:nth-of-type(4) {
  color: #ff9900;
}
h2:nth-of-type(5) {
  color: #00bfff;
}
h2:nth-of-type(6) {
  color: #ff00ff;
}
h2:nth-of-type(7) {
  color: #00ff00;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    overflow: auto;
}

.modal.active {
    display: flex;
}

.modal-content {
    position: relative;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    margin: 20px;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8rem;
    cursor: pointer;
    color: #ff4444;
    transition: color 0.2s;
}

.close-button:hover {
    color: #cc0000;
}
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    overflow: auto;
}

.modal.active {
    display: flex;
}

.modal-content {
    position: relative;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    margin: 20px;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.8rem;
    cursor: pointer;
    color: #ff4444;
    transition: color 0.2s;
}

.close-button:hover {
    color: #cc0000;
}