@font-face {
  font-family: "SpaceMono";
  src: url(fonts/SpaceMono-Regular.ttf) format("truetype");
}
@font-face {
  font-family: "SpaceMonoBold";
  src: url(fonts\SpaceMono-Bold.ttf) format("truetype");
  font-weight: normal;
}


html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.big-image{
  background-color: #50362f;
  display: inline-flex;
  width: auto;
  height: auto;
    padding: 0rem;
  margin: 1rem auto;
  box-shadow: 0 10px 20px 0 #5a4a3e;
   border: 4px solid #41382d;
      border-style: outset;
}


.two-column {
  display: flex;

}
.navbar-scrolled {

  background-color: #41382d;
     /*border-bottom: 4px solid #ecddcb;*/

}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  height: auto;
    margin-top: 90px;
    margin-bottom: 90px;
}
/* scrolling text*/


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}

.container {
display: flex;

}

img {
  max-width: 100%;
}

body {
  font-family: "SpaceMono";
  font-size: 16px;
  line-height: 1.5;
  color: #876436;
  background-color: #41382d;
  padding: 100px 50px;

  
}

h1 {
  text-align: center;
  margin-block-end: 2.5rem;
  font-family: "SpaceMono";

}

h3 {

  margin-block-end: 1rem;
  font-family: "SpaceMono";
  
}

.stock-ticker {
    font-family: "SpaceMono";
  font-size: 17px;
  padding-block: auto;
  border-block: 4px solid;
   color: #41382d;
  overflow: hidden;
  position: relative;
  user-select: none;
      font-weight: bold;
  

  --gap: 20px;
  display: flex;
  gap: var(--gap);
  background-color: #8b8952;
  
}

.stock-ticker ul {
  list-style: none;
  flex-shrink: 0;
  min-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  

  animation: scroll 20s linear infinite;

       
}

.stock-ticker:hover ul {
  /*animation-play-state: paused;*/
}

@keyframes scroll {
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

.stock-ticker ul:first-child {
background-color: #8b8952;
}

.stock-ticker ul:last-child {
background-color: #8b8952;
}

.stock-ticker .company,
.stock-ticker .price {
  font-weight: bold;
  color: #41382d;
}

.stock-ticker .price {
  margin-inline: 0px;
    font-weight: bold;
}

/*.stock-ticker .plus::before {
  content: "↑";
}

.stock-ticker .minus::before {
  content: "↓";
}*/

.stock-ticker .plus .change,
.stock-ticker .plus::before {
  color: #41382d;
}

.stock-ticker .minus .change,
.stock-ticker .minus::before {
  color: #41382d;
}





/* TAB */


body {
  font-family: "system-ui, sans-serif";
  font-size: 1rem;
  line-height: 1.7;
  color: #101010;
  background-color: #41382d;
  border-block-start: 10px solid #f1d23a;
  padding: 3rem 1rem;
}


h2 {
  font-family: "SpaceMono";
  font-size: 1.125rem;
  font-weight: 600;
  margin-block-end: 0.5em;
  color: #846235;
}

p:not(:last-child) {
  margin-block-end: 0em;
}

.widget {
  width: auto;
  max-width: autopx;
  padding: 1rem;
  margin: 1rem 1rem;
  border-radius: 0rem;
  background-color: #876436;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.025);
   border: 4px solid #41382d;
   border-style: outset;
}

.widget-black {
  width: auto;
  max-width: autopx;
  padding: 1rem;
  margin: 1rem 1rem;
  border-radius: 0rem;
  background-color: #f00909;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.025);
   border: 4px solid #41382d;
   border-style: outset;

   
}

.widget-blue {
  width: auto;
  max-width: autopx;
  padding: 1rem;
  margin: 1rem 1rem;
  border-radius: 0rem;
  background-color: #808296;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.025);
   border: 4px solid #41382d;
   border-style: outset;
}

.widget-green {
  width: auto;
  max-width: autopx;
  padding: 1rem;
  margin: 1rem 1rem;
  border-radius: 0rem;
  background-color: #8b8952;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.025);
   border: 4px solid #41382d;
   border-style: outset;
}
.profile {
  width: 800vw;
  max-width: 300px;
  padding: 0rem;
  margin: 1rem auto;
  border-radius: 0rem;

  box-shadow: 0 10px 20px 0 #5a4a3e;
   border: 4px solid #41382d;
      border-style: outset;
}

.tabs {
  --tab-count: 3;
  --active: 0;

  position: relative;
  isolation: isolate;
  display: flex;
  height: 3.5rem;
  border-block-end: 3px solid #5a4a3e;
}

.tabs input {
  display: none;
}

.tabs label {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  transition: color 0.5s ease-in-out;
}

.tabs input:checked + label {
  color: #876436;
}

.tabs::after {
  pointer-events: none;
  position: absolute;
  content: "";
  z-index: -1;
  /* inset: 0; */
  inset: 0 0 -1px;
  /* width: 100%; */
  /* width: calc((100% / 3) - 2px); */
  width: calc((100% / var(--tab-count)) - 2px);
  border-radius: 0.5rem 0.5rem 0 0;
  border: 1px solid #e9ebec;
  border-block-end: none;
  background-color: #5a4a3e;

  /*
    1st = 0 * 100% = 0%
    2nd = 1 * 100% = 100%
    3rd = 2 * 100% = 200%
  */
  translate: calc(var(--active) * 100%);
  transition: translate 0.5s ease-in-out;
}

.tabs:has(:checked:nth-of-type(1)) {
  --active: 0;
}

.tabs:has(:checked:nth-of-type(2)) {
  --active: 1;
}

.tabs:has(:checked:nth-of-type(3)) {
  --active: 2;
}

.tab-content {
  padding: 1rem;
}

[class^="tab-content-"] {
  display: none;
}

.widget:has(:checked:nth-of-type(1)) .tab-content-1,
.widget:has(:checked:nth-of-type(2)) .tab-content-2,
.widget:has(:checked:nth-of-type(3)) .tab-content-3 {
  display: block;
}


/* box */


body {
  font-family: "SpaceMono";
  font-size: 16px;
  line-height: 1.5;
  color: #dadada;
  background-color: #ffffff;
  padding: 4rem 5rem;
}

.page-width {
  max-width: 10px;
  margin-inline: auto;
}



.content-boxes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .content-boxes {
    grid-template-columns: repeat(3, 1fr);
  }
}

