.navig-bar{
    background-color: transparent;
}

.navig-bar a{
    color:white;
}
.navig-bar a:hover{
    color:black;
    text-decoration: underline;
}

.landing-page{
	margin: 0;
	width: 100%;
	height: 100vh;
	color: #fff;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.solid{
    background-color:white;
    color:black;
}
.solidfont{
    color:black
}
.landing-page .container {
	width: 100%;
	position: absolute;
    top: 40%;
    left:6%;
	text-align: center;
}

.landing-text{
    font-size:10em;
    color:white;
    font-family: 'Roboto', sans-serif;
}

.about h1{
    text-align:center;
    padding:20px;
}

.left{
    display:table-cell; 
    color:#fff; 
    vertical-align:middle;
    width:35%; 
    margin:0; 
    padding:0; 
    height:80px; 
    background-image:url("../media/pic.jpg"); 
    background-size:100%;
}

.right{
    display:table-cell; 
    color:#000; 
    vertical-align:middle;
    width:65%; 
    padding:0 10px;
    font-family: 'Open Sans', sans-serif;
}

.right p{
    padding:30px;
}

.projects h1{
    text-align:center;
    padding-top:30px;
}

.projects i{
    font-size:1.6rem;
}

.card-title{
    padding-top:10px;
}

.card-text{
    font-family: 'Open Sans', sans-serif;
}

.skills h1{
    text-align:center;
    padding:20px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 50%;
    height:20%;
    padding:15px;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }

  .footer{
    margin: 0;
	width: 100%;
	height: 30vh;
	color: #fff;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
  }

  .footer h2{
      text-align:center;
      padding:20px;
  }

  .footer a{
      color:white;
  }

  .footer i{
      font-size:2rem;
      padding-left:10%;
  }