/*Typography*/

.paper-font-headline, h1, footer, h2, .paper-font {
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  /*Common noWrap*/
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.paper-font-headline {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 32px;
}

h1 {
  font-size: 112px;
  font-weight: 300;
  letter-spacing: -.044em;
  line-height: 120px;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin-top: 0;
  margin-bottom: 0;
}

footer{
  font-size: 14px;
  text-align: center;
}

.marginilized {
  margin: 3px;
}

.name {
  margin-left: 15px;
  margin-right: 15px;
}

a {
  color: black;
}

svg {
  width: 100%;
  height: 80%;
}

a:focus{
    outline: 0;
}

a:active>svg, a:focus>svg{
  filter: drop-shadow(0 3px 1px rgba(0, 0, 0, 0.2));
}

svg:hover #youtube, a:focus>svg #youtube {
  z-index: 1;
  fill: #CD201F;
}

svg:hover #github, a:focus>svg #github, svg:hover .grey, a:focus>svg .grey {
  z-index: 1;
  fill: #616161;
}

svg:hover #twitter, a:focus>svg #twitter {
  z-index: 1;
  fill: #1DA1F2;
}

svg:hover #book, a:focus>svg #book {
  z-index: 1;
  fill: #C68400;
}

svg:hover #bowl, a:focus>svg #bowl, svg:hover #spoon, a:focus>svg #spoon {
  z-index: 1;
  fill: #001A66;
}

.layout.horizontal, .layout.horizontal-reverse, .layout.vertical, .layout.vertical-reverse {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.layout.horizontal {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.layout.vertical {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flex-1 {
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.layout.wrap {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

.layout.center-justified, .layout.center-center {
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}

.self-center {
  -ms-align-self: center;
  -webkit-align-self: center;
  align-self: center;
}

.home{
  text-decoration: none;
}

.home :hover{
  color: grey;
}

body{
  height: 98vh;
}

#links{
  height: 100%;
}

#links>div{
  flex-basis: 256px;
  margin: 12px;
  max-width: 400px;
}

.invisible {
  visibility: hidden;
  width: 0;
  height:0;
  padding: 0;
  margin: 0;
}