body{
    
    background-color: #000000;
    background-image: linear-gradient(62deg, #000000 0%, rgb(53, 53, 53) 100%);
    margin: 0;
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
}

/*Nav***********************************/
#menutoggle{
    visibility: hidden;
}

#KvnLogo{
    height: 150px;
    width: 220px;
    transition: filter 1s;
}

#KvnLogo:hover{
    filter: drop-shadow(0 0 0.75rem white);
    
}

#navbar{
    display: flex;
    
}

header{
    background-color: dimgray;
    width:100%;
    border-bottom: 2px solid red;
    height: 150px;
}

nav ul{
    list-style-type: none;
    display: flex;
    justify-content:flex-end;
    align-items: flex-end;
    width: 100%;
}

nav a{
    text-decoration: none;
    color: black;
    margin-right: 80px;
    font-size: 20px; 
    transition: color 1s, font-size 1s, margin-right 1s;
}

nav a:hover{
    text-decoration: underline;
    font-size: 21px;
    color: red;
    margin-right: 76.5px;
}

/*Homepage******************************/
#homeContainer{
    display: flex;
    width: 100%;
    /*color: rgb(148, 148, 148);*/
    color: white;
}

#projectContainer{
    display: flex;
    flex-wrap: wrap;
    width: 70%;
}

#proj1{
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400px;
    transition: border 1s, height 1s, width 1s, color 1s;
}

#proj1 p, #proj2 p, #proj3 p, #proj4 p, #proj5 p{
    width: 300px;
    text-align: center;
}

#proj2{
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400px;
    transition: border 1s, height 1s, width 1s, color 1s;
}

#proj3{
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400px;
    transition: border 1s, height 1s, width 1s, color 1s;
}

#proj4{
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400px;
    transition: border 1s, height 1s, width 1s, color 1s;
}

#proj5{
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400px;
    transition: border 1s, height 1s, width 1s, color 1s;
}

#blurbContainer{
    display: flex;
    flex-direction: column;
    width: 30%;
    align-items: center;
    border: 2px solid red;
    margin-top: 10px;
    margin-right: 10px;
    background-color: black;
    align-items: center;
    height:720px;
}

#blurbContainer p{
    width: 300px;
    text-align: center;
}

#KevinMoscaProfile{
    height: 230px;
    width: 200px;
    border: 2px solid rgb(148, 148, 148);
}

#proj1Img, #proj2Img, #proj3Img, #proj4Img, #proj5Img{
    height: 200px;
    width: 300px;
    margin: 2px;
    border: 2px solid black;
    transition: border 1s, height 1s, width 1s;
}

#proj1:hover, #proj2:hover, #proj3:hover, #proj4:hover, #proj5:hover{
    color: red;
}

#proj1:hover img, #proj2:hover img, #proj3:hover img, #proj4:hover img, #proj5:hover img{
    border: 2px solid red;
    height: 202px;
    width: 302px;
}

/*AboutPage*****************************/

#KevinMoscaAbout{
    height: 400px;
    width: 400px;
    margin-top: 10px;
    border: 2px solid rgb(148, 148, 148);
}

#aboutImg{
    width: 400px;
    text-align: center;
    margin-left: 50px;
}
#aboutContainer{
    color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

#aboutText{
    width: 600px;
    margin-left: 50px;
    text-align: center;
}

#aboutText strong{
    color: red;
}

/*ContactPage***************************/
#contactContainer{
    display: flex;
    color: white;
    width: 100%;
}

#emailContainer{
    margin-top: 20px;
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#blurbContact{
    display: flex;
    flex-direction: column;
    width: 35%;
    align-items: center;
    border: 2px solid red;
    margin-top: 10px;
    margin-right: 10px;
    background-color: black;
    align-items: center;
    height:720px;
}

#blurbContact p{
    width: 300px;
    text-align: center;
}
#emailIcon{
    height: 200px;
    width: 200px;
}

/* Proj1********************************/
#proj1Container img{
    height: 300px;
    width: 400px;
}

/*Footer********************************/
#footerContainer{
    border-top: 2px solid red;
}

