*{
    box-sizing: border-box;
}

body {
     
    color: #171717;
    
    height: fit-content;
    
    background-image: url('https://cdn.pixabay.com/photo/2017/03/14/16/57/silver-2143730_1280.jpg');
    display: block;
    background-repeat: no-repeat;
    background-size: cover;
    border: none
     }
  .intro{
text-align: center;
padding: 15%;
  }
  header{
      display: grid;
    grid-template-rows:  auto  auto  auto  auto  auto  auto;
    gap: 50px ;
  }
  /* .carousel-item{
      display: block;
  } */
.colors{
    background-color:  #6c757d;
}
#carouselControls{
    margin-bottom: -50px;
    
}
.carousel-inner img{
    
    height: 300px;
    width: 100%;
} 
.carousel-inner img#theImg{
    
    margin-left: 25%;
    width: 50%;
    height: 300px;
}
/* .carousel-inner img#firstProject{
    margin: 0;
    height: 225px;
    max-width: 100%; 
} */
.carousel-control-prev-icon{
    color:#171717!important;
    background-color: #171717;
    
}
.carousel-control-next-icon{
    color:#171717!important;
    background-color: #171717;
    
}
header .navbar-light .navbar#border{
    border-color: #6c757d;
    background-color:  #6c757d;
    border: #6c757d;
}
p.description{
    margin-top: 5%!important
}
header.bg-seconday{
    background-color: aqua;
}
 
.navbar {
    display: flex;
   flex-direction: row;
   margin-bottom: -50px;
   align-items: start;
}
.navbar-nav {
    display:flex;
    align-items: flex-end;
}
.dropright .dropdown-toggle::after{
    display:none;
}

.navbar2 button{
    background-color:  #6c757d;;
    margin-left: 2%;
    border: none
    

 }
 button:focus{
     outline: #6c757d;
 }
div.dropdown-menu#socialmenu{
    background-color: #6c757d;
    min-width: 80px;
}

/* .drop-menu{
    right: 0;
    background-color: #6c757d;
} */
 .fas.fa-angle-right{
     font-size: 150%;
     padding-left: 3vw;
 }
 h3{
    text-align: center;
}
 div.carousel-item p {
    text-align: center;
    margin:0;
    width:100%;
}
footer{
         display:none
     }
#two{
    text-align: center;
}
#three{
    text-align: center;
}

@media only screen and (min-width: 768px){ 
       body{
               
        background-image: url('https://cdn.pixabay.com/photo/2017/03/14/16/57/silver-2143730_1280.jpg') ;
         }

         .carousel img{
            width: 700px;
            height: 200px;
        }
        .navbar{
            align-items: flex-start;
        }
        .carousel-inner img{
            margin: 0;
            height: 400px;
            width: 80%;
            padding-left: 20%;
        } 
        .carousel-inner img#theImg{
            margin-left: 7%;
            width: 500px;
            height: 461px;
        }
        .intro{
            padding: 5%
        }
        .aboutme p {
            text-align: center;
       
            margin-top: 0;
            margin-left: 20%;
            padding: 0;
            width: 60%;
            display: block;
            position: relative;
            }

    }
 @media only screen and (min-width: 1024px){
        body{
            background-image: url('https://cdn.pixabay.com/photo/2017/03/14/16/57/silver-2143730_1280.jpg');
            /* min-height: 1400px; */
            
        }
        header{
            display: grid;
          grid-template-rows:  auto  auto  auto  auto auto ;
          grid-template-columns: auto auto;
          gap: 50px ;
        }
        .dropdown-toggle{
            display: none;
        }
       h3{
           text-align: center;
       }
       .carousel-inner img{
        margin: 0;
        height: 500px;
        width: 500px;
        float: left;
        margin-left: 8%; 
        padding: 0
    }
    .carousel-inner img#theImg{
        padding-left: 30%;
        width: 600px;
        height: 500px;
    }
       div.carousel-item p {
           text-align: center;
           margin:0;
           width:100%;
       }
        .navbar {
   
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-around;
            align-content: flex-start;
            column-span: 1,2;
            grid-column-start: 1;
            grid-column-end: 3;
        }
        ul.navbar-nav{
            margin-right: 0px;
            width: 100%;
            justify-content: space-around;
            display: flex;

        }
         header .navbar-light .navbar#border{
            display:none;
        }
       .intro{
           grid-row-start: 2;
           grid-column-start: 1;
           grid-column-end: 3;
           padding:0;
       }
       #carouselControls{
           grid-row-start: 3;
           grid-column-start: 1;
           grid-column-end: 3;
       }
       .navbar2{
           grid-row-start: 4;
       }
       div.aboutme{
           grid-row-start: 5;
           column-gap: 50px;
           margin-bottom: 25%;
       }
       div.contactme{
           grid-row-start: 5;
           grid-column-start: 2;
       }
        
        
       p.description{
        padding: 5%;
    }
        .fas.fa-angle-right{
            display: none
        }
        .wrapper p{
            margin: 0;
        }
        footer{
            display: flex;
            position:absolute;
            width: 100%;
            
            background-color:  #6c757d
        }
        footer div{
            display: flex;
            width: 10%;
            justify-content: space-around;
            background-color:  #6c757d
        }
        footer button{
            background-color:  #6c757d;
            border: #6c757d;
        }
        footer p{
            margin:0;
            width: 100%;
            text-align: center;
        }
        .aboutme p {
            text-align: center;
       
            margin-top: 0;
            margin-left: 2%;
            padding: 0;
            width: 100%;
            display: block;
            position: relative;
            }
    }
    @media only screen and (min-width: 1024px){
        .carousel-inner img#theImg{
            padding: 0;
            margin-left: 38%;
            width: 300px;
            height: 475px;
        }
    }
    @media only screen and (min-width: 1440px){
        .carousel-inner img#theImg{
            margin-left: 32%;
            width: 500px;
            height: 477px;
        }
        p.description{
            padding: 5%;
        }
    }
    @media only screen and (min-width: 2000px){
        
        .carousel-inner img#theImg{
            padding: 0;
            margin-left: 40%;
            width: 500px;
            height: 500px;
        }
       
    }
    @media only screen and (min-width: 2880px){
        
        .carousel-inner img#theImg{
            padding: 0;
            margin-left: 5%;
            width: 700px;
            height: 500px;
        }
    }
    @media only screen and (min-width: 3072px){
        .carousel-inner img#theImg{
            padding: 0;
            margin-left: 40%;
            width: 600px;
            height: 600px;
        }
        
    }
    /* Note:
    - css grid forone columna nd three rows?
    -flex box is done
    -semantic markup?
    it's def mobile first
    -man json, don't think i have that.
    -you can click on the projects using jquery
    -it's deployable
    -transiont -100 on div and then 0
    */