@import 'normalize.css';
@import 'colors.min.css';
@import url('https://rsms.me/interface/interface.css');

html{
  background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
  min-height: 100vh;
}
*{box-sizing: border-box;}
body{
  color:#111;
  font-family: Interface, sans-serif;
  font-weight:400;
}
main{
  padding-left:1em;
  padding-right:1em;
  padding-top:3em;
  max-width:48em;
  width:100%;
  margin:auto;
  z-index:-1;
}


.h1{
  font-weight:700;
}
.h2{
  font-weight:500;
  margin-bottom:0;
}
p{margin-top:0;}
a{
  color:black;
  font-weight:500;
  text-decoration:none;
  position:relative;
  z-index:1;
}

a:after{
  display:block;
  background-color:yellow;
  height:1.25em;
  position:absolute;
  content:'';
  bottom:0;
  left:0;
  width:100%;
  z-index:-1;
  transform:scaleY(.35) scaleX(.95);
  transform-origin: bottom left;
  transition:transform .2s ease;
}
a:visited:after{
  background-color:pink;
}

a:focus{
  outline:0;
}
a:focus:after,
a:hover:after{
  transform:scaleY(1) scaleX(1);
}

@media (min-width: 51em) {
  main{
    max-width:51em;
  }
}

.columns{
  margin-top:3em;
  vertical-align: top;
  display:grid;
  grid-template-areas:
    "c1 c3"
    "c2 c3";
  grid-column-gap: 3em;
  grid-row-gap: 3em;

}
@media (max-width: 768px) {
  .columns{
    grid-template-areas:
      "c1"
      "c2"
      "c3";
  }
}
.article{
  padding:.5em 1em;
  background:#fff;
  border: 4px solid #eee;
  border-radius:.5em;
  box-shadow: 0 0px 20px 0px rgba(0,0,0,0.04), 0 20px 50px 0px rgba(0,0,0,0.05);
  max-width:24em;
  align-self: start;
}
.article:nth-child(1){
  grid-area:c1;
}
.article:nth-child(2){
  grid-area:c2;
}
.article:nth-child(3){
  grid-area:c3;
}

.list{
  padding-left:1em;
  margin-top:0;
}
.list li{
  list-style-type:none;
}



.icon:before{
  content: ' ';
  display:inline-block;
  width:1em;
  height:1em;
  margin-right:.2em;
  margin-bottom: -0.1em;
  background-position:100% 50%;
  background-repeat:no-repeat;
  background-size:contain;
}
.icon--email:before{ background-image: url('https://icongram.jgog.in/fontawesome/envelope.svg'); }
.icon--instagram:before{ background-image: url('https://icongram.jgog.in/fontawesome/instagram.svg'); }
.icon--snapchat:before{ background-image: url('https://icongram.jgog.in/fontawesome/snapchat-ghost.svg'); }
.icon--youtube:before{ background-image: url('https://icongram.jgog.in/fontawesome/youtube-play.svg'); }
.icon--soundcloud:before{ background-image: url('/source/svg/Soundcloud-black.svg'); }
.icon--twitter:before{ background-image: url('https://icongram.jgog.in/fontawesome/twitter.svg'); }
.icon--spotify:before{ background-image: url('/source/svg/Spotify-black.svg'); }