@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);

body{
  overflow: hidden;
}

.img-muffin{
  background: linear-gradient(
          rgba(0, 0, 0, 0.4), 
          rgba(0, 0, 0, 0.4)
        ),
    var(--img) no-repeat fixed center;
  background-size: cover;

  font-family: 'Roboto', sans-serif;
  transition: background-image 0.2s ease-in-out;
}

.box{
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  color: white;
  background-color: #000917;
  
  padding: 12px;
  padding-left: 32px;
  padding-right: 32px;
  
  border-radius: 12px;

  max-width: 35%;
  min-width: 30%;

  animation: shadowy 5s infinite;

  font-family: 'Roboto', sans-serif;
}

.box p{
  width: 50%;
}

.float{
  float: right;
}

img{
  border-radius: 12px;
}

.medium-img{
  width: 200px;
  box-shadow: rgba(150, 150, 150, 0.5) 0px 25px 50px -12px;
}

.fun-img{
  transform-style: preserve-3d;
  transition: 1.5s;
}

.fun-img:hover{
  transition: 1.5s;
  transform: rotate3d(10,-25,3,25deg);
}

c{
  text-align: center;
}

#hi:after{
  animation: wow 10s infinite;
  content: "";
}

.caretHolder{
  display: flex;
  justify-content: none;
}

.caret:after{
  content: "";
  width: 5px;
  height: 25px;
  background: white;
  display: inline-block;
  animation: blink 1s infinite;
}

button{
  padding: 6px;
  background-color: #061e2d;
  color: #cac8e5;
  border: 3px solid #1f1c30;
  border-radius: 3px; 
  transition: 1s;
  font-size: small;
  display: inline-flex;
  align-items: center;

  cursor: pointer;
}

button:hover{
  border: 3px solid #e6e6e6 !important;
  background-color: #211d44;
  transition: 1s;
}

.blink1{
  animation: blinkButton 3s infinite;
}

.blink2{
  animation: blinkButton 3s infinite;
  animation-delay: 1s;
}

.blink3{
  animation: blinkButton 3s infinite;
  animation-delay: 2s;
}

.material-symbols-outlined{
  font-size: inherit !important;
  margin-right: 3px;
}

.centeredText{
  text-align: center;
  margin: 6px;
}

.centeredText p{
  width: 100%;
}

.centeredText h1{
  margin-top: 0px;
}

.noMargin{
  margin: 0;
}

#projectTitleImage{
  width: 50%;
}

#projects{
  background-color: transparent;
}

#flipBox{
  color: white;
  background-color: #000917;
  
  padding: 12px;
  padding-left: 32px;
  padding-right: 32px;
  
  border-radius: 12px;

  box-shadow: rgba(50, 50, 93, 0.45) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.5) 0px 18px 36px -18px inset;

  font-family: 'Roboto', sans-serif;
}

#status{
  color: yellow;
}