/* 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." */

:root {
  --color-1: #FF9A56;
  --color-2: #D362A4;
  --color-3: #D52D00;
  --color-4: #A50162;
}

/* Grid layout */

body {
  display: grid;
  grid-template-areas: "header header" "main main" "left right";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content auto auto;
  padding-block: 0rem;
  padding-inline: 0.5rem;
  box-sizing: border-box;
  overflow-x: hidden;
}

@media (min-width: 700px) {
  body {
    padding-inline: 0;
    grid-gap: 2rem;
    grid-template-areas: "left header right" "left main right";
    grid-template-columns: 1fr clamp(500px, 60vw, 800px) 1fr;
    grid-template-rows: auto 1fr;
  }
  .gutter {
    top: 0;
    height: 100vh;
  }
  .sizeyeen {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}

#header {
  grid-area: header;
}
#main {
  grid-area: main;
}
#left_gutter {
  grid-area: left;
}
#right_gutter {
  grid-area: right;
}

/* Colors */

body {
  margin: 0;
  color: black;
  font-family: Verdana;

  background-attachment: fixed;
  min-height: 100vh;
  box-sizing: border-box;
}

/* Sidebar image positionig */

.gutter {
  position: sticky;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}

.gutter img {
  object-fit: scale-down;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  padding: 0.5rem;
}

.sideyeen {
  padding: 0 !important;
}


/* Links */
:any-link {
  color: var(--color-2);
}
:visited {
  color: var(--color-4);
}

header {
  text-align: center;
  color: white;
}

.logo-text {
  text-shadow: 4px 4px var(--color-2), -4px -4px var(--color-1), -8px -8px var(--color-3), 8px 8px var(--color-4);
  color: white;
  text-decoration: none;
  font-size: 5rem;
  font-family: 'Comic Sans MS', 'Comic Sans', Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-style: italic;
  line-height: 1;
  margin-bottom: 0;
  text-transform: inherit;
}

.logo-link {
  color: inherit;
  text-decoration: inherit;
}

.emoji {
  width: 2em;
  height: 2em;
}

h1, h2, h3, h4 {
  font-weight: bold;
  text-transform: uppercase;
  clear: both;
}
h1, h2 {
  text-align: center;
}
.container h1, h2 {
  color: var(--color-4);
}
h3 {
  color: var(--color-2);
}

dt {
  display: inline;
  font-weight: bold;
}

dd {
  display: inline;
  margin-inline-start: inherit;
}

dd::after {
  content: '';
  display: block;
}

/* Utils */
.w-100 {
  width: 100%;
}
.float-right {
  float: right;
  margin-bottom: 1rem;
}
.float-left {
  float: left;
  margin-bottom: 1rem;
}
.clear {
  clear: both;
}
.d-block {
  display: block !important;
}

.big-quote {
  font-size: 1.5em;
  color: white;
  text-align: center;
  font-family: cursive;
  max-width: 30rem;
  margin: 0 auto;
}