@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;600;800&display=swap');

:root {
  /* Colors */
  --color-blue: rgb(0, 145, 255);
  --color-pink: rgb(214, 117, 214);
  --color-yellow: rgb(255, 184, 0);
  --color-caribbean: rgb(82, 243, 213);
  --color-orange: rgb(255, 107, 0);
  --color-white: rgb(255, 255, 255);
  --color-black: rgb(0, 0, 0);
  --color-grey: rgba(0,0,0,0.7);
  --color-background: rgb(26, 26, 26);
  --color-gradient-black: linear-gradient(0deg, rgba(0,153,241,0) 40%, rgba(0,153,241,0.1) 100%);
  
  /* Font Sizes */
  --font-size-h1: clamp(1.8rem, 12vw, 2.8rem);
  --font-size-h2: clamp(1.6rem, 10vw, 2.0rem);
  --font-size-h3: clamp(1.4rem, 8vw, 1.4rem);
  --font-size-h4: clamp(1.4rem, 8vw, 1.4rem);
  --font-size-h5: clamp(1.2rem, 6vw, 1.2rem);
  --font-size-p: 1rem;

  /* Max Widths */
  --width-max: 1224px;
  --width-media-large: 1024px;
  --width-media-medium: 990px;
  --width-media-small: 640px;

  /*border-radius */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 16px;

  /*padding*/
  --padding-section: 80px 2rem;
  --padding-section-media-small: 40px 1rem;
  --padding-section-first: 40px 2rem 80px 2rem;

  /* SHADOWS */
  --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

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

* {
  margin: 0;
}

html, body {
  font-family: 
    'Noto Sans Thai', 
    system-ui,  
    'Open Sans', 
    'Helvetica Neue', 
    sans-serif;
  font-display: fallback;
}

body {
  font-size: var(--font-size-p);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p {
  overflow-wrap: break-word;
  color: var(--color-grey);
  font-size: var(--font-size-p);
  font-weight: 300;
  line-height: calc(var(--font-size-p) * 1.6);
  padding-bottom: calc(var(--font-size-p) * 1.4);
}

h1 { 
  font-size: var(--font-size-h1);
  padding-bottom: calc(var(--font-size-h1) / 2.5); 
  line-height: calc(var(--font-size-h1) * 1.4);
}

h2 { 
  font-size: var(--font-size-h2); 
  padding-bottom: calc(var(--font-size-h2) / 1.2); 
  line-height: calc(var(--font-size-h2) * 1.4);
}

h3 { 
  font-size: var(--font-size-h3); 
  padding-bottom: calc(var(--font-size-h3) / 1.2); 
  line-height: calc(var(--font-size-h3) * 1.4);
}

h4 { 
  font-size: var(--font-size-h4); 
  padding-bottom: calc(var(--font-size-h4) / 1.2); 
  line-height: calc(var(--font-size-h4) * 1.6);
}

h5 { 
  font-size: var(--font-size-h5); 
  padding-bottom: calc(var(--font-size-h5) / 1.2); 
  line-height: calc(var(--font-size-h5) * 1.6);
}

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  color: var(--color-black);
  font-weight: 600;
}

.increase-size {
  font-size: var(--font-size-h5); 
  padding-bottom: calc(var(--font-size-h5) / 1.2); 
  line-height: calc(var(--font-size-h5) * 1.6);
}

#root, #__next {
  isolation: isolate;
}

.main {
  min-height: 100vh;
  background: var(--color-blue);
  background: var(--color-gradient-black);
  background-attachment: fixed;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--padding-section);
}

.first-section {
  padding: var(--padding-section-first);
}

.container-blockchain {
  margin: 2rem 0rem;
  text-align: center;
  width: 100%;
  max-width: 1024px;
}

.blockchain {
  width: 100%;
  max-width: 1024px;
  height: 900px;
  border: none;
  box-shadow: var(--shadow);
  border-radius: var(--border-radius-large);
}


@media (max-width: 640px) {
  section,
  .first-section {
    padding: var(--padding-section-media-small);
  }
}