@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&family=Ubuntu+Mono&display=swap');


hr{border-width: 2px;
    border-color: gray;
}
a{color: #333;}
a:hover{color: #000;}
.container-main{
    max-width: 500px;
    text-align: center;
    margin-top: 3%;
    font-family: 'Ubuntu Mono', monospace;
    border-style: solid;
    border-color: transparent;
    border-radius: 12px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.container-sub{padding: 3%;}
.container-sub img{height: 120px;
    width: 120px;
    border-radius: 60px;
}
.container-sub h1{
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
}
.summary{
    font-size: 17px;
}
/* .summary:after {
    content: "_";
    animation: blink 1s infinite;
    position: relative;
    right: 1%;
} */
@keyframes blink {
    from { opacity: 1 }
    to { opacity: 0 }
}
.main-icons{
    padding: 1% 3%;
    text-align: center;
    margin-top: 3%;
}
.content-text{
    font-size: 18px;
    font-family: 'Ubuntu Mono', monospace;
}
.content-icons{
    padding: 1% 5%;
    text-align: center;
}

.content-icons li{display: inline-flex;
    margin: auto 4%;
}
.icon a{font-size: 22px;
    text-decoration: none;
    color: #2c3e50;
    text-align: center;
}
.icon a:hover{text-decoration: underline;}

.fa-twitter{color:  #1da1f2;}
.fa-instagram{color: #c13584;}
.fa-reddit{color: #ff4500;}
.fa-spotify{color: #1db954}

.cta{margin-bottom: 5%;
    font-size: 18px;
}
.cta input{width: 100%;
}
.cta button{width: 100%;}

#beer{border-right: solid;
    border-color: gray;
}
#course-btn{
    margin-top: 3%;
}
#course-btn img{height: 25px;
width: 25px;}
@media screen and (max-width: 600px)  {
    .cta button{margin-top: 5%;}
}
.content-icons a:hover{text-decoration: none;}
a:hover .fa-beat-hover {
    -webkit-animation: fa-beat 1s infinite linear;
    -moz-animation: fa-beat 1s infinite linear;
    -o-animation: fa-beat 1s infinite linear;
    animation: fa-beat 1s infinite linear;
  }

  button:hover .fa-bounce-hover,a:hover .fa-bounce-hover {
    -webkit-animation: fa-bounce 1s infinite linear;
    -moz-animation: fa-bounce 1s infinite linear;
    -o-animation: fa-bounce 1s infinite linear;
    animation: fa-bounce 1s infinite linear;
  }

  a:hover .fa-flip-hover {
    -webkit-animation: fa-flip 2s infinite both;
    -moz-animation: fa-flip 2s infinite both;
    -o-animation: fa-flip 2s infinite both;
    animation: fa-flip 2s infinite both;
  }
  .cursor {
      display: inline;
      animation: blink 0.8s infinite;
    }

    @keyframes blink {
      0% { opacity: 1; }
      50% { opacity: 0; }
      100% { opacity: 1; }
    }