body {
  margin: 0;
  background-color: #000;
}
.port-set {
height: 100%;
margin: auto;
padding: 50px;
max-width: 800px;
align-items: center;
position: relative;
}

/* .port-container z-index has to be set for this to work */
.port-container {
z-index: 1;
}
.under-port-container {
z-index: 0;
  display: block;
  overflow: hidden;
   position: relative;
}
 .port-container{
  display: block;
   position: relative;
   
}

.portfolio  {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  margin: auto;
position: relative;
width: 440px;
padding: 10px;
top: -46.970em;
}
.under-portfolio {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 10px;
  margin: auto;
position: relative;
width: 440px;
padding: 10px;
}

.under-items {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: .2em solid rgb(0,230,255);
}
.item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  background-color: rgba(12, 22, 24, 0.85);
  border: .2em solid rgb(0,230,255);
  border-radius: 0px;
  box-shadow: none;
  transform: translateZ(0);
}


svg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
circle {
  transform-origin: 50% 50%;
  transform: scale(0);
  transition: transform 500ms;
}

text {
  font-size: 1.5rem;
  text-transform: uppercase;
  text-anchor: middle;
  letter-spacing: 1px;
}

.svg-text {
  fill: #eeeeee;
  display: block;
  font-family: 'Archivo', sans-serif;
}
image {
  transform: scale(2);
  transform-origin: 50% 50%;
  transition: transform 100ms cubic-bezier(0.25, 0.46, 0.45, 0.24);
}

.small {
  grid-row: span 1;
  grid-column: span 1;
}
.medium {
  grid-row: span 2;
  grid-column: span 2;
}
.large {
  grid-row: span 3;
  grid-column: span 3;
}
.tall {
  grid-row: span 3;
  grid-column: span 2;
}
.wide {
  grid-row: span 2;
  grid-column: span 3;
}
.item:hover circle {
transform: scale(5);
}
.item:hover image {
  transform: scale(1);
}
.port-heading {
font-size: 2rem;
color: #eeeeee;
font-weight: bold;
text-decoration: underline rgb(0,230,255);
margin: auto;
font-family: 'Raleway', sans-serif;
 }
.big-box {
font-size: 1rem;
}
.small-box {
font-size: 3em;
}










/*  sm btn styles  */
.twitter-btn {
  position: fixed; margin: auto;
  bottom: 0;
  background-color: #1da1f2;
  border: 0.15em solid #1da1f2;
   border-left: none;
  border-bottom: none;
  border-radius: 0% 100% 0% 0% / 0% 100% 0% 93% ;
    height: 50px;
  width: 50px;
  cursor: pointer;
}
.in-btn {
  position: fixed; margin: auto;
  bottom: 0; right: 0;
  border: 0.15em solid #0072b1;
  border-right: none;
  border-bottom: none;
  border-radius: 100% 0% 0% 0% / 100% 0% 0% 0% ;
  background-color: #0072b1;
    height: 50px;
  width: 50px;
  cursor: pointer;
}
.fa-twitter {
  position: absolute;
  left: 0em; right: .4em; top: .5em; bottom: 0;
  color: #fff;
  font-size: 1.8em;
}
.fa-linkedin-in {
   position: absolute;
  left: .4em; right: 0em; top: .55em; bottom: 0;
  color: #fff;
  font-size: 1.8em;
}
.in-btn:hover {
 background-color: #000;
}
.twitter-btn:hover {
  background-color: #000;
}