styles.css

/*************************************************
**************************************************

Website Name: 
Website URL: https://www.minecraftchest2.com
Website Author: Zachariah Jackson
Author URL: https://github.com/dragonruler1000
CC BY-SA Zachariah

Color Guide
***************


*************************************************

Type Guide
***************


Debugging Tools
***************
border: 1px solid #fff;

*************************************************/

/************************************************
*************************************************
0. CSS Reset ------------------------ 
1. Universal Styles -----------------
2. Header & Nav Styles -------------- 
3. Main Body Styles ----------------- 
4. Sidebar Styles ------------------- 
5. Widget Styles --------------------
6. Footer Styles -------------------- 
7. Comments & Form Styles ----------- 
8. Generic Styles ----------- 
*************************************************
************************************************/

/*----------------------------------------------
------------------------------------------------
0. CSS Reset
------------------------------------------------
----------------------------------------------*/
* {
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: white;
  font-weight: normal;
  font-size: 16px;
}

/*----------------------------------------------
------------------------------------------------
1. Universal Styles
------------------------------------------------
----------------------------------------------*/

html {
  scroll-behavior: smooth;
}

:target {
  background: black;
}

body {
  background-color: black;
  font-family: 'Times New Roman', Times, serif;
  display: flex;
  margin: 8px;
  min-height: 100dvh;
  flex-direction: column;
}

a:link {
  color: blue;
  text-decoration-line: underline;
}

a:visited {
  color: cornflowerblue;
}

p,
dl {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

dd {
  display: block;
  margin-inline-start: 40px;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block: 0.67em;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block: 0.67em;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block: 1em;
}

h4 {
  display: block;
  font-size: 1em;
  font-weight: bold;
  margin-block: 1.33em;
}

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin-block: 1.67em;
}

h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin-block: 2.33em;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/*----------------------------------------------
------------------------------------------------
2. Header & Nav Styles
------------------------------------------------
----------------------------------------------*/

nav {
  display: block;
}

.header-block {
  font-size: 3em;
  margin-block: 1.5em;
}

.header {
  color: red;
}

.intro-block {
  background-color: darkolivegreen;
}

/*----------------------------------------------
------------------------------------------------
3. Main Body Styles
------------------------------------------------
----------------------------------------------*/
aside {
  color: bisque;
  border: 0.2 em;
  border-style: dashed;
  justify-self: right;
  justify-content: right;
}

project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  justify-content: center;
  padding: 2rem;
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
}

.project-card {
  background-color: darkslategray;
  border: 1px solid #325;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: left;
  transition: transform 0.2s ease, background 0.3s ease;
}

/* CSS Seams to be harder then the html is.*/
/*----------------------------------------------
------------------------------------------------
4. Sidebar Styles
------------------------------------------------
----------------------------------------------*/

/*----------------------------------------------
------------------------------------------------
5. Widget Styles
------------------------------------------------
----------------------------------------------*/
.email {
  color: black;
}

.fabs {
  --_viewport-margin: 2.5vmin;

  position: fixed;
  z-index: var(--layer-1);

  inset-block: auto var(--_viewport-margin);
  inset-inline: auto var(--_viewport-margin);

  display: flex;
  flex-direction: column-reverse;
  place-items: center;
  gap: var(--_viewport-margin)
}

.fab {
  --_size: 1rem;

  padding: calc(var(--_size) / 2);
  border-radius: var(--radius-round);
  aspect-ratio: 1;
  box-shadow: var(--shadow-4);

  background-color: brown;
  color: aquamarine;
}

/*----------------------------------------------
------------------------------------------------
6. Footer Styles
------------------------------------------------
----------------------------------------------*/

/*----------------------------------------------
------------------------------------------------
7. Comments & Form Styles
------------------------------------------------
----------------------------------------------*/
form {
  border: 3px;
  border-style: solid;
  border-color: cadetblue;
}

/*----------------------------------------------
------------------------------------------------
8. Generic Styles
------------------------------------------------
----------------------------------------------*/
.flex {
  display: flex;
}

.top,
.bottom {
  position: relative;
  width: 100%;
  z-index: 1;
}

.card {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(36, 66, 178, 0.8);
}

.bottom {
  padding: 10px;
}