@font-face { font-family: 'sniglet'; src:url('../fonts/Sniglet-Regular.ttf'); }
@font-face { font-family: 'quicksand'; src:url('../fonts/Quicksand-Regular.ttf'); }

:root {
    --main-desktop-width: 1200px;
    --ui-blue: #016a80;
    --ui-lblue: #c0ecf4;
    --nav-h: 50px;
    --gap: 14px;
    --submenu-offset: 0px; /* space below the top bar */
    --radius: 10px;
    --dur: 160ms;
    --e: cubic-bezier(.2,.8,.2,1);
    --muted:#9aa4b2;
    --panel:#151922;
}

h1, h2, h3, h4, button { font-family:'sniglet'; }
h1 { font-size:1.5em; }
input::placeholder { font-style: italic; }
a { text-decoration: none; font-weight:bold; }
body, html { margin:0; padding:0; }
body {  font-family:'quicksand' }
.center { text-align: center; }
.bold { font-weight:bold; }
.justify { text-align:justify; }
.none { display:none !important; }

.home-top { background: #5cb95f; width:100%; height:728px; overflow:hidden; }
.char-top { background: #29adaf; width:100%; overflow:hidden; }
.home-body0 { background:#5cb95f url('../imgs/home-grass-bg.jpg') repeat center; }
.home-body1 { background:#29adaf url('../characters/imgs/bg.jpg') repeat center; }

.button { background:#a6d5ff; color:var(--ui-blue); font-size:30px; border:0; border-radius:10px; 
    padding:5px 25px 5px 25px; cursor:pointer; font-family:'sniglet'; user-select: none; }
.button:hover { background:white; color:var(--ui-blue); outline:1px solid var(--ui-blue); }

#animation_container { width:281px; height:296px; position:absolute; top:181px; left:50%; transform:translateX(-540px); }
#canvas { width:281px; height:296px; position: absolute; display: block; }
#dom_overlay_container { pointer-events:none; overflow:hidden; width:281px; height:296px; position: absolute; left: 0px; top: 0px; display: block; }
.home-bubble { position:absolute; transform:translate(-79px,-76px); z-index:2; display:block; 
  cursor:pointer; max-width:20%; }

.main-hero-img { display:block; width:2100px; height:1061px; position:relative; top:-260px; left:50%; transform:translateX(-50%); }
.char-hero-img { display:block; position:relative; left:50%; transform:translateX(-50%); max-width:160%; }
.main-holder { max-width:var(--main-desktop-width); margin:0 auto 0 auto; width:calc(100% - 80px); }
.char-top-fix { margin-top:-70px; position:relative; }
.main-row { display:flex; gap:20px; justify-content: space-between; flex-wrap:nowrap; align-items:stretch; width:100%; }
.main-single { display:flex; gap:20px; justify-content: space-between; align-items:stretch; width:100%; }
.main-box { border:0; border-radius:10px; background:white; padding:30px; position:relative;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); margin:0 auto 0 auto; }
.home-about { background: #f6f195; flex:0 1 750px; }
.home-about-title { margin-top:30px; text-align:center; }
.home-about-emblem { margin:-60px 30px 0 0; float:left; max-width:60vw; width:50%; }
.home-box-img { position:absolute; transform: translate(-50%, -50%); pointer-events:none; z-index:1; }
.home-box-star { 
    position:absolute;
    width:28px; height:28px;
    transform:translate(-50%,-50%) rotate(var(--rot)) scale(var(--scale));
    filter: brightness(var(--tw)) drop-shadow(0 0 calc(var(--tw)*4px) rgba(255,255,200,0.7));    
    pointer-events:none;

    --spin-burst-dur: 6s;
    --pulse-dur: 2s;
    --twinkle-dur: 1.8s;
    --twinkle-delay: 0s;

    animation:
      spin-burst var(--spin-burst-dur) linear infinite,
      pulse var(--pulse-dur) ease-in-out infinite,
      twinkle var(--twinkle-dur) ease-in-out var(--twinkle-delay) infinite;
}
@keyframes spin-burst {
  0%   { --rot: 0deg; }
  20%  { --rot: 360deg; } /* one spin */
  50%  { --rot: 360deg; } /* pause */
  100% { --rot: 360deg; }
}

@keyframes pulse { 0%,100% { --scale:1.0; } 50% { --scale:1.05; } }
@keyframes twinkle { 
0%,100% { --tw: 1.10; }
50%     { --tw: 1.15; }
}
@property --rot {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
@property --scale {
syntax: '<number>';
initial-value: 1;
inherits: false;
}
@property --tw {
syntax: '<number>';
initial-value: 1;
inherits: false;
}


.home-box-star1 { width:86px; height:89px; top:5%; right:-25px; --spin-burst-dur:6s; --twinkle-delay:.2s; }
.home-box-star2 { width:57px; height:57px; top:-1%; right:92px; --spin-burst-dur:8s; --twinkle-delay:.7s; }
.home-callout { flex: 0 1 400px; }
.home-box-tab1 { width:63px; height:35px; top:0%; left:20%; }
.home-box-tab2 { width:64px; height:40px; top:0%; right:0%; }
.home-more-button { position:relative; z-index:2; }
.home-box-ship { width:33%; max-width:128px; height:auto; bottom:-32%; right:-20%; }
.home-clouds { margin:40px auto 20px auto; color: var(--ui-blue); line-height:120px;
    background-image:url('../imgs/home-clouds-end.png'), url('../imgs/home-clouds-end.png'), url('../imgs/home-clouds-middle.png');
    background-position:left center, right center, center 30%;
    background-size:auto, auto, 84% 80%;
    background-repeat:no-repeat, no-repeat, no-repeat;
    text-align:center; height:120px; width:100%; font-family:'sniglet'; font-size:48px; }
.home-char { flex:0 1 360px; padding:0; max-width:360px; }
.home-char-image-bg { width:100%; height:300px; max-width:360px; background-position: center center; border-radius:10px 10px 0 0; }
.home-char-image { margin:auto; display:block; max-height:100%; transform:translateY(100%); opacity:0; }
.home-char-info { margin:20px; } 
.home-char-info > h2 { text-align: center; }
.bounce-in { animation: bounceIn 1s ease forwards; }
@keyframes bounceIn { 
  0% { transform: translateY(100%) scale(0.5); display:block; margin:auto; opacity: 0; }
  60% { transform: translateY(0%) scale(1.0); display:block; margin:auto; opacity: 1; }
  80% { transform: translateY(2%) scale(1.02); display:block; margin:auto; }
  100% { transform: translateY(0) scale(1); opacity:1; display:block; margin:auto; }
}

.main-youtube { width: 100%; aspect-ratio: 16 / 9; border-radius:10px; }
.home-vid-box { width:100%; max-width:1000px; padding-top:0px; }
.home-spacer { height:50px; }
.home-couch-holder { display:flex; min-width:60%; padding-top:0px; }
.home-couch { margin:-135px 0 -90px -96px; width:388px; height:388px; }
.home-couch-logos { display:flex; justify-content: center; align-items:center; gap:30px; margin:0px 50px 0px 50px; flex-wrap: wrap;  }
.home-where-column { width:100%; }

.char-hero-toopy { position:absolute; top:min(35vw, 450px); left:6vw; width:min(13vw, 176px); }
.char-hero-binoo { position:absolute; top:min(37vw, 473px); right:44vw; width:min(8vw, 111px); transform:scaleX(-1); }
.char-hero-chest { position:absolute; top:min(33vw, 435px); right:2vw; width:min(25vw, 300px); }
.char-float { animation: slightFloat 5.0s ease-in-out infinite alternate; }
.char-float2 { animation: slightFloat2 4.8s ease-in-out infinite alternate; }
@keyframes slightFloat { 0% { transform: translateY(0); /* Start position */ }
  100% { transform: translateY(-10px); /* Move up 10 pixels */ }}
@keyframes slightFloat2 { 0% { transform: translateY(0) scaleX(-1); /* Start position */ }
  100% { transform: translateY(-10px) scaleX(-1); /* Move up 10 pixels */ }}
.char-items { display:flex; flex-direction:row; flex-wrap:wrap; margin:0 auto 0 auto; justify-content:space-around; }
.char-item { display:flex;  justify-content:center; margin-bottom:30px; }
.char-item-group { display:flex; justify-content:center; align-items:center; position:absolute; width:380px; height:425px; }
.char-item-bg { position:absolute; width:360px; }
.char-item-frame { position:absolute; width:380px; height:425px; }
.char-item-char { position:absolute; }
.char-item-post { background:#f6f195; border-radius:10px; width:320px; height:140px; margin-top:440px; 
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); text-align:center; padding:0 20px 20px 20px; }
.char-item-c {  background:white; border-radius:10px; margin-bottom:50px; display:flex; 
  justify-content:center; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); width:338px; height:466px; }
.char-tab-a { width:63px; height:35px; position:absolute; margin:-20px 224px 0 0; }
.char-tab-b { width:64px; height:40px; position:absolute; margin:-20px 0 0 225px; }
.char-item-group-c { height:324px; }
.char-item-bg-c { width:280px; height:240px; }
.char-item-post-c { width:320px; height:140px; margin-top:280px; text-align:center; }

.yt-play { position:absolute; width:calc(100% - 60px); cursor:pointer; }

.footer { color:white; }
.footer-top0 { background:url('../imgs/footer-grass.png'); height:38px;  }
.footer-top1 { background:url('../imgs/footer-curved.png'); height:38px; }
.footer-body0 { background:#2b732e; }
.footer-body1 { background:#006b7d; }
.footer-row { display:flex; justify-content: space-around; padding:50px 30px 30px 30px; gap:40px; }
.footer-holder { padding:20px; flex-basis:30%; }
.footer-social-items { display:flex; gap:20px; justify-content: center; align-items: center; }
.footer-social-item { transition: transform 0.3s ease;  }
.footer-social-item:hover { transform: scale(1.08); }
.footer-news-box { flex-basis:60%; background:#eafead; color:black; border-radius:10px; padding:20px; position:relative; margin-right:50px; }
.footer-news-wagon { position:absolute; right:20px; top:-46px; width:16vw; max-width:312px; min-width:200px; }
.footer-news-heading { width:50%; min-width:170px; }
.footer-news-email { margin:0px 0 20px 0; width:36%; height:24px; font-size:18px; min-width:250px; }
.mc-field-group { font-size:18px; }
#mce-responses { color:red; background:none; }
.footer-link { color:white; }
.footer-link:hover { text-decoration: underline;  }

#cookie-banner { position:fixed; bottom:0; left:0; right:0; background-color:white; z-index:99999;
  padding:0px 20px 20px 20px; font-size:24px; display:none; opacity:0.9; text-align:center; }
#cookie-settings { position:fixed; top:0; left:-320px; background-color:white; z-index:99999; opacity:0.9;
  height:100%; width:280px; padding:20px; display:none;
}
.cookie-x { float:right; }
#cookie-settings { font-size:18px; }
#ck-title { font-size:28px; }

.privacy-holder { background:#f6f195; top:150px; margin-bottom:200px; max-width:800px; }


@media (max-width: 1066px) {
  .main-hero-img { transform:translateX(-40%); }
  #animation_container { transform:translateX(-330px); }
}


@media (max-width: 961px) {
  .main-row-top { flex-direction:column; }
  .main-box-top { max-width:518px; }
  .main-box { flex:1 1 auto; width: calc(100% - 100px); }
  .home-box-ship { width:22%; right:-14%; bottom:-50%; }
  .footer-news-wagon { min-width:100px; width:34%; right:0px; top:-29px; } 
}


@media (max-width: 769px) {
    #animation_container { top:76px; transform:translateX(-295px) scale(0.38); }
    .main-hero-img { top:0px; width:800px; height:auto; transform:translateX(-50%); }
    .home-top { height:400px; }
    .main-holder { width:100%; }
    .main-row, .footer-row { flex-direction:column; }
    .main-box { flex:1 1 auto; width: calc(100% - 100px); }
    .footer-row { flex:1 1 auto; width: calc(100% - 20px); padding:0; }
    .footer-news-box { margin:20px 10px 20px 10px; }
    .home-about-emblem { width:65%; max-width:250px; float:none; margin:-13px auto 0 0px; display:block;  }
    .home-couch { display:none; }
    .home-box-ship { bottom:-17vw; }
    .home-vid-box, .home-couch-holder { margin-left:20px; margin-right:20px; }
}


/* If user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .star { animation: none; }
}