@-ms-viewport{
  width: device-width;
}

@font-face {
  font-family: product-sans;
  src: url(./googlesans-regular-webfont.woff);
}

body{
  font-family: arial,sans-serif;
  color: #585958;
}

header{
  height: 50px;
  display: block;
}

#hello-world {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 95px;
}

#about a{
  float: left;
  padding-left: 13px;
  padding-top: 14px;
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  font-family: arial,sans-serif;
  display: inline-block;
  line-height: 24px;
  outline: none;
  vertical-align: middle;
  color: rgba(0,0,0,0.87);
  text-decoration: none;
}

#header-info{
  float: right;
  list-style-type: none;
  margin-top: 10px;
}

#header-info li{
  display: inline;
  padding:10px;
}

#header-info img{
  background-size: 32px 32px;
    border-radius: 50%;
    margin: -1px;
    overflow: hidden;
    height: 32px;
    width: 32px;
    margin-bottom: -12px;
}

#email a{
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
  font-family: arial,sans-serif;
  display: inline-block;
  line-height: 24px;
  outline: none;
  vertical-align: middle;
  color: rgba(0,0,0,0.87);
  text-decoration: none;
}

#search-box{
  max-width: 582px;
  margin: 0 auto;
  padding-top: 185px;
}

/* algolia */
#aa-search-input {
  font-family: arial,sans-serif;
  color: #222;
  font-size: small;
  background: #fff;
  display: flex;
  border: 1px solid #dfe1e5;
  box-shadow: none;
  border-radius: 24px;
  height: 44px;
  margin: 0 auto;
  width: 582px;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 40px;
}
.aa-input-search::-webkit-search-decoration, .aa-input-search::-webkit-search-cancel-button,
.aa-input-search::-webkit-search-results-button, .aa-input-search::-webkit-search-results-decoration {
  display: none;
}
.aa-input-icon {
  height: 16px;
  width: 16px;
  -webkit-transform: translateY(-182%);
  fill: currentColor;
  color: #9AA0A6;
  pointer-events: none;
  padding-left: 12px;
}
.aa-dropdown-menu {
  background-color: #fff;
  border: 1px solid rgba(228, 228, 228, 0.6);
  width: 300px;
  margin-top: 10px;
  box-sizing: border-box;
}
.aa-suggestion {
  padding: 6px 12px;
  cursor: pointer;
}
.aa-suggestions-category {
  border-bottom: 1px solid rgba(228, 228, 228, 0.6);
  border-top: 1px solid rgba(228, 228, 228, 0.6);
  padding: 6px 12px;
}
.aa-dropdown-menu > div {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.aa-empty {
  padding: 6px 12px;
}

#form-button{
font: 20px arial,sans-serif;
flex: 100%;
white-space: pre;
margin-left: 112px;
width:150px;
background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
border-radius: 4px;
color: #5F6368;
font-family: arial,sans-serif;
font-size: 14px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
}

#form-lucky{
  font: 20px arial,sans-serif;
  flex: 100%;
  white-space: pre;
  margin-left: 15px;
  width:150px;
  background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  color: #5F6368;
  font-family: arial,sans-serif;
  font-size: 14px;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

#logo{
  padding-left: 146px;
  font-size: 100px;
}

#logo .one{
  color: #4285f4;
}

#logo .two{
  color: #ea4335;
}

#logo .three{
  color: #fbbc03;
}

#logo .four{
  color: #4285f4;
}

#logo .five{
  color: #34a853;
}

#logo .six{
  color: #ea4335;
}

footer{
position: fixed;
 left: 0;
 bottom: 0;
 width: 100%;
 font-family: arial,sans-serif;
 color: #222;
 visibility: visible;
 line-height: 40px;
 padding-left: 50px;
 font-size: 13px;
 list-style-type: none;
 background-color: #f1f2f1;
}

footer li{
  display: inline;
  margin-left: 15px;
}

.overlay{
  opacity:0.8;
  background-color:#ccc;
  position:fixed;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  z-index:1000;
  overflow-x: hidden; /* For Opera */
 	-webkit-box-shadow:
 		inset #19d4ff 0 0 0 20px,
 		inset #18cdf7 0 0 0 4px,
 		inset #53dfff 0 0 0 40px,
 		inset #50d8f7 0 0 0 44px,
 		inset #8ce9ff 0 0 0 64px,
 		inset #88e2f7 0 0 0 68px,
 		inset #c5f4ff 0 0 0 88px,
 		inset #bfecf7 0 0 0 92px;
 	-moz-box-shadow:
    inset #19d4ff 0 0 0 20px,
    inset #18cdf7 0 0 0 4px,
    inset #53dfff 0 0 0 40px,
    inset #50d8f7 0 0 0 44px,
    inset #8ce9ff 0 0 0 64px,
    inset #88e2f7 0 0 0 68px,
    inset #c5f4ff 0 0 0 88px,
    inset #bfecf7 0 0 0 92px;
  box-shadow:
    inset #19d4ff 0 0 0 20px,
    inset #18cdf7 0 0 0 4px,
    inset #53dfff 0 0 0 40px,
    inset #50d8f7 0 0 0 44px,
    inset #8ce9ff 0 0 0 64px,
    inset #88e2f7 0 0 0 68px,
    inset #c5f4ff 0 0 0 88px,
    inset #bfecf7 0 0 0 92px;
}

.post {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 20px 60px 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.post a:link {
  color: #08425b;
  text-decoration: none;
}

.post img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
#thing > img {
  max-width: 800px;
  padding-top: 75px;
}

.date {
  font-size: 12px;
}

.quote {
  background-color: lightyellow;
  font-size: 14px;
  width: 90%;
  font-family: monospace;
}

.listPosts li{
  text-decoration: none;
  padding-bottom: 25px;
  list-style: none;
}

.listPosts li a {
  color: #d642f4;
}

@keyframes blinkingText{
    0%{     color: #red;    }
    49%{    color: #blue; }
    60%{    color: transparent; }
    99%{    color: transparent;  }
    100%{   color: #red;    }
}

@media only screen and (max-width: 600px) {
  .post {
    padding-bottom: 50px;
    margin: 0;
  }

  #aa-search-input {
    width: 80%;
  }

  .aa-input-icon {
    display: block;
  }

  #search-box {
    padding-top: 85px;
    max-width: 300px;
    margin: 0 auto;
  }

  #logo {
    font-size: 80px;
    padding-left: 50px;
  }
  #form-button{
    margin-left: 23px;
    width: 120px;
  }
  #form-lucky{
    margin-left: 15px;
    width: 120px;
    padding: 0;
  }
  .col-sm-4 {
    margin: -107px 0px;
  }
  footer {
    padding-left: 20px;
  }
}