/*******************Proj 1*******************/
#proj1Container p{
    color: #fff;

}

#proj1Container{
    display: flex;
    
    width: 100%;
    flex-wrap: wrap;

}

#proj1Img1, #proj1Img2, #proj1Img3, #proj1Img4, #proj1Img5, #proj1Img6, #proj1Img7, #proj1Img8, #proj1Img9, #proj1Img10, #proj1Img11, #proj1Img12{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
#proj1Img1 p, #proj1Img2 p, #proj1Img3 p, #proj1Img4 p, #proj1Img5 p, #proj1Img6 p, #proj1Img7 p, #proj1Img8 p, #proj1Img9 p, #proj1Img10 p, #proj1Img11 p, #proj1Img12 p{
width: 350px;
text-align: center;
}

#footerContainer{
    color: #fff;
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#footerContainer a{
    text-decoration: none;
    color: #fff;
}

#DogLink{
    text-align: center;
    text-decoration: none;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

#DogLink a{
    text-decoration: none;
    color: red;
}

@media only screen and (max-width: 900px) and (min-width: 800px){
    body{
    }
    #projectContainer{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    #blurbContainer{
        visibility: hidden;
    }
    #proj1Img, #proj2Img, #proj3Img, #proj4Img, #proj5Img{
        height: 400px;
        width: 600px;
    }
    #proj1{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        justify-content: center;
        margin-left: 60px;
    }

    
    #proj2{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        margin-left: 60px;
    }
    
    #proj3{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        margin-left: 60px;
    }
    
    #proj4{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s;
        margin-left: 60px;
    }

    #proj5{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s;
        margin-left: 60px;
    }

    #proj1:hover img, #proj2:hover img, #proj3:hover img, #proj4:hover img, #proj5:hover img{
        border: 2px solid red;
        height: 402px;
        width: 602px;
    }

    /*AboutPage*****************************/

    #KevinMoscaAbout{
        height: 400px;
        width: 400px;
        margin-top: 10px;
        border: 2px solid rgb(148, 148, 148);
    }

    #aboutImg{
        width: 400px;
        text-align: center;
        margin-left: 50px;
    }
    #aboutContainer{
        color: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        flex-direction: column;
    }

   #aboutText{
        width: 80%;
        text-align: center;
    }

    #aboutText strong{
        color: red;
    }

    /*ContactPage***************************/
    #contactContainer{
        display: flex;
        color: white;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #emailContainer{
        margin-top: 20px;
        width: 65%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #blurbContact{
        display: flex;
        flex-direction: column;
        width: 350px;
        align-items: center;
        border: 2px solid red;
        margin-top: 10px;
        margin-right: 10px;
        background-color: black;
        align-items: center;
        height:720px;
    }

    #blurbContact p{
        width: 300px;
        text-align: center;
    }
    #emailIcon{
        height: 200px;
        width: 200px;
    }
    #proj1 p, #proj2 p, #proj3 p, #proj4 p, #proj5 p{
        width: 600px;
        text-align: center;
    }
    #proj1Container{
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-wrap: wrap;
    
    }
    
    #proj1Img1, #proj1Img2, #proj1Img3, #proj1Img4, #proj1Img5, #proj1Img6, #proj1Img7, #proj1Img8, #proj1Img9, #proj1Img10, #proj1Img11, #proj1Img12{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
}
@media only screen and (max-width: 800px) and (min-width: 700px){
    body{
    }
    #projectContainer{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    #blurbContainer{
        visibility: hidden;
    }
    #proj1Img, #proj2Img, #proj3Img, #proj4Img{
        height: 400px;
        width: 600px;
    }
    #proj1{
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        justify-content: center;
        margin-left: 40px;
    }
    
    #proj2{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        margin-left: 40px;
    }
    
    #proj3{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        margin-left: 40px;
    }
    
    #proj4{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        margin-left: 40px;
    }
    #proj5{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        margin-left: 40px;
    }
    #proj1:hover img, #proj2:hover img, #proj3:hover img, #proj4:hover img, #proj5:hover img{
        border: 2px solid red;
        height: 402px;
        width: 602px;
    }

    #KevinMoscaAbout{
        height: 400px;
        width: 400px;
        margin-top: 10px;
        border: 2px solid rgb(148, 148, 148);
    }
    
    #aboutImg{
        width: 400px;
        text-align: center;
        margin-left: 50px;
    }
    #aboutContainer{
        color: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        flex-direction: column;
    }
    
    #aboutText{
        width: 600px;
        margin-left: 50px;
        text-align: center;
    }
    
    #aboutText strong{
        color: red;
    }
    #aboutText{
        width: 80%;
        text-align: center;
    }

    #aboutText strong{
        color: red;
    }
    /*ContactPage***************************/
    #contactContainer{
        display: flex;
        color: white;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #emailContainer{
        margin-top: 20px;
        width: 65%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #blurbContact{
        display: flex;
        flex-direction: column;
        width: 350px;
        align-items: center;
        border: 2px solid red;
        margin-top: 10px;
        margin-right: 10px;
        background-color: black;
        align-items: center;
        height:720px;
    }

    #blurbContact p{
        width: 300px;
        text-align: center;
    }
    #emailIcon{
        height: 200px;
        width: 200px;
    }
    #proj1 p, #proj2 p, #proj3 p, #proj4 p, #proj5 p{
        width: 600px;
        text-align: center;
    }
    #proj1Container{
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-wrap: wrap;
    
    }
    
    #proj1Img1, #proj1Img2, #proj1Img3, #proj1Img4, #proj1Img5, #proj1Img6, #proj1Img7, #proj1Img8, #proj1Img9, #proj1Img10, #proj1Img11, #proj1Img12{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
}

