@media (min-width: 992px) {
  .social-icons {
  }
}

@media (min-width: 1200px) {
  .social-icons {
  }
}

@media (min-width: 300px) {
  .social-icons {
  }
}

@media (min-width: 576px) {
  .social-icons {
  }
}

@media (min-width: 300px) {
  .container {
  }
}

@media (min-width: 300px) {
  .portfolio-block .heading h2 {
  }
}

.portfolio-block.block-intro p {
  letter-spacing: 2px;
  font-weight: 900;
}

.portfolio-block.block-intro p {
  letter-spacing: 1px;
  font-weight: 400;
}

@media (min-width: 300px) {
  .navbar-dark .navbar-brand, .navbar-dark .navbar-brand:focus, .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-nav .nav-link {
  }
}
body{
  font-family: 'Gothic A1', sans-serif;
  background-color:rgb(21,21,21);
  color: rgba(255,255,255,1);
}
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* Stops flash on tap iOS */
}
#container {
  width: auto;
  height: 354px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: sticky;
  margin: auto;
}
.item {
  z-index: 100;
  padding: 5px;
}
.item img{
  width: 159px;
  border-radius: 110px;
  height: 161px;
}
.circle {
  border-radius: 50%;
  background-color: deepskyblue;
  width: 150px;
  height: 150px;
  position: absolute;
  margin-left: initial;
  opacity: 0;
  animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
}
@keyframes scaleIn {
  from {
      transform: scale(.5, .5);
      opacity: .5;
  }

  to {
      transform: scale(2.5, 2.5);
      opacity: 0;
  }
}
.portfolio-block {
  padding-bottom: 100px;
  padding-top: 0px;
}
.card-body{
  background-color: rgb(21,21,21);
}
.portfolio-block.projects-cards a{
  color: white;
}
.card-img-top
{
  height: 230px;
}
section{
  background-color: rgb(21,21,21);
}
.footer-heart{text-align:center;font-family: open sans, sans-serif;}

.footer-heart a{border-bottom: 1px solid #453886;color: #453886;padding-bottom: .25em; text-decoration: none;}

.footer-heart a:hover{color:#2196f3; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23453886' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 20%;
  border-bottom: 0;
  padding-bottom: .3em;
  text-decoration: none;}

.emoji{vertical-align: middle;}
.card-img-top{
  border-radius: 15px;
}
.portfolio-info-card.contact-info{
  display: flex;
}
#menuToggle
{
  display: block;
  position: relative;
  top: 30px;
  left: 20px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  -moz-user-select: none;
   -ms-user-select: none;
       user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: rgba(255,255,255,1);
  
  -webkit-transition: color 0.3s ease;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color:#0C5770;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  -webkit-transform-origin: 4px 0px;
  
          transform-origin: 4px 0px;
  
  -webkit-transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
  transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease,
              -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menuToggle span:first-child
{
  -webkit-transform-origin: 0% 0%;
          transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  -webkit-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
  opacity: 1;
  -webkit-transform: rotate(45deg) translate(-2px, -1px);
          transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  -webkit-transform: rotate(0deg) scale(0.2, 0.2);
          transform: rotate(0deg) scale(0.2, 0.2);
}
#menuToggle input:checked ~ span:nth-last-child(2)
{
  -webkit-transform: rotate(-45deg) translate(0, -1px);
          transform: rotate(-45deg) translate(0, -1px);
}
#menu
{
  position: absolute;
  width: 400px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: rgb(21,21,21);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  -webkit-transform-origin: 0% 0%;
  
          transform-origin: 0% 0%;
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0);
  
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
  transition: -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  -webkit-transform: none;
          transform: none;
}
.anim {width: 225px; height: 400px;
  background-image: url(https://estelle.github.com/10/files/sprite.png);
  animation: gangham 4s steps(23,start) infinite,
    movearound 12s steps(69,end) infinite alternate 44ms;
  animation-direction: normal, alternate;
  margin-top: 50px;
}
@keyframes gangham {
  0% {background-position: 0 0}
  100% {background-position: -5175px 0}
}
@keyframes movearound {
  0% {transform: translatex(0)}
  100% {transform: translatex(600px);}
}
.portfolio-info-card.contact-info {
  display: block;
}