@media (min-width:620px)/*Desktop Styles*/{
    
html{
    cursor:url(img/pawcursor.png), default;
}
    
    .sidenav{
        display:none;
    }
    .open{display:none;
       
    }
    .c1,.c2,.c3 {
        height:200px;
        width:30%;
        float:left;
        border:solid 1px black;
        margin:2% 0 0 2%;
    }
.bg{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index: -1000;
}
    
ul{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color:silver;
}
li{
    float: left; 
}
li a {
    display: inline-block;
    color:black;
    padding:30px 16px;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
}
li a:hover {
    color:blue;
}
li.dropdown{
    display: inline-block;
}
.drop{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: azure;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px
    rgba(0,0,0,0.8);
    transition: opacity .8s, visibility .8s, background-color .8s;
    /*setting up transition animation properties for when drop down box is hovered over*/
}
.drop a {
    color: black;
    padding:12px 16px;
    text-align: left;
    display: block;
    font-size: 16px;
}
.drop a:hover{
    background-color: whitesmoke;
    color: black;
}
.dropdown:hover .drop{
    opacity: 1;
    visibility: visible;
    background-color: azure;
}
    .footer{
        position: fixed;
        bottom:0px;
        left:0px;
        background-color:dimgray;
        width:100%;
        height: 55px;
        padding-top: 30px;
        text-align: center;
        font-family: sans-serif;
    }
}/*closing media query bracket*/

@media (max-width:619px){
    /*any device with a width of 619px or lower*/
    html{
    cursor:url(img/pawcursor.png), default;
}
    .pcnav{
        display:none;
    }
    .sidenav{
        display:block;
    }
    .open{
       
    }
    .c1,.c2,.c3 {
        height:200px;
        width:99%;
        border:solid 1px white;
        margin:4% 0 4% 0;
    }
.bg{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index: -1000;
}
    .sidenav{
        height:100%;
        position: fixed;
        top:0px;
        left:0px;
        z-index: 1;
        background-color: #111;
        overflow-x: hidden;
        padding-top: 50px;
        width:0px;
        transition:0.5s;
    }
.sidenav ul{
    list-style-type:none;
}
.sidenav ul li{
    margin-bottom:40px; 
}
    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 22px;
        color:aliceblue;
        display:block;
        transition: 0.3s;
    }
    .drop a {
        font-size: 18px;
        border-left: solid 1px;
        margin-left: 50px;
    }
    .sidenav a:active {
        color:darkgray;
    }
    .sidenav .closebtn{
        position: absolute;
        top: 5px;
        left:-13px;
        font-size: 50px;
    }
    .open{
        position: absolute;
        left: 20px;
        top:20px; 
        transition:0.3s;
        display:block;
    }
    .open:hover{
        color:white;
    }
      .footer{
        position: fixed;
        bottom:0px;
        left:0px;
        background-color:dimgray;
        width:100%;
        height: 55px;
        padding-top: 30px;
        text-align: center;
        font-family: sans-serif;
    }

}/*closing media query bracket*/