CSS_Start_up_Page_with_Comments

CSS_Start_up_Page_with_Comments

/* ======================================
  CSS Reset
  https://dev.to/hankchizljaw/a-modern-css-reset-6p3
  Box sizing rules
========================================= */
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
  ul[class],
  ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  font-family: var(--fontIBM);
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* strip all pre-defined css rules  */
a {
    text-decoration: none;
    color: black;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
  
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* css reset 2020 END */

/* ======================================
  Global Variables
========================================= */
:root {
    --somethingGoesHere:  
}

/* ======================================
  Global Styles
========================================= */

/*=========================================
    Media Queries
/* ======================================
    Breakpoint	      Purpose
    (default)	          Mobile-portrait
    max-width: 480px	  Mobile-landscape (and larger)
    max-width: 576px	  Mobile-landscape (and larger)
    max-width: 768px	  Tablet-portrait (and larger)
    max-width: 992px	  Tablet-landscape (and larger)
    max-width: 1200px	  Laptops (and larger)
    max-width: 1400px	  Laptops (and larger)
  ========================================= */
  
  @media all and (min-width: 480px) {
      body {
          background-color: red;
      }
  }
  
  @media all and (min-width: 768px) {
      body {
          background-color: blue;
      }
  }
  
  @media all and (min-width: 992px) {
      body {
          background-color: yellow;
      }
  }
  
  @media all and (min-width: 1200px) {
      body {
          background-color: pink;
      }
  }

  @media all and (min-width: 1400px) {
    body {
        background-color: green;
    }
}