@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700;800&display=swap');

:root {
  --color-black: #000;
  --color-gray: #f0f0f0;
  --color-white: #fff;
  --color-blue: #1b62b9;
  --color-dark-blue: #144c90;
  --color-red: #e63838;
  --color-dark-red: #a22929;
  --color-yellow: #ffea64;
  --color-dark-yellow: #fddd50;
  --color-peach: #fc9;
  --font-family: 'Rubik', sans-serif;
  --font-size-h1: 7.5rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.875rem;
  --font-size-h4: 1.375rem;
  --font-size-text: 1.125rem;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --header-text-shadow: -1px -1px 0 var(--color-black), 0 -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px  0 0 var(--color-black), 1px  0 0 var(--color-black), -1px  1px 0 var(--color-black), 0  1px 0 var(--color-black), 1px  1px 0 var(--color-black), -2px -2px 0 var(--color-black), -1px -2px 0 var(--color-black), 0 -2px 0 var(--color-black), 1px -2px 0 var(--color-black), 2px -2px 0 var(--color-black), 2px -1px 0 var(--color-black), 2px  0 0 var(--color-black), 2px  1px 0 var(--color-black), 2px  2px 0 var(--color-black), 1px  2px 0 var(--color-black), 0  2px 0 var(--color-black), -1px  2px 0 var(--color-black), -2px  2px 0 var(--color-black), -2px  1px 0 var(--color-black), -2px  0 0 var(--color-black), -2px -1px 0 var(--color-black), -3px -3px 0 var(--color-black), -2px -3px 0 var(--color-black), 0 -3px 0 var(--color-black), 2px -3px 0 var(--color-black), 3px -3px 0 var(--color-black), 3px -2px 0 var(--color-black), 3px  0 0 var(--color-black), 3px  2px 0 var(--color-black), 3px  3px 0 var(--color-black), 2px  3px 0 var(--color-black), 0  3px 0 var(--color-black), -2px  3px 0 var(--color-black), -3px  3px 0 var(--color-black), -3px  2px 0 var(--color-black), -3px  0 0 var(--color-black), -3px -2px 0 var(--color-black), -3px -3px 0 var(--color-black), -1px -3px 0 var(--color-black), 0 -3px 0 var(--color-black), 1px -3px 0 var(--color-black), 3px -3px 0 var(--color-black), 3px -1px 0 var(--color-black), 3px  0 0 var(--color-black), 3px  1px 0 var(--color-black), 3px  3px 0 var(--color-black), 1px  3px 0 var(--color-black), 0  3px 0 var(--color-black), -1px  3px 0 var(--color-black), -3px  3px 0 var(--color-black), -3px  1px 0 var(--color-black), -3px  0 0 var(--color-black), -3px -1px 0 var(--color-black), -3px 4px 0 var(--color-black), 0px 4px 0 var(--color-black), 3px 4px 0 var(--color-black), -3px 5px 0 var(--color-black), 0px 5px 0 var(--color-black), 3px 5px 0 var(--color-black), -3px 6px 0 var(--color-black), 0px 6px 0 var(--color-black), 3px 6px 0 var(--color-black), -3px 7px 0 var(--color-black), 0px 7px 0 var(--color-black), 3px 7px 0 var(--color-black), -3px 8px 0 var(--color-black), 0px 8px 0 var(--color-black), 3px 8px 0 var(--color-black), -3px 9px 0 var(--color-black), 0px 9px 0 var(--color-black), 3px 9px 0 var(--color-black), -3px 10px 0 var(--color-black), 0px 10px 0 var(--color-black), 3px 10px 0 var(--color-black), -3px 11px 0 var(--color-black), 0px 11px 0 var(--color-black), 3px 11px 0 var(--color-black), -3px 12px 0 var(--color-black), 0px 12px 0 var(--color-black), 3px 12px 0 var(--color-black), -3px 13px 0 var(--color-black), 0px 13px 0 var(--color-black), 3px 13px 0 var(--color-black), -3px 14px 0 var(--color-black), 0px 14px 0 var(--color-black), 3px 14px 0 var(--color-black), -3px 15px 0 var(--color-black), 0px 15px 0 var(--color-black), 3px 15px 0 var(--color-black), -3px 16px 0 var(--color-black), 0px 16px 0 var(--color-black), 3px 16px 0 var(--color-black), -3px 17px 0 var(--color-black), 0px 17px 0 var(--color-black), 3px 17px 0 var(--color-black), -3px 18px 0 var(--color-black), 0px 18px 0 var(--color-black), 3px 18px 0 var(--color-black);
  --link-text-shadow: -1px -1px 0 var(--color-black), 0 -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px  0 0 var(--color-black), 1px  0 0 var(--color-black), -1px  1px 0 var(--color-black), 0  1px 0 var(--color-black), 1px  1px 0 var(--color-black), -2px -2px 0 var(--color-black), -1px -2px 0 var(--color-black), 0 -2px 0 var(--color-black), 1px -2px 0 var(--color-black), 2px -2px 0 var(--color-black), 2px -1px 0 var(--color-black), 2px  0 0 var(--color-black), 2px  1px 0 var(--color-black), 2px  2px 0 var(--color-black), 1px  2px 0 var(--color-black), 0  2px 0 var(--color-black), -1px  2px 0 var(--color-black), -2px  2px 0 var(--color-black), -2px  1px 0 var(--color-black), -2px  0 0 var(--color-black), -2px -1px 0 var(--color-black);
}

