:root {
  /* set var for mobile */
  --body-color: #0055ff;
}

/* Make box-sing default to border-box */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1em;
  line-height: 1.5;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* Basic error checking on mandatory CSS properties */
html:not([lang]), html[lang=""] {
  border-top: 20px solid red;
}

img:not([alt]), img[alt=""] {
  border: 5px dashed red;
}

canvas:not([role]), canvas:not([aria-label]), canvas[role=""], canvas[aria-label=""] {
  border: 5px dashed red;
}

/* Body color set to custom property. Change colour in the the :root rule */

body {
}

h2 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

/* Centre everything in the main element */
main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 40px 100px;
}

article {
  color: var(--body-color);
  width: 300px;
  margin: 0;
}

article p {
  font-size: 2em;
  margin: 40px 0 10px;
  line-height: 1.2;
}

article + p {
  margin-top: 0;
  max-width: 300px;
}

.seventy-ch {
  max-width: 70ch;
}



/* Complete code without comments */

a.gradient {
  color: #1c5ffe;
  background-image: linear-gradient(90deg, rgb(10, 60, 61) 10%, rgb(45, 104, 253) 50%), linear-gradient(90deg, rgb(56, 110, 143) 10%, rgb(8, 213, 189) 50%);
  background-position: 0 100%;
  background-size: 0 2px, 100% 2px;
  background-repeat: no-repeat;
  transition: background-size 2s;
}

a.gradient:hover {
  background-image: linear-gradient(90deg, rgba(34, 193, 195, 1) 10%, rgb(45, 104, 253) 50%), linear-gradient(90deg, rgb(56, 110, 143) 10%, rgb(8, 213, 189) 50%);
  background-size: 100% 2px, 100% 2px;
  background-repeat: no-repeat;
  cursor: pointer;
}

a.gradient > span {
  background: linear-gradient(90deg, rgb(56, 110, 143), rgb(45, 104, 253)), linear-gradient(90deg, rgb(56, 110, 143), rgb(8, 213, 189));
  background-size: 0 100%, 100% 100%;
  background-repeat: no-repeat;
  color: rgb(8, 213, 189);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 2s;
}

a.gradient > span:hover {
  background: linear-gradient(90deg, rgb(56, 110, 143), rgb(45, 104, 253)), linear-gradient(90deg, rgb(56, 110, 143) 10%, rgb(8, 213, 189));
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


/* Box-decoration-break: clone; */

a.full-highlight {
  color: #ffffff;
  background-image: linear-gradient(90deg, rgb(10, 60, 61) 10%, rgb(45, 104, 253) 50%), linear-gradient(90deg, rgb(56, 110, 143) 10%, rgb(8, 213, 189) 50%);
  background-position: 0 100%;
  background-size: 0 42px, 100% 42px;
  background-repeat: no-repeat;
  transition: background-size 2s;
}

a.full-highlight:hover {
  background-image: linear-gradient(90deg, rgba(34, 193, 195, 1) 10%, rgb(45, 104, 253) 50%), linear-gradient(90deg, rgb(56, 110, 143) 10%, rgb(8, 213, 189) 50%);
  background-size: 100% 42px, 100% 42px;
  background-repeat: no-repeat;
  cursor: pointer;
}

a.full-highlight.clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Background Slide in Effect */

a.full-highlight-slide {
  color: #1c5ffe;
  background-image: linear-gradient(90deg, rgb(10, 60, 61) 10%, rgb(45, 104, 253) 50%);
  background-position: 0 100%;
  background-size: 0 42px;
  background-repeat: no-repeat;
  transition: background-size .9s, color .9s;
}

a.full-highlight-slide:hover {
  color: #ffffff;
  background-image: linear-gradient(90deg, rgba(34, 193, 195, 1) 10%, rgb(45, 104, 253) 50%);
  background-size: 100% 42px;
  background-repeat: no-repeat;
  cursor: pointer;
}

a.full-highlight-slide.clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Background Slide in Effect with transform */

a.full-highlight-slide-position {
  color: #1c5ffe;
  background-image: linear-gradient(90deg, rgb(10, 60, 61) 10%, rgb(45, 104, 253) 50%);
  background-position-x: -600px;
  background-size: 100% 42px;
  background-repeat: no-repeat;
  transition: background-position .3s,  color .3s;
}

a.full-highlight-slide-position:hover {
  color: #ffffff;
  background-image: linear-gradient(90deg, rgba(34, 193, 195, 1) 10%, rgb(45, 104, 253) 50%);
  background-position-x: 0;
  background-size: 100% 42px;
  background-repeat: no-repeat;
  cursor: pointer;
}

a.full-highlight-slide-position.clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}