/***
    The new CSS reset - version 1.5.1 (last updated 1.3.2022)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

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

/* Reapply the pointer cursor for anchor tags */
a, button {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  appearance: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

body {
  background: #ccc;
  font-family: Nunito, sans-serif;
  font-weight: 300;
  cursor: default;
}

@media (max-width: 768px) {
  body {
    font-size: 12px;
  }
}
@media (min-width: 769px) {
  body {
    font-size: 18px;
  }
  .container {
    column-count: 2;
  }
}
.container {
  background: #fff;
  margin: 2rem;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.container hr {
  border-bottom: 1px dotted #ccc;
  margin: 1rem auto 1rem 5%;
  width: 25%;
}
.container a {
  border-bottom: 1px dotted #333;
}
.container header {
  padding: 1rem;
}
.container header h1.logo {
  font-size: 3rem;
  font-weight: 900;
  margin: 0;
}
.container section h2.section-title {
  color: #333;
  font-size: 1.5rem;
  font-weight: 900;
}
.container section h3.section-subtitle {
  color: #333;
  font-size: 1rem;
  font-weight: 700;
  margin: 12px 0 0 0;
}
.container section h3.section-byline {
  font-size: 1rem;
  font-style: italic;
  color: #333;
}
.container section p {
  padding: 0.5rem 0;
}
.container section p code {
  font-style: italic;
}
.container section ul {
  padding: 0;
  margin: 0 0 1rem 1rem;
}
.container section ul li {
  list-style: square;
  padding: 0.5rem 0;
}
.container section ul li strong {
  font-weight: 700;
}
.container section ol {
  padding: 0;
  margin: 0 0 0 1rem;
  list-style: lower-roman;
}
.container .call-to-action {
  display: block;
  background: #333;
  color: #fff;
  font-weight: 900;
  text-align: center;
  padding: 1rem;
  border-radius: 0.5rem;
}
.container .call-to-action:active, .container .call-to-action:hover {
  background: #696;
}

/*# sourceMappingURL=index.css.map */