@media only screen and (max-width: 700px) and (min-width: 300px){
    body{
    }
    #projectContainer{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    #blurbContainer{
        visibility: hidden;
    }
    #proj1Img, #proj2Img, #proj3Img, #proj4Img, #proj5Img{
        height: 300px;
        width: 400px;
    }
    #proj1{
        width:100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 600px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        justify-content: center;
        margin-left: 40px;
    }
    
    #proj2{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 600px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        margin-left: 40px;
    }
    
    #proj3{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 600px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        margin-left: 40px;
    }
    
    #proj4{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 600px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        margin-left: 40px;
    }

    #proj5{
        width:50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 700px;
        transition: border 1s, height 1s, width 1s, color 1s, margin-left 1s;
        margin-left: 40px;
    }

    #proj1:hover img, #proj2:hover img, #proj3:hover img, #proj4:hover img, #proj5:hover img{
        border: 2px solid red;
        height: 302px;
        width: 402px;
    }
    nav ul{
        list-style-type: none;
        display: flex;
        justify-content:flex-end;
        align-items: flex-end;
        width: 40%;
    }
    #KevinMoscaAbout{
        height: 400px;
        width: 400px;
        margin-top: 10px;
        border: 2px solid rgb(148, 148, 148);
    }

    #aboutImg{
        width: 400px;
        text-align: center;
        margin-left: 50px;
    }
    #aboutContainer{
        color: white;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        flex-direction: column;
    }

    #aboutText{
        width: 80%;
        text-align: center;
    }

    #aboutText strong{
        color: red;
    }
    /*ContactPage***************************/
    #contactContainer{
        display: flex;
        color: white;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #emailContainer{
        margin-top: 20px;
        width: 65%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #blurbContact{
        display: flex;
        flex-direction: column;
        width: 350px;
        align-items: center;
        border: 2px solid red;
        margin-top: 10px;
        margin-right: 10px;
        background-color: black;
        align-items: center;
        height:720px;
    }

    #blurbContact p{
        width: 300px;
        text-align: center;
    }
    #emailIcon{
        height: 200px;
        width: 200px;
    }
    #proj1Container{
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-wrap: wrap;
    
    }
    
    #proj1Img1, #proj1Img2, #proj1Img3, #proj1Img4, #proj1Img5, #proj1Img6, #proj1Img7, #proj1Img8, #proj1Img9, #proj1Img10, #proj1Img11, #proj1Img12{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
    }
}