:root {
   --primary-color: hsl(190, 100%, 50%);
   --secondary-color: hsl(192, 100%, 4%);
   --black-color: #333;
   --white-color: white;
   --gray: #666;
   --accent-color: #0ea5e9;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   transition: all 0.3s ease;
}

body {
   min-height: 100vh;
   /* padding: 20px; */
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   /* background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); */
}

nav,
.bookmarkFolder {
   width: 3rem;
   height: 3rem;
   background: var(--secondary-color);
   margin: 10px;
   border-radius: 100%;
   aspect-ratio: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--white-color);
   font-size: 1.5rem;
   cursor: pointer;
   padding: 10px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 101;
   transition: all 300ms;
   outline: none;
   border: none;

   &:hover {
      background: var(--accent-color);
   }
}

.header {
   background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
   padding: 30px;
   text-align: center;
   color: var(--white-color);
}

.header h1 {
   font-size: 2.5rem;
   font-weight: 700;
}

.header p {
   opacity: 0.9;
   font-size: 1.1rem;
}

.container {
   max-width: 90%;
   margin: 0 auto;
   /* background: var(--white-color);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); */
   padding-top: 20px;
   display: flex;
   position: relative;
   flex-wrap: wrap;
   row-gap: 20px;
   /* border: 2px solid red; */
}

.editor {
   flex: 2;
   width: 100%;
   /* border: 2px solid orange; */
}

.editor-head,
.editor-head-first {
   width: 100%;
   background: #0ea5e9;
   cursor: pointer;
   padding: 10px;
   position: relative;
   font-size: 1.1rem;
   font-weight: 500;
   text-transform: capitalize;
}

.editor-head::after {
   content: var(--before-content, '\002B');
   position: absolute;
   right: 3%;
   top: 10%;
   font-size: 1.5rem;
}

.editor-container {
   background-color: #f1f5f7;
   padding: 20px;
   /* border: #0ea5e9 2px solid; */
   overflow: hidden;
   grid-template-columns: auto 1fr;
   grid-gap: 15px;
   align-items: center;
   display: grid;
}

textarea,
input,
select,
option {
   field-sizing: content;
   resize: none;
   padding: 10px;
}

input[type='file'] {
   padding: 0;
   flex: 1;
   max-width: 200px;
}

input[type='color'] {
   padding: 0;
}

.img-control {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px;
}

.size-control {
   display: grid;
   gap: 10px;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;

   @media (max-width: 768px) {
      & {
         display: contents;
      }
   }
}

.qrcode-container {
   flex: 1;
   position: sticky;
   top: 10%;
   /* border: 2px solid red; */
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 10px;
   width: 100%;
}

canvas {
   width: 100%;
   height: 300px !important;
   /* object-position: center;
   object-fit: cover; */
}

option {
   background: #333;
}

.btn {
   background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
   border: none;
   outline: none;
   padding: 5px;
   /* font-size: 0.9rem !important; */
   color: var(--white-color);
   cursor: pointer;
   transition: all 0.3s ease;

   &:hover {
      box-shadow: 0 5px 15px rgba(79, 172, 254, 0.3);
   }
}

/* Utility classes for JavaScript */
.hidden {
   display: none;
}

.show {
   display: block;
   animation: fadeIn 0.5s ease-in;
}