:root {
  --max-game-width: 430px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; */
  font-family: "Inter", "Poppins", serif;
  /* this removes the blue highlight of blue on mobile device */
  -webkit-tap-highlight-color: transparent;
}

body,
html {
  overflow: hidden;
  /* position: fixed; */
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  /* to center everything in body */
  /* position: absolute; */
  /* https://stackoverflow.com/questions/57141778/css-to-center-entire-relative-body-horizontally-without-wrapper-or-scrollbars */
  /* left: 50%;
  transform: translate(-50%);
  margin: 0; */
  /* to here for centering in body */
  /* display: flex;
  align-items: center;
  justify-content: center; */
  display: grid;
  place-items: center;
  grid-template-areas:
    "header"
    "clock-container"
    "score-display"
    "input-container";
  grid-template-columns: 1fr;
  grid-template-rows: 30px auto 50px auto;
  transition: grid-template-rows 0.5s ease-out;
  background: #eef0f5;
  overflow: hidden;

  /*Todo: this has to do with the transition effect 3 for the modal. It gives the rotate property a 3D effect. The smaller the number the greater the effect */
  perspective: 400px;
}

.header {
  width: 100%;
  /* display: flex; */
  grid-area: header;
  /* align-items: center; */
  /* justify-content: space-between; */
  overflow: hidden;
}

/* ! DevEd version Start */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: hsl(0 0% 0% / 0.65);
  overflow: hidden;
}

.logo {
  color: rgb(226, 226, 226);
  margin-left: 10px;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
}

@media (max-width: 55em) {
  .logo h4 {
    max-width: 120px;
    font-size: 1rem;
    text-transform: none;
    text-align: center;
  }
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 30%;
  overflow: hidden;
}
.nav-links li {
  list-style: none;
}
.nav-links a {
  color: rgb(226, 226, 226);
  text-decoration: none;
  letter-spacing: 3px;
  font-size: 14px;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: rgb(226, 226, 226);
  margin: 5px;
  transition: all 0.3s ease;
}
.burger {
  margin-right: 10px;
  display: none;
  cursor: pointer;
}

@media screen and (max-width: 1024px) {
  .nav-links {
    width: 40%;
  }
}

@media screen and (max-width: 768px) {
  body,
  html {
    /* overflow: hidden; */
    position: fixed;
    width: 100%;
    height: 100%;
  }

  .nav-links {
    position: absolute;
    z-index: 999;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background: hsl(0 0% 0% / 0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.75s
      linear(
        0,
        1 44.7%,
        0.898 51.8%,
        0.874 55.1%,
        0.866 58.4%,
        0.888 64.3%,
        1 77.4%,
        0.98 84.5%,
        1
      );
    overflow: hidden;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
  }
  @supports (backdrop-filter: blur(0.3rem)) {
    .nav-links {
      background: hsla(0, 15%, 6%, 0.1);
      backdrop-filter: blur(0.3rem);
    }
    .nav-links a {
      color: #2d333e;
    }
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
  opacity: 0;
}
.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}
/* ! DevEd version END */

.input-container {
  grid-area: input-container;
  display: grid;
  grid-template-rows: 1fr 150px 1fr;
  /* grid-template-columns: 1fr; */
  gap: 5px;

  width: 100%;
  max-width: var(--max-game-width);
  height: 100%;

  justify-items: center; /* centers elemnts inside along row or x axis*/
  align-items: center; /* centers elemnts inside along column or y axis*/
}

.dClock {
  /* background: rgb(226, 226, 226); */
  box-shadow: 5px 5px 5px rgba(51, 63, 91, 0.5);
  /* , -5px -5px 5px #fff; */
  height: 50px;
  width: 350px;
  text-align: center;
  line-height: 50px;
  border-radius: 10px;
}
.dDisplay {
  font-size: 25px;
  font-family: "Orbitron";
  letter-spacing: 5px;
}

.dDisplay span {
  font-family: "Orbitron";
  display: inline-block; /*to maintain same width when numbers change*/
  width: 52px;
  font-weight: 400;
  /* margin: 0px 0; */
}
rt {
  font-size: 0.5rem;
  margin: 0 5px;
}

.range-container {
  display: grid;
  grid-template-columns: 350px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  /* justify-items: center; */
  align-self: stretch;
  align-content: space-around;
  /* margin: 15px auto; */

  /* grid-template-rows: auto; */
}

.slider-wrapper {
  /* position: relative; */
  /* margin: 1rem; */
  display: flex;
  align-items: center;
  justify-content: space-between;

  box-shadow: 10px 8px 10px rgba(51, 63, 91, 0.5), -5px -5px 5px #fff;
  /* , -15px -15px 20px #fff */
  /* rgba(0, 0, 0, 0.4) */

  border-radius: 50px;
  margin-bottom: 13px;
}

.slider {
  appearance: none;
  -webkit-appearance: none;
  width: 250px;
  height: 20px;
  background-color: white;
  box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.4);
  border-radius: 25px;
  outline: none;
  transition: 0.4s ease-in-out;
}

