<div class="contain">
  <form action="">
    <fieldset>
      <legend>Pick a color:</legend>
      <p>
        <input class="option off-screen" type="radio" name="r" id="option1" />
        <label for="option1"><span class="off-screen">Option 1</span></label>
      </p>
      <p>
        <input class="option off-screen" type="radio" name="r" id="option2" />
        <label for="option2"><span class="off-screen">Option 2</span></label>
      </p>
      <p>
        <input class="option off-screen" type="radio" name="r" id="option3" />
        <label for="option3"><span class="off-screen">Option 3</span></label>
      </p>
      <p>
        <input class="option off-screen" type="radio" name="r" id="option4" />
        <label for="option4"><span class="off-screen">Option 4</span></label>
      </p>
    </fieldset>
  </form>
  <div class="item example-1">
    <header>
      <h1>
          <a href="#">iShadeed</a>
        </h1>
      <form action="">
        <label class="off-screen" for="search">Search for something</label>
        <input id="search" type="text">
      </form>

      <button><span class="off-screen">
          Add Project</span>
            <svg viewBox="0 0 491.86 491.86">
              <path d="M465.17,211.61H280.24V26.69C280.24,18.27,268.81,0,245.93,0s-34.32,18.27-34.32,26.69V211.61H26.69C18.27,211.61,0,223.05,0,245.93s18.27,34.32,26.69,34.32H211.61V465.17c0,8.42,11.44,26.69,34.32,26.69s34.32-18.27,34.32-26.69V280.24H465.17c8.42,0,26.69-11.44,26.69-34.32S473.59,211.61,465.17,211.61Z" transform="translate(0 0)"/>
            </svg>
          </button>
    </header>
  </div>
</div>

<div class="item example-2">
  <div class="contain">
    <a class="category" href="#">Learning</a>
    <h2>This is a title for this awesome blog post</h2>
    <p>And here is the post teaser</p>
  </div>
</div>

/*...... Demo Styles ........*/
:root {
  --brand-color: #026aa7;
}

.example-1 {
	header {
		display: flex;
		background: #026aa7;
		padding: 1em;

		> *:not(:last-child) {
			margin-right: 1rem !important;
		}
	}

	h1 {
		margin: 0;	
		display: flex;

		a {
			display: inline-block;
			font-size: 1.5rem;
			padding: 0.25rem 0.9rem;
			color: rgba(#000, 0.6);
			text-decoration: none;
			background: rgba(#fff, 0.6);
			border-radius: 5px;
			transition: all 0.4s linear;
			
			&:hover {
				color: #000;
				background: #fff;
				transition: background 0.2s ease-out;
			}
		}
	}

	form {
		display: flex;
		margin-left: auto;
		width: 100%;
		max-width: 400px;
    margin-bottom: 0;
	}

	input {
		appearance: none;
		width: 100%;
		background-color: rgba(#fff, 0.3);
		background-image: url('../img/search.svg');
		background-size: 1.5em 1.5em;
		background-repeat: no-repeat;
		background-position: right 0.65em center;
		font-size: 16px;
		padding: 0.7em 0.5em;
		border-radius: 5px;
		color: #000;
		transition: box-shadow 0.2s ease-out, background 0.2s ease-out;

		&:focus {
			background-color: #fff;
			box-shadow: 0 0 0 3px rgba(#000, 0.25);
			outline: 0;
		}
	}

	button {
		appearance: none;
		font-size: 16px;
		padding: 0.7em 1em;
		border-radius: 5px;
		color: #000;
		background-color: rgba(#fff, 0.3);
		transition: background 0.2s ease-out;
		cursor: pointer;

		svg {
			width: 20px;
			fill: #fff;
			transition: fill 0.2s ease-out;
		}

		&:hover,
		&:focus {
			background: #fff;

			svg {
				fill: #000;
			}
		}

		&:focus {
			outline: 0;
		}
	}
}

.example-2 {
	background: #5aaf4c;
	box-shadow: inset 0 8px 0 0 rgba(255,255,255,.5),inset 0 -8px 0 0 rgba(255,255,255,.5);

	.contain {
		background: rgba(#000, 0.1);
		padding: 2em 1em;
		color: #fff;
	}

	h2 {
		margin: 0;
		margin-bottom: 1rem;
		font-size: 2rem;
	}

	p {
		margin: 0;
	}

	.category {
		display: inline-block;
		padding: 5px 10px;
		background: rgba(#fff, 0.5);
		text-decoration: none;
		color: #000;
		margin-bottom: 0.5rem;	
	}
}

@supports (--var: green) {
  .example-1 header {
    background: var(--brand-color);
  }
  
  .example-2 {
    background: var(--brand-color);
  }
}

/*...... General Styles ........*/

body {
	font-family: 'Arial';
  line-height: 1.4;
}

.contain {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

.off-screen {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
}

* {
	box-sizing: border-box;
}

code {
	background: rgba(lightgrey, 0.5);
	display: inline-block;
	padding: 5px;
}

input,
button {
  border: 0;
}

form {
  margin-bottom: 1em;
}

legend {
  font-weight: bold;
  margin-bottom: 10px;
}

p {
  display: inline-block;
  
  label {
    position: relative;
    width: 60px;
    height: 40px;
    display: inline-block;
    background: #000;
    border: 2px solid rgba(#000, 0.25);
  }
}

input:checked + label,
input:focus + label{
  border-width: 6px;
  border-color: rgba(#000, 0.5);
}

var colors = ["#026aa7", "#5aaf4c", "#00bcd4", "#af4c4c"];
var colorOptions = document.querySelectorAll(".option");
var colorLabels = document.querySelectorAll(".option + label");

for(var i = 0; i < colorOptions.length; i++) {
  /* Add an event listener to each radio button */
  colorOptions[i].addEventListener('click', changeColor);
  /* Add a value to each radio button based on colors[] array */
  colorOptions[i].value = colors[i];
  colorLabels[i].style.background = colors[i];
}

function changeColor(e) {
  /* calling the root element and set the value of a specific property. In our case: --brand-color */
  document.documentElement.style.setProperty('--brand-color', e.target.value);
}