/* Pure CSS unvisited link indicator */
/* Pure CSS visited link text & icon fade out */

ul[role='feed'] li {
    list-style: none;
    padding: 1em
}

ul[role='feed'] li:hover {
    background-color: #ebeeef; /* Hover color */
    border-radius: 0 25em 25em 0
}

/* Size the link to the whole list width */
ul[role='feed'] li a {
    display: block
}

/* Set the text color for visited links */
ul[role='feed'] li a:visited {
	color: #cdd0d1
}

/* Set the tooltip */
ul[role='feed'] li a big:after {
    display: inline;
    color: #f54445; /* Red color */
    content: ' !'; /* Use an international sign */
    font-size: larger;
    font-style: italic
}

/* Tooltip color */
ul[role='feed'] li:hover a:visited big:after {
    color: #ebeeef /* MUST be same as hover color */
}

ul[role='feed'] li a:visited big:after {
    color: #f5f8f9 /* MUST be same as background color */
}

/* Set the icon */
ul[role='feed'] li a i:first-of-type {
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: medium solid white;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle role='link' cx='16' cy='16' r='16' fill='white'/%3E%3Cpath fill='url(%23gradient)' fill-rule='evenodd' clip-rule='evenodd' d='M16 32a16 16 0 100-32 16 16 0 000 32zM5.4 18.7v-4.9c0-.4.2-.7.6-.7h6c.5 0 .8-.3.8-.7V9.2c0-.6.5-.9 1-.6l11.9 6.9c.4.2.4.9 0 1.1l-12 6.9c-.4.2-1 0-1-.6v-3.1c0-.4-.2-.7-.6-.7H6a.7.7 0 01-.6-.4z'/%3E%3Cdefs%3E%3ClinearGradient id='gradient' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23418ad1'/%3E%3Cstop offset='1' stop-color='%239b76bd'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: black; /* MUST be "black" */
	background-blend-mode: screen /* MUST be "screen" */
}

/* Set the overlay color for visited links */
ul[role='feed'] li a:visited i:first-of-type {
	background-color: #CDD0D1
}

/* Defaults [DEMO PURPOSES ONLY] */

:root {
	box-sizing: border-box;     /* Set proper box sizing */
  /* Set Sans-Serif as default font style */
  font: 400 100%/1.5rem sans-serif
}

*,
*::before,
*::after {
	box-sizing: inherit         /* Set box sizing inheritance */
}

html {
  box-sizing: inherit;        /* Set box sizing inheritance */
  width: 100vw;               /* Set full viewport width */
  height: 100vh               /* Set full viewport height */
}

body {
  box-sizing: inherit;        /* Set box sizing inheritance */
  font-family: inherit;       /* Set font inheritance */
  font-size: 16px;            /* Set base font size */
  background: #f5f8f9;        /* Darken default white */
  color: #373a3b;             /* Lighten default black */
  width: 50%;                 /* Set base width */
  height: 50%;                /* Set base height */
  margin: 0 auto;             /* Set margins */
  padding: 0                  /* Remove padding */
}

a {
  color: currentColor;        /* Remove default blue color */
  text-decoration: none       /* Remove default underline */
}

*::selection {
	color: white;
	background: lightGrey;
	text-shadow: 0.08em 0.08em 0 darkGrey
}

article:last-of-type {
  padding: 1em;
  text-align: center;
  color: white;
  border-radius: 5em;
  background: linear-gradient(135deg, #418ad1 0%, #9b76bd 100%)
}