html {
 font-size: 100%;
}

body {

 background-color: white;

 height: 100%;
 margin: 0;

 display: flex;
 flex-direction: column;
 justify-content: center;
}

.message {

 font-size: 3rem;
 color: #000000;
 font-family: sans-serif;

 height: 0;
 margin: 1rem;
 padding: 2rem;

 flex-grow: 1;

 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;

 opacity:0;
 animation: fadeOut ease 1s;

}

.word-color>:nth-child(1) {
 color: #4285f4;
}

.word-color>:nth-child(2) {
 color: #ea4335;
}

.word-color>:nth-child(3) {
 color: #fbbc05;
}

.word-color>:nth-child(4) {
 color: #4285f4;
}

.word-color>:nth-child(5) {
 color: #34a853;
}

.word-color>:nth-child(6) {
 color: #ea4335;
}

.word-color>:nth-child(7) {
 color: #fbbc05;
}

.word-color>:nth-child(8) {
 color: #4285f4;
}

.word-color>:nth-child(9) {
 color: #ea4335;
}

.word-color>:nth-child(10) {
 color: #fbbc05;
}

.search {

 position: fixed;
 display: flex;
 flex-direction: column;
 align-items: center;

 width: 100%;
 height: 100%;
 animation: fadeIn ease 1s;
 opacity: 1;
}


.links {
 align-self: flex-end;
 flex-grow: 1;
 padding: 10px;
 color: black;
 text-align: right;
}

a, a:hover, a:visited {
 color: black;
 text-decoration: none;
 font-family: arial,sans-serif;
 font-size: 0.9rem;
 margin: 0 10px 0 0;
}

a:hover {
 text-decoration: underline;
}

.separator {
 border: solid 1px #cfcfd2;
 margin: 0 5px 0 -5px;
 display: inline-block;
 height: 12px;
 vertical-align: middle;
}


.search .box {
 flex-grow: 100;
 justify-content: center;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.search .box * {
  margin-bottom: max(2vw,1rem);
}

.search .logo {
  font-size: min(12vw,5rem);
  font-family: sans-serif;
}

.search .input {
	width: 100%;
	margin: 0rem -14px 0 -14px
}

.search input[name=q] {
 width: 100%;
 height: 3rem;
 font-size: 16px;
 border: 1px solid #dfe1e5;
 border-radius: 24px;
 padding: 10px 24px 10px 24px;
 outline: none;
 
}

.search #search-button {
 padding: 10px;
 border: 1px solid transparent;
 border-radius: 5px;
 background-color: #f8f9fa;
 font-size: 0.9rem;
 align-self: flex-end;
}

#search-button:hover {
 background-color: #f8f9fa;
 border: 1px solid #dfe1e5;
}

@keyframes fadeOut {
 from {
  font-size: 1vw;
  opacity:1;
 }
 50% {
  opacity:1;
 }
 to {
  font-size: 12vw;
  opacity:0;
 }
}

@keyframes fadeIn {
 from {
  opacity:0;
 }
 to {
  opacity:0;
 }
}