.content-box {
  position: relative;
  padding: 2rem;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
     border: 4px solid #41382d;
     border-style: outset;
}

.content-box__icon {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.content-box__title {
  position: relative;
  font-size: 1.25rem;
  line-height: 1.3;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}

.content-box__title::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 30%;
  height: 1px;
  background-color: #000000;
}

.content-box__cta {
  margin-block: 1.5rem 0.5rem;
}

.content-box__cta a {
  font-size: 0.9rem;
  font-weight: bold;
  color: currentColor;
  text-decoration: none;
  border: 1px solid;
  padding: 0.65em 1em;
}

.content-box__cta a:hover,
.content-box__cta a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0;
}

.content-box__overlay {
  position: absolute;
  content: "";
  inset: 0;
  z-index: -1;

  background: linear-gradient(
      -10deg,
      #8b8952 15%,
      #8b8952 100%
    ),
    url("img/BACKGROUND.gif");
  background-size: cover;

  transform: translateY(-100%);
  transition: 0.5s ease-in-out;
}

.content-box:hover .content-box__overlay,
.content-box:focus-within .content-box__overlay {
  transform: translateY(0);
}

:is(.content-box__icon, .content-box__title, .content-box__desc, .content-box__cta
    a) {
  transition: color 0.5s ease;
}

:is(.content-box:hover, .content-box:focus-within)
  :is(.content-box__icon, .content-box__title, .content-box__desc, .content-box__cta
    a) {
  color: #41382d;
}



.full-bleed {
  font-size: 1.5rem;
  line-height: 1.25;
    overflow-x : hidden;
    position: relative;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(to bottom, #41382d, #41382d);
  padding: 2rem;
  margin-block-end: 2rem;
  margin: 20px -300px;




}

.icon {
  display: block;
  font-size: 3rem;
}

/*SOSIAL*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  padding: 3rem;
  color: #070707;
  background: fixed linear-gradient(transparent, #fff 90%),
    fixed
      repeating-linear-gradient(
        #efefef,
        #efefef 1px,
        transparent 1px,
        transparent 40px
      ),
    fixed
      repeating-linear-gradient(
        to right,
        #efefef,
        #efefef 1px,
        transparent 1px,
        transparent 40px
      )
      white;
}



.social {
  display: flex;
  justify-content: center;
  flex-flow: wrap;
  gap: 1rem;
  list-style: none;
}

.social li {
  position: relative;
  flex-basis: 4.5rem;
}

.social li::after {
  position: absolute;
  /* content: "Tooltip"; */
  content: attr(data-tooltip);
  inset: -45% auto auto 50%;
  z-index: -1;
  translate: -50%;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  color: #fff;
  /* background: #070707; */
  background: var(--bg, #070707);
  border-radius: 0.25rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* transition: all 0.3s ease-in-out; */
  transition: inset 0.4s cubic-bezier(0.47, 2, 0.41, 1.5),
    visibility 0.3s ease-in-out, opacity 0.2s ease-in-out;
}

.social li:has(a:hover, a:focus-visible)::after {
  opacity: 1;
  visibility: visible;
  inset-block-start: -60%;
}

.social a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  font-size: 1.75rem;
  color: #070707;
  border: 4px solid;
  border-radius: 100%;
  text-decoration: none;
  outline: none;
  overflow: hidden;
  transition: color 0.3s ease-in-out;
}

.social a > i {
  position: relative;
  z-index: 1;
}

.social a::after {
  position: absolute;
  content: "";
  inset: 100% 0 0;
  /* background: #070707; */
  background: var(--bg, #070707);
  pointer-events: none;
  transition: inset 0.3s ease-in-out;
}

.social a:hover,
.social a:focus-visible {
  color: #fff;
}

.social a:hover::after,
.social a:focus-visible::after {
  inset-block-start: 0;
}