style.css

body{
  margin:0;
  padding:0;
  color:#666;
  background:#888;
  font-family:Ubuntu,Arial,sans-serif;
  font-size:18px;
}


h2,h3{
  color:#888;
  font-weight:bold;
  text-align:center;
  text-transform:capitalize;
}

#black{
  color: black;
  padding: 0;
  margin-bottom: 0;
  
}



a{
  color:blue;
}
a:hover,a:focus{
    color:blue;
  }
#banner .container, 
main header, 
#portfolio .grid,
#certification .grid,
#contact>div,
footer #footer-above{
  display:flex;
  flex-flow:row wrap;
  justify-content:space-around;
  align-items:flex-start;
  margin:0 auto; 
}


#banner{
  background-color:forestgreen;
  height:60px;
  box-shadow:0px 2px 2px 1px rgba(0, 0, 0, 0.2);
  border-color:#592059;
}
#banner .container{
    width:95%;
    max-width:1024px;
    justify-content:space-between;
    align-items:center;
  }
#banner .container::before, #banner .container::after{
      display:none
    }
#banner img{
    height:50px;
    margin:15px 0;
    margin-top:5px;
  }
nav{
  font-size:13px;
  background:forestgreen;
  transition:all .9s;
}
@media(max-width:768px){
nav{
    padding:5px;
    text-align:center;
    margin:0 auto;
    width:120%
}
    nav .active a{
      color:black !important;
      background:silver !important;
      box-shadow:0px 2px 2px 1px rgba(0, 0, 0, 0.1);
    }
  }
.nav>li{
    height:100%;
    text-transform:capitalize;
    font-weight:bold;
    letter-spacing:1px;
    display:inline-flex;
  
  }
.nav>li a{
      color:silver !important;
      padding:5px 10px;
    }
.nav>li a:hover{
        color:black !important;
        background:cadetblue !important;
        box-shadow:0px 2px 2px 1px rgba(0, 0, 0, 0.1);
      }
.navbar-toggle{
    margin-right:0;
  }
#top{
  height:80px;
  display:block;
}
main >*:not(.scroll-top){
    max-width:1024px;
    margin:0 auto;
    box-shadow:0px 0px 2px 1px rgba(0, 0, 0, 0.2);
  }
main header{
    background:deepskyblue;
    color:black;
    text-align:right;
    padding:70px 10% 50px;
    align-items:flex-end;
    align-content:space-around;
  }
@media(min-width:1023px){
main header{
      padding:50px 30px
  }
    }
main header img{
      border-radius:40%;
      margin:30px 0 10px;
      max-width:80%;
      height:auto;
      width:250px;
    }
main header .intro-text{
    max-width:675px;
    text-align:center;
    margin-bottom:30px;
  }
@media(min-width:1023px){
main header .intro-text{
      text-align:left;
      width:610px;
  }
    }
main header .intro-text .skills{
      font-size:1.15em;
    }
main section{
    background:#eee;
    padding:40px 0;
  }
main section#contact>div{
      margin:0px auto;
    }
main section#contact>div>div{
        width:80%;
      }
main section#contact>div>div p{margin:60px auto 0;
        max-width:700px;}
@media(min-width:1023px){
main section#contact>div>div{
          max-width:38%
      }
          main section#contact>div>div p{margin-top:35px;
          }
            main section#contact>div>div p:last-child{
              margin-top:270px;
            }
        }
#portfolio .grid, #certification .grid{
	padding:0;
	max-width:90%;
	list-style:none; 
	margin-top:20px;
}
#portfolio .grid li, #certification .grid li{
	margin:20px;
  max-width:600px;
  }
@media(min-width:1023px){
#portfolio .grid li, #certification .grid li{
    max-width:420px
  }
    }
#portfolio img, #certification img{
  
	max-width:100%;
	height:auto;
	display:block;
}
form{
  width:80%;
}
@media(min-width:1023px){
form{
    width:40%;
    margin-left:20px
}
  }
form .row:first-child .form-item{
    border-top:1px solid #fff;
    }
.form-item{
    position:relative;
    margin-bottom:10px;
    padding-bottom:10px;
    border-bottom:1px solid black;
  }
.form-item input, .form-item textarea{
      z-index:1;
      position:relative;
      padding-right:0;
      padding-left:0;
      border:0;
      border-radius:0;
      font-size:1.5em;
      background:0 0;
      box-shadow:none!important;
      resize:none;
      width:100%;
    }
.form-item input:focus, .form-item textarea:focus{
        outline:0
      }
.form-item label{
      display:block;
      z-index:0;
      position:relative;
      top:2em;
      margin:0;
      font-size:.85em;
      line-height:1.764705882em;
      vertical-align:middle;
      vertical-align:baseline;
      opacity:0;
      transition:top .3s ease,opacity .3s ease;
    }
.form-item-filled label{
      top:0;
      opacity:1;
      color:#aaa;
    }
.form-item-focused label{
      color:#722872;
    }
footer{
  color:#fff;
  background-color:#aaa;
  text-align:center;
  box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.2);
}
footer h3{
    margin-bottom:30px;
    color:#fff;
  }
#footer-above{
    padding-top:50px;
    width:80%;
  }
#footer-above div{
      margin-bottom:50px;
      width:250px;
    }
#footer-above ul{
      padding:0;
    }
#footer-above li{
      display:inline;
    }
#footer-below{
    box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.2);
    padding:25px 0;
    background-color:darkcyan;
    text-align:center;
  }

#footer-below a {
  color: silver;
}
.button{
  color:#fff;
  border:solid 2px #fff;
  border-radius:50%;
  display:inline-block;
  width:50px;
  height:50px;
  text-align:center;
  font-size:20px;
  line-height:48px;
  transition:all .3s ease-in-out;
}
.button:hover{
    border:solid 2px #fff;
    color:#722872;
    background:#fff;
  }
.scroll-top{
  z-index:1049;
  position:fixed; 
  visibility:visible;
  bottom:2%;right:2%;
}
.scroll-top a{
    background:#722872;  
  }
.scroll-top a:hover, .scroll-top a:focus{
      color:#722872;
      background-color:#bbb;
      border-color:#722872;
    }
@media(min-width:768px){
.scroll-top a{
      visibility:hidden  
  }
    }
hr.star-bright, hr.star-dark{
    margin:20px auto 20px;
    padding:0;
    max-width:512px;
    border:0;
    border-top:solid 3px;
    text-align:center;
  }
@media(min-width:1023px){
header hr.star-bright, header hr.star-dark{
        margin-right:0;
        text-align:right
    }
        header hr.star-bright:after, header hr.star-dark:after{
          right:-10px;
        }
      }
hr.star-bright:after, hr.star-dark:after{
      content:'\f121';
      font-family:FontAwesome;
      display:inline-block;
      position:relative;
      top:-.8em;
      padding:0 .25em;
      font-size:2em;
    }
hr.star-bright{
    border-color:#fff;
  }
hr.star-bright:after{
      color:#fff;
      background-color:#aaa;
    }
hr.star-dark{
    border-color:#888;
  }
hr.star-dark:after{
      color:#888;
      background-color:#eee;
    }

li.center-text {
  text-align: center;
}

.center-text {
  text-align: center;
}


.coverpic { 
    padding-bottom: 20px;
    background: url(images/header-background.jpg) no-repeat center center;
    background-size: cover;
    height: 300px;
}


.sololearn{
    width:15px;
    height:15px;
    display:inline-block;
    margin-bottom: 0px;
    margin-top: 0px;
    
}