*{
	margin: 0;
	padding: 0;
}

body{
    background-color: black;
}

/*.navbar {
  background-color: blueviolet;
  position: ; /* Set the navbar to fixed position */
  /*top: 0; /* Position the navbar at the top of the page */
  /*width: 100%; /* Full width */
  /*display: flex;
  justify-content: center;
}*/

.home{
	background-color: ;
}


.navbar{
    background-color: black;
    border: none;
    justify-content: center;
}

.jumbotron{
    /*background-color: white;
    color:  blueviolet; 1 */
    margin-top: 80px;
    background-color: mediumspringgreen;
    color: white; 
    /*background-color: blueviolet;
    color: white; 3*/
    border-radius: 0 250px 0 250px !important;
}

li a:hover{
	/*border-bottom: 2px solid blueviolet !important;*/ 
    /*background-color: blueviolet !important;*/
    background-color: mediumspringgreen !important;
}

.abouthead{
	text-align: center;
	color: white;
	margin-top: 100px;
}

.about{
	text-align: justify;
	color: mediumspringgreen;
}

/*SKILLS*/
.ul-skills {
  text-align: center;
  padding-left: 0;
}

.li-skills {
  display: inline-block;
  margin: 7px;
  padding: 5px 10px;
  color: white;
  background: mediumspringgreen;
  list-style: none;
  cursor: default;
  font-size: 1.2em;
  border-radius: 0 50% 0 50%;
}

figure{
	background-color: white;
}

.title{
	text-align: center;
	color: white;
}

.card{
	margin-bottom: 25px;
	padding-bottom: 20px;
	color: white;
	border-right: 2px solid white;
	border-left: 2px solid white;
	border-bottom: 2px solid white;
}

.inner{
	overflow: hidden;
}

.inner img{
	transition: all 1.5s ease;
}

.inner:hover img{
	transform: scale(1.5);
}

.card-body{
	color: mediumspringgreen; 
}

.card:hover{
	box-shadow: 0 0 10px 5px mediumspringgreen;
}

.btn:hover{
	background-color: white;
	color: mediumspringgreen;
}

/*contact*/

.contact-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 80vh;
  padding: 0 2rem;
  background: var(--main-gray);
}

.contact-section-header > h2 {
  font-size: 6rem;
  color: white;
}

@media (max-width: 28.75em) {
  .contact-section-header > h2 {
    font-size: 4rem;
  }
}

.contact-section-header > p {
  font-style: italic;
  color: white;
}

.contact-links {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 980px;
  margin-top: 4rem;
  flex-wrap: wrap;
}

.contact-details {
  font-size: 2.4rem;
  text-shadow: 2px 2px 1px #1f1f1f;
  transition: transform 0.3s ease-out;
  color: mediumspringgreen;
}

.contact-details:hover {
  transform: translateY(8px);
  color: white;
  background-color: black;
}


/* Footer */

footer {
	color: white;
  font-weight: 300;
  display: flex;
  justify-content: space-evenly;
  padding: 2rem;
  background: var(--main-gray);
  border-top: 4px solid var(--main-red);
}

footer > p {
  margin: 2rem;
}

footer i {
  vertical-align: middle;
}

@media (max-width: 28.75em) {
  footer {
    flex-direction: column;
    text-align: center;
  }
}