/*
 * [Modified] Modern CSS Reset
 * @link https://github.com/hankchizljaw/modern-css-reset
*/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.logo-pura{
  width: 30%;
}

.logo-hut{
  width: 25%;
}

.logo-anniv{
  width: 50%;
}

html {
  overflow-x: hidden;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  font-size: 100%;
  line-height: 1.5;
  text-rendering: optimizeSpeed;
  overflow-x: hidden;
  background-image: url('bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/* Make images easier to work with */
img {
  display: block;
  max-width: 100%;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  color: var(--color-black);
  font-family: var(--font-family);
  font-size: var(--font-size-text);
  font-weight: var(--font-weight-regular);
}

:focus {
  outline: 2px dotted;
  outline-offset: 0.125rem;
}

h1,
h2,
h3,
h4 {
  margin-bottom: 0.65em;
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  text-transform: uppercase;
}

h1 {
  font-size: var(--font-size-h1);
  font-size: clamp(4.25rem, 10vw, var(--font-size-h1));
  color: var(--color-black);
}

h2,
.profile h4 {
  font-size: var(--font-size-h2);
  font-size: clamp(2.375rem, 5vw, var(--font-size-h2));
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

p {
  margin: 0 0 1rem;
}

strong {
  font-weight: var(--font-weight-bold);
}

a {
  position: relative;
  color: var(--color-black);
  font-weight: var(--font-weight-extrabold);
  text-decoration-thickness: 0.125em;
  text-underline-offset: 0.0875em;
  text-transform: uppercase;
}

blockquote {
  position: relative;
  margin: 1rem 0 2rem;
  padding: 0;
  color: var(--color-black);
  border: 0.25rem solid var(--color-black);
  background-color: var(--color-white);
}

blockquote p {
  position: relative;
  margin-bottom: 0;
  padding: 2.5rem 1rem 1.5rem;
  font-size: var(--font-size-h4);
}

blockquote p strong {
  position: absolute;
  top: -0.25rem;
  left: -0.25rem;
  padding: 0.25em 1em;
  color: var(--color-white);
  font-size: 1rem;
  text-transform: uppercase;
  background-color: var(--color-black);
}

main h2,
.profile h4,
#styles h2 {
  align-self: center;
  margin-top: -3.75rem;
  padding: 0.25em 0.5em;
  color: var(--color-white);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-black);
  transform: skewX(-10deg) rotate(-2deg);
  text-align: center;
}

article .container > ul:not(.features) > li + li,
article .container > ol > li + li {
  margin-top: 1rem;
}

article .container * + h2 {
  margin-top: 4rem;
}

nav ul,
article .container,
aside .container {
  box-shadow: 0.5rem 0.5rem rgba(132, 81, 61, 0.35);
}

article .container,
aside .container {
  padding: 1.625rem 1.5rem 2rem;
  border: 0.25rem solid var(--color-black);
  background-color: var(--color-white);
}

@media (min-width: 540px) {
  article .container,
  aside .container {
    padding: 1.75rem 2.5rem 2.5rem;
  }
}

header a:not([class^="link"]):hover,
footer a:not([class^="link"]):hover {
  text-decoration-thickness: 0.1875em;
}

main a:not([class^="link"]):hover,
aside a:not([class^="link"]):hover {
  background-color: var(--color-peach);
}

aside .container {
  display: grid;
  justify-items: center;
}

header,
nav,
article,
aside,
.page-footer {
  width: 100%;
  max-width: 65rem;
  margin: 0 auto;
  padding: 0.5rem;
}

@media (min-width: 540px) {
  header,
  nav,
  article,
  aside,
  .page-footer {
    padding: 1rem;
  }
}

main {
  padding-top: 6rem;
}

main:focus {
  outline: none;
}

main .container h3 {
  margin-top: 2rem;
}

main article + article,
section + section,
aside,
aside + aside {
  margin-top: 4rem;
}

article section {
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
}

header {
  padding-bottom: 4rem;
  color: var(--color-black);
  text-align: center;
}

header h1 {
  position: relative;
  margin-bottom: 0;
  padding: 2rem 0 2.5rem;
  color: var(--color-white);
  font-style: italic;
  letter-spacing: -0.05em;
  text-shadow: var(--header-text-shadow);
  white-space: pre-wrap;
}

@media (min-width: 600px) {
  header h1 {
    padding: 0.5em 0 3.25rem;
  }
}

header h2 {
  max-width: 30ch;
  font-size: clamp(1.875rem, 4vw, var(--font-size-h2));
  font-weight: var(--font-weight-semibold);
  margin: auto auto 0.65em;
}

header p {
  margin-bottom: 2rem;
}

nav ul {
  margin: 0;
  padding: 0.125rem;
  list-style: none;
  font-size: 1.25rem;
  border: 0.25rem solid var(--color-black);
  background-color: var(--color-red);
}

@media (min-width: 540px) {
  nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

nav ul li {
  margin: 0.375rem 0.375rem 0.5rem;
  text-align: center;
}

@media (min-width: 540px) {
  nav ul li {
    flex: 1 0 45%;
  }
}

@media (min-width: 600px) {
  nav ul li {
    flex: 1 0 30%;
  }
}

@media (min-width: 940px) {
  nav ul li {
    flex: 1 0 auto;
  }
}

nav ul a {
  position: relative;
  display: block;
  padding: 0.5em;
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: var(--font-weight-semibold);
  border: 0.1875rem solid var(--color-red);
  border-radius: 2em;
  text-decoration: none;
}

nav ul a:hover {
  background-color: var(--color-dark-red);
  border-color: var(--color-black);
}

nav ul a:focus {
  background-color: var(--color-dark-red);
}

#about section:nth-child(2) {
  margin-top: 6rem;
}

#about section:nth-child(2) p:nth-of-type(2) {
  align-self: center;
  margin-top: 2rem;
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

#about section:nth-child(2) ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1rem 0 2rem;
  padding: 0;
  list-style: none;
}

