h1 {
    text-align: center;
    margin-top: 230px;
    font-size: 90px;
}

h1 span:nth-child(1) {
    color : #4285f4;
}
h1 span:nth-child(2) {
    color : #ea4335;
}
h1 span:nth-child(3) {
    color : #fbbc05;
}
h1 span:nth-child(4) {
    color : #4285f4;
}
h1 span:nth-child(5) {
    color : #34a853;
}
h1 span:nth-child(6) {
    color : #ea4335;
}
h1 span:nth-child(7) {
    color : #fbbc05;
}
.search-bar {
    width: 500px;
}

:root {
    --dark-color: #232323;
    --light-color: #F4F4F4;

/*  
    Feel free to change the variable '--circle-size' in order to scale circle and search-bar with absolute and relative units ^-^  
*/
    --circle-size: 200px;
    --circle-color: var(--light-color);

    --input-height: calc(var(--circle-size) * .6);
    --input-placeholder-color: hsl(0, 0%, 74%);
/*
    Change --input-width scalability if You think that the width of search-bar is too large/small :D
*/
    --input-width: calc(var(--circle-size) * 2);
    --input-color: hsl(226, 45%, 43%);

    --cross-size: calc(var(--circle-size) * .3);
    --cross-color: hsl(0, 0%, 27%);
}
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: var(--dark-color);
    font-family: Helvetica, sans-serif;
}
.align-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.search-container > input[type='checkbox'] {
    display: none;
}
.search-container input[type="checkbox"]:checked ~ label[for="search-trigger"] div {
    margin-left: calc(var(--input-width) * .5);
}
.search-container input[type="checkbox"]:checked ~ .search-field input[type="text"] {
    width: var(--input-width);
}
.search-container input[type="checkbox"]:checked ~ .search-field {
    margin-right: calc(var(--input-width) * -.5);
}
.search-container input[type="checkbox"]:checked ~ label .search-toggle::before {
    top: 48%;
    left: 50%;
    height: calc(var(--cross-size) / 5);
    width: calc(var(--cross-size) * 2);
    transform: translateX(-50%) rotate(-47deg);
    border-radius: calc(var(--cross-size) * .1);
}
.search-container input[type="checkbox"]:checked ~ label .search-toggle::after {
    top: 21%;
    left: 50%;
    height: calc(var(--cross-size) * 2);
    transform: translateX(-50%) rotate(-43deg);
}
.search-container > label[for='search-trigger'] > div {
    position: absolute;
    top: 50%;
    margin-left: calc(var(--input-height) * -.5);
    transform: translateY(-50%);
    width: var(--circle-size);
    height: var(--circle-size);
    background-color: var(--circle-color);
    border-radius: 50%;
    cursor: pointer;
    transition: margin 650ms ease;
}
.search-container > label[for='search-trigger'] > div::before,
.search-container > label[for='search-trigger'] > div::after {
    content: '';
    position: absolute;
}
.search-container .search-field {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
    transition: margin 500ms ease;
}
.search-container input[type="text"] {
    height: var(--input-height);
    width: 0;
    background-color: var(--input-color);
    font-size: calc(var(--circle-size) * .17);
    color: var(--light-color);
    outline: none;
    border: 0 none;
    transition: width 500ms ease;
}
.search-container input[type="text"]::placeholder {
    color: var(--input-placeholder-color);
}
.search-container .search-field::before,
.search-container .search-field::after{
    content: '';
    position: absolute;
    top: 0;
    height: var(--input-height);
    width: var(--input-height);
    background-color: var(--input-color);
    border-radius: 50%;
    z-index: -2;
    cursor: text;
}
.search-container .search-field::before {
    left: calc(var(--input-height) * -.5);
}
.search-container .search-field::after {
    right: calc(var(--input-height) * -.5);
}
.search-container label .search-toggle::before, 
.search-container label .search-toggle::after {
    content: '';
    position: absolute;
    height: var(--cross-size);
    width: calc(var(--cross-size) / 5);
    background-color: var(--cross-color);
    z-index: 1;
    transition: all 500ms ease;
}
.search-container label .search-toggle::after {
    top: 50%;
    left: 62.5%;
    transform: translateX(-50%) rotate(-35deg);
    border-radius: calc(var(--cross-size) * .1);
}
.search-container label .search-toggle::before {
    width: var(--cross-size);
    top: calc(50% - calc(var(--cross-size) * .9));
    left: calc(62.5% - calc(var(--cross-size) * .7));
    transform: translateX(-50%) rotate(-35deg);
    border-radius: 50%;
}