:root{
--dark:#024950;
--teal:#0fa4af;
}

body{
margin:0;
font-family:Segoe UI, sans-serif;
background:#f6f7f7;
color:#222;
}

a{text-decoration:none;color:inherit;}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:var(--dark);
color:white;
}

.nav ul{
list-style:none;
display:flex;
gap:20px;
}

.dropdown{position:relative;}
.dropdown-menu{
display:none;
position:absolute;
background:white;
color:black;
padding:10px;
border-radius:10px;
}
.dropdown:hover .dropdown-menu{display:block;}

section{
max-width:1100px;
margin:auto;
padding:60px 20px;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.card{
background:white;
padding:20px;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,.1);
transition:.3s;
}
.card:hover{transform:translateY(-5px);}

.btn{
background:var(--dark);
color:white;
padding:12px 25px;
border-radius:30px;
display:inline-block;
margin-top:10px;
}

.socials{
text-align:center;
}

.social-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:20px;
}

.social-grid a{
padding:18px;
color:white;
border-radius:12px;
font-weight:bold;
}

.etsy{background:#d77d49;}
.ig{background:#964734;}
.tt{background:#0fa4af;}
.pin{background:#024950;}
.lemon{background:#afdde5;color:#024950;}

/* TEXT HIGHLIGHT */
::selection{
background:#0fa4af;
color:white;
}

/* ========== BLACK DARK MODE ========== */

body.dark{
background:#000;
color:#fff;
}

/* ALL MAIN CONTAINERS */
body.dark .window,
body.dark .content,
body.dark .section,
body.dark .post,
body.dark .bundle-card,
body.dark .bundle-item,
body.dark .faq,
body.dark .value-box,
body.dark .cta{
background:#000;
color:#fff;
border-color:#ffb6c1;
}

/* HEADINGS */
body.dark h1,
body.dark h2,
body.dark h3{
color:#ffb6c1;
}

/* PARAGRAPH TEXT */
body.dark p{
color:#fff;
}

/* LINKS */
body.dark a{
color:#ffb6c1;
}

body.dark a:hover{
color:#fff;
}

/* NAV */
body.dark .nav a{
background:#000;
color:#ffb6c1;
border-color:#ffb6c1;
}

/* BUTTONS */
body.dark .btn,
body.dark .read{
background:#ffb6c1;
color:#000;
}

/* FAQ ANSWERS */
body.dark .answer{
color:#fff;
}

/* TITLE BAR */
body.dark .title-bar{
background:#000;
color:#ffb6c1;
border-bottom:2px solid #ffb6c1;
}

/* SELECTION */
body.dark ::selection{
background:#ffb6c1;
color:black;
}

footer{
background:var(--dark);
color:white;
text-align:center;
padding:30px;
}

.orders-box{
background:rgba(255,255,255,.2);
border:3px solid black;
box-shadow:6px 6px black;
padding:20px;
}

table{
width:100%;
border-collapse:collapse;
}

th,td{
border:2px solid black;
padding:8px;
background:rgba(255,255,255,.4);
}

/* LOGIN BOX */
.login-box{
max-width:420px;
margin:80px auto;
background:white;
border:3px solid black;
box-shadow:6px 6px black;
}

/* OTTER */
.otter{
width:45px !important;
max-width:45px !important;
display:block;
margin:0 auto 10px;
}

.email-text{
  word-break: break-all;
  font-size:14px;
  margin-bottom:10px;
}