/*
div, header, main, footer, aside, nav {
  border: solid 1px blue !important; 
}
*/
:root {
  --font-size-pc: 16px;

  --default-font: #8a4452; 
  --default-padding: 8px;

  --white: #fffafa;
  --pink1: #fbecf1;
  --pink2: #f9cbdd;
  --pink3: #f1a4c4;
  --pink4: #e768a3;

  --pink-gradient: linear-gradient(var(--pink1), var(--pink2) 30%, var(--pink1));

  --default-border: var(--pink3);
}

* {
  box-sizing: border-box;
}

p, h1, h2, h3, h4, li {
  margin: 0px;
}

@font-face {
  font-family: FreePixel;
  src: url(assets/font/FreePixel.ttf);
  font-weight: normal;
}

@font-face {
  font-family: FreePixel;
  src: url(assets/font/Pixellari.ttf);
  font-weight: bold;
}

@font-face {
  font-family: Bangalor;
  src: url(assets/font/Bangalor.ttf);
  font-weight: bold;
}

ul {
  list-style: square inside url("assets/index-assets/blue-bullet.png");
  margin: 0;
  padding: 5px;
}

li {
  margin-bottom: 5px;
}

html {
  font-family: Ms Ui Gothic, FreePixel;
  text-align: justify;
  font-size: var(--font-size-pc);
  color: var(--default-font);
}

body {
  background: linear-gradient(rgba(251, 236, 241, 0.6)), url(assets/website/download.png);
  background-size: cover;
  background-attachment: fixed;
  background-position-y: top;
  overflow: hidden;
}

a {
  color: var(--pink4);
}

p {
  line-height: 1.1em;
}

u{
  text-decoration: none;
  background: var(--pink1);
  border-bottom: solid 1px var(--pink2);
  padding: 0 5px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: var(--default-padding);
}

.content {
  display: grid;
  width: 400px;
  grid-template: 
  "header"
  "nav"
  "main"
  "footer" / 1fr;
  gap: var(--default-padding);
  padding: var(--default-padding);
  background: var(--pink1);
  outline: 1px solid var(--pink2);
  outline-offset: -4px;
  border: 1px solid var(--pink3);
  box-shadow: 0 0 10px var(--pink2);
  border-radius: 5px;
}

.archive {
  width: 550px;
  padding: var(--default-padding);
  background: var(--pink1);
  outline: 1px solid var(--pink2);
  outline-offset: -4px;
  border: 1px solid var(--pink3);
  box-shadow: 0 0 10px var(--pink2);
  border-radius: 5px;
}

.archive main {
  height: 424px;
}

header {
  grid-area: header;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 var(--default-padding);
  border: solid 1px var(--default-border);
  background: url(assets/website/bg-emu.webp);
  background-size: 170%;
  background-position: 55% 27%;
  border-radius: 3px;
}

nav {
  grid-area: nav;
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  gap: 5px;
}

main {
  grid-area: main;
  height: 300px;
  overflow-y: auto;
  padding: calc(var(--default-padding)*2);
  outline: 1px dashed var(--pink2);
  outline-offset: -4px;
  border: 1px solid var(--pink3);
  background: var(--white);
  border-radius: 3px;
}

footer {
  grid-area: footer;
  padding: var(--default-padding);
  border: solid 1px var(--pink3);
  background: var(--pink-gradient);
  text-align: center;
  outline: 1px solid var(--pink2);
  outline-offset: -4px;
  border-radius: 3px;
}

header h1 {
  color: var(--white);
  paint-order: stroke fill;
  -webkit-text-stroke: 2px var(--pink3);
  text-shadow: 0 0 5px var(--pink3);
}

h1 {
  font-family: Bangalor;
  font-size: 16px;
  color: var(--pink3);
}

p + h1 {
  margin-top: var(--default-padding);
}

 div + h1 {
  margin-top: calc(var(--default-padding)*2);
 }

.button {
  display: block;
  background: var(--pink-gradient);
  padding: var(--default-padding);
  text-decoration: none;
  border: solid 1px var(--pink3);
  color: var(--default-font);
  text-shadow: 0 0 5px var(--pink3);
  outline: 1px solid var(--pink2);
  outline-offset: -4px;
  border-radius: 3px;
}

.button:hover {
  color: var(--pink4);
  text-decoration: underline dotted 1px;
}

.callout {
  outline: 1px solid var(--pink1);
  outline-offset: -4px;
  border: 1px solid var(--pink2);
  padding: var(--default-padding);
  border-radius: 3px;
}

.callout > p:first-of-type {
  color: var(--pink4);
}

.grid {
  margin-top: var(--default-padding);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--default-padding);
}

.grid img {
  width: 100%;
  border: 1px solid var(--pink2);
}

/* 
========================================
  SCROLLBAR 
========================================
*/

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--pink1);
  border: solid 1px var(--pink2);
  border-right: none;
  border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--pink2);
}

::-moz-selection { /* Code for Firefox */
  color: var(--white);
  background: var(--pink3);
}

::selection {
  color: var(--white);
  background: var(--pink3);
}