.container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 0.4fr 1.6fr;
  grid-template-rows: 1fr;
  gap: 0px 30px;
  grid-template-areas:
    "logo main";
}
.logo { grid-area: logo; }
.main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0.2fr 1.8fr;
  gap: 30px 0px;
  grid-template-areas:
    "search"
    "results";
  grid-area: main;
}
.results { grid-area: results; }


body{
  background: #fff;
  font-family: sans-serif;
}

.search {
  grid-area: search;
  top: 50%;
  width: 80%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  height: 20px;
  border: 2px solid #00a0c6;
  border-right: none;
  padding: 5px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #00a0c6;
  font-size: 20px;
}
.searchTerm:focus{
  color: #000; /* #00a0c6; */
}

.searchButton {
  width: 40px;
  height: 34px;
  border: 1px solid #00a0c6;
  background: #00a0c6;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}
.link {
  margin-top: 2em;
}
h2 {
  margin: .2em 0;
}

a {
  text-decoration: none;
}
a:link {
  color: #00a0c6;
}
a:visited {
  color: #8cb8c2;
}
a:hover .fullUrlText, a:hover .snippet{
  text-decoration: underline;
}

.resultHeader {
  font-weight: 100;  /* leicht (Light) */
  color: #444;   /* statt hartem schwarz */
  }

.snippet {
  font-weight: bold
}

.fullUrlText {
  margin-left: 25px;
}

a:visited .resultHeader {
  color: #999;  /* etwas blasser für besuchte Links */
}
a:hover .resultHeader {
  text-decoration: none;
}

.icon {
  width: 20px;
  height: 20px;
  vertical-align: -3px;
  margin-right: 5px;
}