@charset "UTF-8";
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "Source Sans Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  background-color: var(--dark);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  height: 120vmax;
}
html::before {
  content: "";
}

body {
  margin-top: 66px;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #FFD700 !important;
  text-align: left;
  background-color: transparent;
}
.lautan {
  background-image: url(../img/body.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 120vmax;
}
.lautan::before {
  content: "";
}
#sidebar {
  position: fixed;
  top: 0;
  left: -100vw;
  height: 100vh;
  width: 320px;
  max-width: 100vw;
  z-index: 1999;
  background: #222;
  transition: left 0.3s;
  display: block;
}
#sidebar.sidebar-open {
  left: 0 !important;
  z-index: 2000;
  box-shadow: 0 0 18px #FFD700;
}
@media (max-width: 1200px) {
  #sidebar {
    width: 380px;
    max-width: 95vw;
  }
}
@media (max-width: 600px) {
  #sidebar {
    width: 98vw;
    max-width: 100vw;
  }
}