/* https://www.google.com/search?q=how+to+add+add+one+div+element+to+bottom+left+corner+and+another+to+bottom+right+corner+of+parent+div&sca_esv=1e4d509914ca8c34&sxsrf=AHTn8zrjVv0MK7KCyjcEznY0n0i6kS7w0Q%3A1738983788167&ei=bMmmZ5-BCpavur8Pw4qqkQQ&ved=0ahUKEwif59q3i7OLAxWWl-4BHUOFKkIQ4dUDCBA&uact=5&oq=how+to+add+add+one+div+element+to+bottom+left+corner+and+another+to+bottom+right+corner+of+parent+div&gs_lp=Egxnd3Mtd2l6LXNlcnAiZWhvdyB0byBhZGQgYWRkIG9uZSBkaXYgZWxlbWVudCB0byBib3R0b20gbGVmdCBjb3JuZXIgYW5kIGFub3RoZXIgdG8gYm90dG9tIHJpZ2h0IGNvcm5lciBvZiBwYXJlbnQgZGl2SNqoAlDMFFjipgJwDngBkAEAmAFuoAGVMqoBBDgxLjO4AQPIAQD4AQGYAkqgAvIpwgIKEAAYsAMY1gQYR8ICBRAAGIAEwgIGEAAYFhgewgILEAAYgAQYhgMYigXCAgUQABjvBcICCBAAGIAEGKIEwgIHECEYoAEYCsICBRAhGKsCwgIEECMYJ8ICChAAGIAEGBQYhwLCAgcQABiABBgNwgIIEAAYFhgKGB7CAgUQIRigAcICBRAhGJ8FmAMAiAYBkAYIkgcFNjQuMTCgB-HHAw&sclient=gws-wiz-serp */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  /* background: radial-gradient(#e6e9ef, #d6d8dc); */
  background: linear-gradient(#b8b8b8, whitesmoke) padding-box,
    linear-gradient(#fbfbfb, #b0b0b0) border-box;
  border: solid 0.375em transparent;
  /* cursor: pointer; */
  cursor: ew-resize;
  /* ! transitions for ::webkit-slider-thumb not supported yet */
}
.slider::-webkit-slider-thumb:hover,
.slider::-webkit-slider-thumb:active {
  background: linear-gradient(#c67676, whitesmoke) padding-box,
    linear-gradient(#fd9090, #c37272) border-box;
}

.slider::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  /* background: radial-gradient(#e6e9ef, #d6d8dc); */
  background: linear-gradient(#b8b8b8, whitesmoke) padding-box,
    linear-gradient(#fbfbfb, #b0b0b0) border-box;
  border: solid 0.375em transparent;
  /* cursor: pointer; */
  cursor: ew-resize;
  transition: background 2s;
}

.slider::-moz-range-thumb:hover,
.slider::-moz-range-thumb:active {
  background: linear-gradient(#c67676, whitesmoke) padding-box,
    linear-gradient(#fd9090, #c37272) border-box;
}

.slider:hover {
  box-shadow: inset 4px 4px 12px rgba(2, 196, 53, 0.522);
  cursor: pointer;
}

.slider-wrapper span {
  /* position: absolute;
  bottom: 50%;
  transform: translateY(30%); */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  font-size: 1.5rem;
  width: 26px;
}

.range-label {
  margin-bottom: 3px;
  margin-right: 5px;
  font-size: 1.2rem;
}
#hour,
.dHour {
  color: #2d333e;
  border-radius: 8px;

  transform: scale(1);
  transition: transform 0.5s ease-in-out, background-color 0.75s ease-in-out,
    color 0.5s ease-in-out;
  /* border-radius 0.2s ease-in-out; */
}
#minute,
.dMinute {
  color: #646e82;
  border-radius: 8px;

  transform: scale(1);
  transition: transform 0.5s ease-in-out, background-color 0.75s ease-in-out,
    color 0.5s ease-in-out;
  /* border-radius 0.2s ease-in-out; */
}
#second,
.dSecond {
  color: #fd382d;
  border-radius: 8px;
  /* text-shadow: 2px 2px 3px rgba(253, 56, 45, 0.5); */
  /* transform: scale(1.1); */
  /* background-color: rgba(0, 0, 0, 0); */
  transform: scale(1);
  /* text-shadow: ""; */
  /* transition: transform 0.5s ease-in-out 0.5s,
    background-color 0.5s ease-in-out 0.5s; */
  /* -webkit-font-smoothing: antialiased; */
  /* transform-origin: center; */
  transition: transform 0.5s ease-in-out, background-color 0.75s ease-in-out,
    color 0.5s ease-in-out;
  /* border-radius 1s ease-in-out; */
}

.fishEye {
  transform: scale(1.15);
  background-color: rgba(255, 255, 0, 0.7);
  /* max-height: 50px; */
  border-radius: 8px;
  /* transition: border-radius 0.5s ease-in-out 0.5s; */
  /* Explicitly define the same transition */
  /* transition: transform 1s ease-in-out, background-color 0.2s ease-in-out; */
  /* border-radius 0.2s ease-in-out 0.5s; */
}

.clock-container {
  grid-area: clock-container;

  width: 100%;
  max-width: var(--max-game-width);

  height: 100%;
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center; /* vertical centering */
  /** Newest way of centering a div */
  /* justify-items: center; horizontal */
  /* align-content: center; vertically */
  /* overflow: hidden; */
  position: relative;
}

.idErrorBackground {
  background-color: rgb(255, 165, 0, 0.5);
  border-radius: 8px;
  color: white;
  font-weight: 600;
  transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.score-display {
  grid-area: score-display;
  position: relative;

  width: 100%;
  max-width: var(--max-game-width);

  height: 100%;
  align-items: center;
  /* to center and align child divs properly */
  display: flex;
  justify-content: space-between;

  overflow: hidden;
  transition: height 500ms;
}
body.cgpt-hide-score-display {
  /* grid-template-areas:
    "header"
    "clock-container"
    "input-container"; */
  grid-template-rows: 30px auto 0px auto;
}

.indicator div {
  font-size: 1.1rem;
}

.backgroundRed {
  background-color: red;
  color: white;
  text-align: center;
  width: 60px;
  border-radius: 8px;
  font-weight: bold;
}

.score {
  font-size: 1.3rem;

  justify-items: center; /* aligns divs inside this horizontally center*/

  margin-left: 10px;
}
.timer {
  justify-items: center; /* aligns divs inside this horizontally center*/
  font-size: 1.3rem;
  margin-right: 10px;
}
/* .time-left {
  content: "\200B";
  height: auto;
} */

.clock {
  /* grid-area: clock; */
  background: linear-gradient(120deg, #e6e9ef, #eef0f5);
  /* width: 450px;
  height: 450px; */
  width: 345px;
  height: 345px;
  border-radius: 50%;
  box-shadow: -20px -20px 60px rgba(255, 255, 255, 0.5),
    20px 20px 20px -5px rgba(166, 180, 200, 0.5);
  display: flex;
  /* place-self: center; */
  align-items: center;
  justify-content: center;
  position: relative;
  /* border: 4px solid red; */
  margin-top: 20px;
  margin-bottom: 20px;
}

.wrapper {
  /* width: 390px;
  height: 390px; */
  width: 300px;
  height: 300px;
  background: linear-gradient(to top, #eceef3, #f1f2f7);
  border-radius: 50%;
  box-shadow: inset 10px 10px 10px rgba(166, 180, 200, 0.5),
    inset 10px 20px 40px rgba(166, 180, 200, 0.7);
  display: flex; /*this not needed for numbers/ticks but will be for handles*/
  align-items: center;
  justify-content: center;
  /* border: 4px solid purple; */
}

.number-hours span {
  position: absolute;
  transform: rotate(calc(var(--index) * (360deg / 12)));
  inset: 55px; /*if this removed numbers centered because of the display flex and centered properties. Without display flex in .wrapper and this removed, they would be placed in top left corner of the position relative element*/
  text-align: center;
}

.number-hours span p {
  font-size: 1.4rem;
  transform: rotate(calc(var(--index) * (-360deg / 12)));
}

.bar-seconds span {
  position: absolute;
  transform: rotate(calc(var(--index) * (360deg / 60)));
  /* inset: 30px;  for min num selection*/
  inset: 35px;
  text-align: center;
  transition: all 1s
    linear(
      0,
      1 44.7%,
      0.898 51.8%,
      0.874 55.1%,
      0.866 58.4%,
      0.888 64.3%,
      1 77.4%,
      0.98 84.5%,
      1
    );
}

.bar-seconds span p {
  display: inline-block;

  width: 2px;
  height: 6px;
  /* background: #646e829b; #646e8260 */
  border-radius: 2px;
  box-shadow: 0 0 10px #646e8260;
  /* transition: all 1s linear; */
}

.tickColor {
  background: #646e829b;

  /* transform: rotate(calc(var(--index) * (-360deg / 60))); */
}

.clockMNums {
  font-size: 0.55rem;
  transform: rotate(calc(var(--index) * (-360deg / 60))) translateX(-3px)
    translateY(-1px);
  width: auto;
  height: auto;
  background: transparent;
  /* transition: all 1s linear; */
}

.bar-seconds span:nth-child(5n) p {
  background: red;
  transform: translateY(-2px);
  height: 6px;
  width: 3px;
  box-shadow: 0 0 10px red;
}

/* HANDS */
.hands-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: red;
}

.hand {
  position: absolute;
  bottom: 50%;
  transform-origin: bottom;
}

.hours {
  width: 6px;
  height: 20%;
  background: #2d333e;
  box-shadow: 1px 1px 10px #2d333e60;
  transform: rotate(15deg);
  border-radius: 25% 25% 0% 0%;
}

.minutes {
  width: 6px;
  height: 30%;
  background: #646e82;
  transform: rotate(180deg);
  box-shadow: 1px 1px 10px #646e8260;
  border-radius: 25% 25% 0% 0%;
}

.minutes::before {
  content: "";
  position: absolute;
  top: 100%;
  /* left: 50%; */
  /* transform: translate(-5px, -7.5px); */
  transform: translate(-5px, -50%);

  width: 15px;
  height: 15px;
  background: #fd382d;
  border-radius: 50%;
  box-shadow: 1 1 5px #fd382d60;
}

.seconds {
  width: 4px;
  height: 34%;
  background: #fd382d;
  box-shadow: 1px 1px 3px #fd382d60;
  transform: rotate(108deg);
  border-radius: 25% 25% 0% 0%;
}
/* .seconds::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 15%;
  background: #fd382d;
  bottom: -15%;
  box-shadow: 1px 1px 3px #fd382d60;
} */

/* Selection buttons */
.buttons {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  overflow: hidden;
  gap: 10px;
}
.start-btn {
  width: 80px;
  height: 0px;
  overflow: hidden;
  display: none;
  transition: height 0.5s ease-in-out, display 0.25s ease;
  transition-behavior: allow-discrete;
}
.start-btn.appear {
  display: inline-block;
  height: 40px;

  @starting-style {
    height: 0px;
  }
}

.switch.grads {
  width: 150px;
  height: 0rem;
  overflow: hidden;
  display: none;
  transition: height 0.75s ease, display 0.25s ease;
  transition-behavior: allow-discrete;
}
.switch.grads input {
  height: 1rem;
  width: 3rem;
  left: 3rem;
}
.switch.grads label {
  line-height: 0.75rem;
  width: 2.5rem;
}
.switch.grads .toggle-outside {
  height: 20px;
  width: 2.3rem;
  left: 3.8rem;
}
.switch.grads .toggle-inside {
  height: 0.75rem;
  width: 0.75rem;
}
.switch.grads label:last-of-type {
  margin-left: 3rem;
}
.switch.grads input:nth-of-type(2):checked ~ .toggle-outside .toggle-inside {
  left: 1.25rem;
}

.switch.grads.appear {
  display: flex;
  height: 1.5rem;

  @starting-style {
    height: 0rem;
  }
}

/** Modal styles */
.modal-bg {
  background-color: rgba(184, 184, 184, 0.432);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backdrop-filter: blur(2px);
  display: none;
}

.modal-bg.open {
  display: block;
}

.modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 300px;
  background-color: #fff;
  position: absolute;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(128, 128, 128, 0.164);
  gap: 20px;
  padding: 10px;
  top: 40%;

  /* below the effect of moving */

  /** effect 1 */
  /* transform: translateY(-500px); */

  /** effect 2 */
  transform: scale(0.5) translateY(10%);

  /** effect 3 */
  /* transform: rotateX(65deg) scale(0.75) translateY(10%);
  transform-origin: 50% 100%; */

  /* perspective is used in the parent elemnt, this being body, to give a 3D effect on the rotate in the transform for effect 3 */

  /* I think transitions for all effects */
  opacity: 0;
  visibility: hidden;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out,
    visibility 0.5s ease-in-out;
}
.modal.open {
  visibility: visible;
  opacity: 1;

  /* effect 1 */
  /* transform: translateY(0); */

  /* effect 2 */
  transform: scale(1) translateY(0);

  /* effect 3 */
  /* transform: rotateX(0) scale(1) translateY(0); */
}

.close-btn {
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 22px;
  font-weight: 600;
  filter: drop-shadow(0 0 2px rgba(124, 124, 124, 0.468));
  cursor: pointer;
}

.close-btn:hover {
  color: red;
  transition: color 0.2s ease-in-out;
}

.interactive-element {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.selection-area {
  align-items: center;
  background: #eee;
  border: 1px solid lightgrey;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  margin: 20px auto; /*!change*/
  max-width: 400px; /*!change*/
  overflow: hidden;
  padding: 4px;
  position: relative;
}
label {
  cursor: pointer;
  padding: 8px 15px;
  text-align: center;
  width: 33.33%;
  z-index: 2; /*! maybe change - investigate*/
}
.slide-item {
  background: white;
  border-radius: 9999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  height: calc(100% - 8px);
  left: calc(66.66% + 4px);
  position: absolute;
  width: calc(33.33% - 4px);
  transition: left 0.3s;
  z-index: 0;
}
input[type="radio"] {
  left: -9999px;
  position: absolute;
  z-index: -1;
}
input[type="radio"]:nth-of-type(1):checked ~ .slide-item {
  left: 1px;
}
input[type="radio"]:nth-of-type(2):checked ~ .slide-item {
  left: calc(33.33% + 4px);
}
input[type="radio"]:nth-of-type(3):checked ~ .slide-item {
  left: calc(66.66% + 4px);
}

/* .description {
  font-size: 14px;
  color: gray;
  text-align: center;
} */

.description-container {
  width: 100%;
  position: relative; /* Needed for absolute positioning of descriptions */
  /*height: 100px;*/ /*Adjust as needed */
  overflow: hidden; /* Hide descriptions outside the container */
  font-size: 1rem;
  color: gray;
  text-align: center;
  transition: height 0.3s ease-in-out; /* Add transition for height */
}

.description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transitions */
  transform: translateY(20px); /* Start slightly below */
}

.description.active {
  opacity: 1;
  transform: translateY(0); /* Move into position */
}

/* * input radio switch for numbers or ticks*/
.switch {
  position: relative;
  width: 300px;
  height: 3rem;
  margin: 0 auto;
  font-size: 0;
  /* margin-bottom: 1rem; */
  display: flex;
  align-items: center;
}
.switch input {
  position: absolute;
  top: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
  height: 2rem;
  width: 6rem;
  left: 6rem;
  margin: 0;
}
.switch input:checked {
  z-index: 1;
}
.switch input:checked + label {
  opacity: 1;
  color: red;
  cursor: default;
}
.switch input:not(:checked) + label:hover {
  opacity: 0.5;
}
.switch label {
  /* color: red; */
  opacity: 0.33;
  transition: opacity 0.25s ease-in-out;
  cursor: pointer;
  font-size: 1rem;
  line-height: 3rem;
  display: inline-block;
  width: 5rem;
  height: 100%;
  margin: 0;
  text-align: center;
}
.switch .toggle-outside {
  height: 30px;
  border-radius: 2rem;
  padding: 0.25rem;
  overflow: hidden;
  transition: 0.25s ease all;
  /* background: #4a4a4a; */
  background: gray;
  position: absolute;
  width: 4rem;
  left: 6rem;
}
.switch .toggle-inside {
  border-radius: 5rem;
  background: #fff;
  position: absolute;
  transition: 0.25s ease all;
  height: 1.5rem;
  width: 1.5rem;
}
.switch label:first-of-type {
  margin-left: 0rem;
}
.switch label:last-of-type {
  margin-left: 4.5rem;
}
input:nth-of-type(1):checked ~ .toggle-outside .toggle-inside {
  left: 0.25rem;
}
input:nth-of-type(2):checked ~ .toggle-outside .toggle-inside {
  left: 2.25rem;
}
hr {
  margin: 0.5rem 0.5rem;
}

/* 
https://www.freecodecamp.org/news/taking-the-right-approach-to-responsive-web-design/
https://www.freecodecamp.org/news/responsive-web-design-modern-website-code-for-beginners/
https://www.freecodecamp.org/news/breakpoints-for-responsive-web-design/

*/