/*-----Global-----*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}

html {
    font-family: monospace; 
}

body {
    width: 100%;
    background-image: url(images/BG_01.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.wrapper {
    width: 90%;
    margin: 0 auto;
}

.wrapper a { /*floats author logo to the right*/
    float: right;
    font-family: Montserrat; 
}

/*make sure nav doesnt have 0 height and displays correctly*/
.clearfix::after { 
    content: "";
    clear: both;
    display: table;
}

h1 {
    color: white;
    font-size: 48px;
}

p {
    color: white;
    font-size: 16px;
}

ul {
    list-style: none;
    margin-top: 30px;
}

li {
    color: white;
    font-size: 16px;
    margin-bottom: 20px;
}
/*-----nav-----*/
nav {
    height: 100px;
    line-height: 100px;
}

nav a {
    color: white;
    text-decoration: none;
}

nav a img {
    vertical-align: middle;
}
/*2 to selct image*/
nav a:nth-child(2){ 
    float: right;
}

/**Floats css dribble image to right**/
nav input[type="image"] {
   float: right;
}
/*2 to selct image*/
nav a:nth-child(2){ 
    float: right;
}

/*-----header-----*/
header {
    margin: 100px 0 200px 0;
    text-align: center;
    
}

header p {
    width: 45%;
    margin: 30px auto 0 auto;
}

header a {
    color: #FF4A5E;
    text-decoration: none;
}
/*-----work-----*/
.work {
    text-align: center;
    width: 100%;
}

.work a img {
    margin: 1%;
    width: 45%;
}

.work-logo{
    color: #FF4A5E;
}
/*-----------------Dropdown in nav-----*/
/* Style The Dropdown Button */

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
   
    
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border: 5px solid;
    border-radius:  30px 30px 30px 30px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    font-family: serif;
    display: block;
    
    border-radius:  30px 30px;
    
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: gainsboro}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
   display: grid; /*changes display of dropdown;*/
    margin-top: 70px; /*changes spacing between menu content and button*/
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    
}
/*-----whatIDO-----*/
.whatIDo {
    text-align: center;
    margin: 100px 0 200px 0;
    position: relative;
    font-family: 'lato';
}

.whatIDo h2, li {
/*    color: #13A3FD;*/
    color: #FF4A5E;
}

.iAm {
    color: #25272C;
    font-size: 150px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    top: -20px;
    z-index: -1;
}

/*-----work2-----*/
.work2 {
width:100%;
text-align: center;
    
}

.work2 a img {
    margin: 1%;
    width: 50%;
}

/*-----footer-----*/
footer {
    text-align: center;
    margin: 60px 0;
   color: white;  
}

footer p {
    color: #404348;
    
}
/*-----Responsive-----*/
@media only screen and (max-width: 991px){
    
    header p {
        width: 100%;
    }
    
    .work a img {
        margin: 2%;
        width: 96%;
    }
    
    .work2 a img {
        margin: 2%;
        width: 96%;
    }
}

/**Responsive for Desktop, Tablet, and Mobile**/
@media only screen and (max-width: 768px){
    header {
        width: 96%;
        margin: 30px auto 100px auto;
        text-align: left;
    }
    
    .header h1 {
        color: white;
    }
    
    .whatIDo {
        text-align: left;
        width: 96%;
        margin: 70px auto 100px auto;
    }
    
    .IAm {
        visibility: hidden;
    }
    
    footer {
        text-align: left;
        width: 90%;
        margin: 60px auto;
    }
}

/**Hover transition affect for images**/
img {
    transition: all 1s;
}

img:hover {
    transform: scale(1.1);
}

/***Modal box*****/
.myImg:hover {
    opacity: 0.7;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.6s;

}


/***Customized scrollbar***/

/* width */
::-webkit-scrollbar {
    width: 10px
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
    
    
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: grey; 
    border-radius: 10px;
   
}
/*Imports google fonts*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');