* {
            margin: auto;
            font-family: sans-serif;
padding:2px;
        }
        .header {
            margin:auto;
            background-color: #202020;
            padding:10px;
        }
        
        p{
          padding:10px;
          background-color:lightgrey;
                      max-width:800px;
          
        }
        nav {
            display: flex;
            margin: auto;
            padding: 10px;
            align-items: center;
            justify-content: space-between;
        }
        
        nav li{
          display:inline-block;
          list-style:none;
          text-align:center;
          padding:5px;

        }
        
      img{
        padding:10px;
        
     }
      
       ul li {
         padding:10px;
         margin-left:30%;
         max-width:700px;
            
        }
        
      ul li li {
        padding:10px;
        margin-left:31%;
        max-width:700px;
        }
        
      ol li {
         padding:10px;
         margin-left:30%;
         max-width:700px;
      }
 
      nav a {
        color:plum;
           
        }
        

        
        a:hover {
          color: blue;
         
        }
        
        a:visited{
          color:purple;
        }
        .button-cv, .button-gfc {
            display: inline-block;
            margin-left: 0%;
            border-radius: 5px;
            transition: background-color 0.5s;
            background: indigo;
            padding: 10px;
            text-decoration: none;
            font-weight: bold;
            color: white;
            border: none;
            cursor: pointer;
        }
        .button-cv:hover {
            background-color: white;
            color: #202020;
        }
        .button-gfc {
            background: purple;
        }
        .button-gfc:hover {
            background-color: white;
            color: #202020;
        }
        .body {
          display:block;
 
   
           background-color:lightgrey;

        }
        
        .footer {

          background-color:#202020;
color:white;
text-align:center;
        }
        
        .footer a {
          color:plum;
        }
        
        
        
        h2 {
            font-size: 30px;
            color: #202020;
            margin-bottom: 20px;
            padding:10px;
            max-width:800px;
        }
        
        h3{

                    max-width:800px;
                    padding:10px;
        }
        
        h4{font-size: 32px;
        max-width:800px;
          padding:10px;
        }
        
        h5{
          font-size: 30px;
        max-width:800px;
          padding:10px;
        }
        
        .demo1 {
            color: white;
            margin-bottom: 30px;
            background-color: indigo;
                        max-width:800px;
        }
        .alert {
              color: #202020;
            margin-bottom: 30px;
            background-color: yellow;
                        max-width:800px;
        }
        .button-lrn, .button-hire {
            background: purple;
            padding: 10px 12px;
            text-decoration: none;
            font-weight: bold;
            color: whitesmoke;
            display: inline-block;
            margin: 30px 8px;
            border-radius: 5px;
            transition: background-color 0.3s;
            border: none;
            letter-spacing: 1px;
            cursor: pointer;
        }
        .button-lrn:hover {
            background-color: whitesmoke;
            color: #202020;
        }
        .button-hire {
            background: #202020;
        }
        .button-hire:hover {
            background-color: grey;
        }
        .green {
            color: seagreen;
        }
        .image {
            height: 10em;
            clip-path: circle(40%);
            display:block;
        }
              .logo {
                
                height: 10em;
                display:inline;
            
        }  
                .container {
            max-width: 80em; /* Fixed width */

        }
        
       /* Sprites */
       
        .sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: inline-block;
}

.sprite-github {
    width: 30px;
    height: 30px;
    background-position: -5px -5px;
}

.sprite-linkedin {
    width: 30px;
    height: 30px;
    background-position: -45px -5px;
}
        
      

/* Filter Projects */

#tag-filters {
  margin-bottom: 20px;
}
.tag-btn {
  margin-right: 10px;
  padding: 8px 16px;
  cursor: pointer;
}
.project {
  border: 1px solid #ddd;
  padding: 12px;
  margin-bottom: 10px;
  display: block;
}
.project.hide {
  display: none;
}