/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face { 
	font-family: "dogica"; 
	src: url("./fonts/dogica/dogica.ttf") format("truetype");
	font-weight: normal;
	font-style: normal; 
}

@font-face { 
	font-family: "dogica"; 
	src: url("./fonts/dogica/dogicabold.ttf") format("truetype");
	font-weight: bold;
	font-style: normal; 
}

@font-face { 
	font-family: "pixelta"; 
	src: url("./fonts/pixelta/Pixelta.ttf") format("truetype");
	font-weight: normal;
	font-style: normal; 
}

:root {
  --color-white: #F9F5FF;
  --color-black: #101115;
  
}

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

body {
  height: 100dvh;
  background-color: var(--color-white);
  color: var(--color-black);
  font-family: "dogica";
  display: grid;
  grid-template-columns: 4fr 6fr;
  grid-template-rows: auto 1fr;
}

h1, h2, h3 {
  font-family: "Pixelta";
}

p {
  font-size: 12px;
}

a:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

#top-left {
  width: 100%;
}

#top-left h1 {
  font-size: 48px;
  
}

#top-left-header {
  background-color: var(--color-black);
  height: 333px;
}

#top-left-main {
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#top-left-footer {
  height: 11px;
  display: grid;
  grid-template-columns: 9fr auto 1fr;
}

#top-left-footer > p {
  padding: 0 2px;
}

#top-left-footer > div {
  background-color: var(--color-black);
  height: 100%;
  width: 100%;
}

#top-right {
  width: 100%;
  border-bottom: 1px solid var(--color-black);
}

#bottom-left {
  display: grid;
  grid-template-columns: 9fr auto 1fr;
}

#bottom-left > div {
  width: 100%;
}

#bottom-left > div:nth-child(1) {
  border-right: 1px solid var(--color-black);
}

#bottom-left > p {
  padding: 0 2px;
  line-height: 12px;
  border-bottom: 1px dashed var(--color-black);
  height: fit-content;
}

#welcome-text {
  font-style: italic;
  width: fit-content;
  border-right: 1px dashed var(--color-black);
}