#about section:nth-child(2) ul li {
  position: relative;
  margin: 0.25em 0.25em 1em;
  padding: 0.5em 0.75em;
  color: var(--color-white);
  border-radius: 0.5em;
  background-color: var(--color-black);
}

#about section:nth-child(2) ul li::before {
  position: absolute;
  content: '';
  left: 0.75em;
  bottom: -0.5em;
  width: 0;
  height: 0;
  border-top: 5px solid var(--color-black);
  border-left: 15px solid var(--color-black);
  border-right: 5px solid transparent;
  border-bottom: 10px solid transparent;
}

#guidelines p:nth-of-type(1),
#contribute p:nth-of-type(1) {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
}

#guidelines .container > a {
  align-self: center;
  margin-top: 1rem;
}

#contribute section {
  padding-bottom: 0;
  border-bottom: none;
  background-color: var(--color-white);
}

#contribute section:nth-child(2) {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}

#contribute ol {
  position: relative;
  counter-reset: contribute-counter;
  padding-left: 0;
  list-style: none;
}

#contribute ol li {
  position: relative;
  counter-increment: contribute-counter;
  padding-left: 3rem;
}

#contribute ol li::before {
  position: absolute;
  content: counter(contribute-counter);
  top: -0.1875rem;
  left: 0;
  width: 1.5em;
  height: 1.5em;
  color: var(--color-yellow);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  border-radius: 50%;
  background-color: var(--color-black);
  text-align: center;
}

#files .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: none;
}

#files .container h3 {
  min-width: 100%;
}

#files .container a {
  font-size: 1.5rem;
}

#files .container a,
.page-footer .container ul li {
  margin: 0.5rem;
}

