@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

html,
body {
    font-family: Raleway, sans-serif;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    background-color: #48dbfb;
    background-image: linear-gradient(315deg, #48dbfb 0%, #d3d3d3 74%);
}

.search-box {
    font-size: 20px;
    border: solid 0.3em #000000;
    display: inline-block;
    position: relative;
    border-radius: 2.5em;
}

.search-box input[type=text] {
    font-family: inherit;
    font-weight: bold;
    width: 2.5em;
    height: 2.5em;
    padding: 0.3em 2.1em 0.3em 0.4em;
    border: none;
    box-sizing: border-box;
    border-radius: 2.5em;
    transition: width 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55) 150ms;
}

.search-box input[type=text]:focus {
    outline: none;
}

.search-box input[type=text]:focus,
.search-box input[type=text]:not(:placeholder-shown) {
    width: 18em;
    transition: width 800ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.search-box input[type=text]:focus+button[type=reset],
.search-box input[type=text]:not(:placeholder-shown)+button[type=reset] {
    transform: rotate(-45deg) translateY(0);
    transition: transform 150ms ease-out 800ms;
}

.search-box input[type=text]:focus+button[type=reset]:after,
.search-box input[type=text]:not(:placeholder-shown)+button[type=reset]:after {
    opacity: 1;
    transition: top 150ms ease-out 950ms, right 150ms ease-out 950ms, opacity 150ms ease 950ms;
}

.search-box button[type=reset] {
    background-color: transparent;
    width: 1.4em;
    height: 1.4em;
    border: 0;
    padding: 0;
    outline: 0;
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0.55em;
    right: 0.55em;
    transform: rotate(-45deg) translateY(2.2em);
    transition: transform 150ms ease-out 150ms;
}

.search-box button[type=reset]:before,
.search-box button[type=reset]:after {
    content: "";
    background-color: #000000;
    width: 0.3em;
    height: 1.4em;
    position: absolute;
}

.search-box button[type=reset]:after {
    transform: rotate(90deg);
    opacity: 0;
    transition: transform 150ms ease-out, opacity 150ms ease-out;
}