.features {
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.features li {
  position: relative;
  padding: 1rem 0;
  text-align: center;
}

.features li > span {
  display: block;
}

.features li > span span {
  display: block;
}

.features li > span span:nth-child(2) {
  position: relative;
}

.profile ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.profile ul li {
  display: flex;
  padding: 0.45em;
}

.profile ul li span:nth-child(1) {
  margin-right: 0.5em;
  font-weight: var(--font-weight-bold);
}

.page-footer {
  position: relative;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.page-footer .container > :last-child {
  margin-bottom: 0;
}

.page-footer p {
  max-width: 75ch;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.page-footer p a {
  color: inherit;
}

.page-footer ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.skip-link {
  position: absolute;
  top: auto;
  left: -10000px;
  width: 1px;
  height: 1px;
  color: var(--color-white);
  font-size: 1.125rem;
  background-color: var(--color-blue);
  text-decoration: none;
  overflow: hidden;
}

.skip-link:focus {
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  margin: 0.5em;
  color: var(--color-gray);
}

.skip-link,
nav ul,
[class^="link"],
.profile .container > a {
  border-radius: 2em;
  box-shadow: inset 0.1875rem 0.1875rem var(--color-white), inset -0.1875rem -0.1875rem var(--color-black);
}

.skip-link,
nav ul a,
[class^="link"],
.profile .container > a {
  font-size: 1.25rem;
  text-shadow: var(--link-text-shadow);
}

[class^="link"],
.profile .container > a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  background-color: var(--color-blue);
}

.skip-link:focus,
[class^="link"],
.profile .container > a {
  padding: 0.875em 1em;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border: 0.1875rem solid var(--color-black);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.skip-link:focus,
[class^="link"]:hover,
[class^="link"]:focus,
.profile .container > a:hover,
.profile .container > a:focus {
  background-color: var(--color-dark-blue);
}

nav ul a:hover,
nav ul a:focus,
[class^="link"]:hover,
[class^="link"]:focus,
.profile .container > a:hover,
.profile .container > a:focus {
  color: var(--color-gray);
  transform: translate(0, 0.025em);
  box-shadow: inset 0.125em 0.125em var(--color-black);
}

.skip-link:focus,
nav ul a:focus,
[class^="link"]:focus,
.profile .container > a:focus {
  border-color: var(--color-white);
  box-shadow: 0 0 0 0.1875rem var(--color-black);
  outline: 2px solid transparent;
  outline-offset: 4px;
}

.link-github span {
  display: block;
  height: 1em;
}

.link-github svg {
  position: relative;
  display: inline-block;
  height: 1em;
  margin-right: 0.375em;
  fill: currentColor;
  stroke: var(--color-black);
  stroke-width: 3px;
}
.red{
    background-color: var(--color-red);
}
.red:hover{
    background-color: var(--color-dark-red);
}

.flipbook-viewport {
  overflow: hidden;
  width: 100%;
  height: auto;
  margin: 0 auto; /* Menengahkan horizontal */
}

.flipbook-viewport .container-flip{
  margin: auto;
}

.flipbook-viewport .flipbook{
  width: 1204px;
  height: 520px;
}

.flipbook-viewport .page{
  width: 602px;
  height: 650px;
  background-color: white;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.flipbook .page{
  -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 20px rgba(0,0,0,0.2);
  -ms-box-shadow: 0 0 20px rgba(0,0,0,0.2);
  -o-box-shadow: 0 0 20px rgba(0,0,0,0.2);
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
}

.flipbook-viewport .shadow{
  -webkit-transition: -webkit-box-shadow 0.5s;
  -moz-transition: -moz-box-shadow 0.5s;
  -o-transition: -webkit-box-shadow 0.5s;
  -ms-transition: -ms-box-shadow 0.5s;
  transition: box-shadow 0.5s;

  -webkit-box-shadow: 0 0 20px #ccc;
  -moz-box-shadow: 0 0 20px #ccc;
  -o-box-shadow: 0 0 20px #ccc;
  -ms-box-shadow: 0 0 20px #ccc;
  box-shadow: 0 0 20px #ccc;
}

/* Media Queries */
@media (max-width: 1200px) {
  .flipbook-viewport {
      width: 1000px;
      height: 430px;
  }
  
  .flipbook-viewport .flipbook {
      width: 1000px;
      height: 430px;
  }
  
  .flipbook-viewport .page {
      width: 500px;
      height: 540px;
  }
}

@media (max-width: 800px) {
  .flipbook-viewport {
      width: 600px;
      height: 260px;
  }
  
  .flipbook-viewport .flipbook {
      width: 600px;
      height: 260px;
  }
  
  .flipbook-viewport .page {
      width: 300px;
      height: 325px;
  }
  h1{
    font-size: 3rem;
  }

  .logo-pura{
    width: 50%;
  }
  .logo-hut{
    width: 50%;
  }
  .logo-anniv{
    width: 1000%;
  }
}

@media (max-width: 600px) {
  .logo-pura{
    width: 50%;
  }
  .logo-hut{
    width: 50%;
  }
  .logo-anniv{
    width: 100%;
  }
  .flipbook-viewport {
      width: 100%;
      height: auto;
  }
  
  /* .flipbook-viewport .flipbook {
      width: 100%;
      height: auto;
  } */
  
  .flipbook-viewport .page {
      width: 100%;
      height: auto;
      background-size: fit;
  }
}