@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;1,700&family=Poppins:ital,wght@0,400;1,600&display=swap');

body
{
    margin: 0 !important;
    font-family: poppins, sans-serif;
}

#socialsDivInner a 
{
    text-decoration: none;
    color: black;   
}

#socialsDivOuter a 
{
    text-decoration: none;
    color: black;   
}

.cont a 
{
    text-decoration: none;
    color: black;
}
#insta img 
{
    background-color: white;
    width: 1.5em;
    margin-right: 0.5em;
    margin-left: 0.4em;
}
#instaName a
{
    text-decoration: none;
    color: black;
    
}

#instaName 
{
    margin-bottom: 2em;
}

#instaName a :visited
{
    text-decoration: none;
    color: black;
}

#video 
{
  margin-left: auto;  
  margin-right: auto;

}

#video video 
{
    margin-left: auto;  
    margin-right: auto;
    display: block;
    border:  2px solid #F27B04;
}
#scrollUp
{   width: 35px;
    height: 35px;
    text-decoration: none;
    color: #F27B04;
    position: fixed;
    right: 30px;
    bottom: 50px;
    border: solid #F27B04 1px;
    border-radius: 50px;
    display: none;
    
}

#certs
{
   margin-left: auto;
   margin-right: auto; 
    
}

.cert img
{
   display: block;
    margin-left: auto;
    margin-right: auto;
     margin-bottom: 1em; 
    width: 250px;
}

#piclifyHome img 
    {
    width: 250px;
    height: auto;
    }

#video video 
{
    width: 250px;
    height: auto;   
}

    .DpageD img
    {
    width: 250px;
    height: auto;
    }

#links #underline
{
    width: 1em;
    margin-top: 0.1em
}
#workImage
{
    visibility: hidden;
    width: 1px;
    height: 1px;
}

#socialsDivOuter
{
    display: none;
}

#mainContainer
{
    
  
    width: 100vw;
    height: auto;
}
#contentBox
{
    background-color:white;
    height: 68vh;
    width: 93vw;
    margin: auto;
    margin-top: 1.3vh;
    box-shadow: 0px 0px 9px 0.5px #666666;
    border-radius: 10px;
    
   
}

#nav
{
    height: 6vh;
    background-color: #E6D7C6;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
   
    
}

#currentPage
{
    border-bottom: solid 4px #F27B04;
}

#logo
{
    float: left;
    margin-top: 0.2em;
    margin-bottom: auto;
    margin-left: 1em;
    max-width: 20%;
    size: 0.4em;
    display: block;
}

#links
{
   float: right;
   position: relative;
    max-width: 80%;
    margin-top: 0.3em;
   margin-block-start: 0;
   text-decoration: none;

  
}

#links > ul > li
{
    font-size: 0.6em;
    text-decoration: none;
    margin-left: 1em;
    margin-right: 1em;
    list-style-type: none;
    margin-bottom: -0.4em;
}

li a 
{
    text-decoration: none;
    color: black;
    display: block;
}

#links > ul > :first-child
{
    margin-left: 0px !important;
  

    
}

#links > ul
{
    
    display: flex;
    margin-top: 0.4em;
    margin-left: 0 !important;
}


 #introContent
 {
height: auto;
margin-right: 1em;

 }

#introL
{
    padding-top: 1em;
    height: auto;
     width: 100%;
     
}

#introR
{
    height: auto;
     width: 100%;
    margin-bottom: 1em;
    
     
}
#picNsocials 
{
    display: flex;
}

#picNsocials img
{
    margin-left: 1em;
    width:8.6em;
    height: 9em;
    border-radius: 5px;
    border: solid 1px black;
    z-index: 100;
}
 
#socialsDivInner
{
    
    margin-top: 0.85em;
    margin-left: 0.2em;
    margin-bottom: auto;
    font-size: 1.3em;
   
}

#dribbleDiv
{
    margin-bottom: 0.4em;
}

#inDiv
{
    margin-bottom: 0.4em;
} 


h1
{
font-family: montserrat, sans-serif;
font-size: 1.5em;
font-weight: 700;
margin-top: 2.7em;

}

h2
{
font-family: poppins sans-serif;
font-weight: 400;
margin-bottom: 0.4em;
}

 #button
{
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none; 
    margin-left: 3em;
    font-size: 18px;
    font-family: montserrat sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    color: black;
   padding: 2px 15px;
   border: none; 
   border-radius: 20px;
   background-color: rgb(242, 123, 4);
   cursor: pointer;
   box-shadow: 1px 1px 3px 0.1px #666666;
}

#button:hover
{
   background-color: #FF9B36;
   transform: scale(1.05);
   color: black;
}
#helloNbutton h2
{
    margin-left: 0.5em;
}
.dot
{
    
    background-color:#E6D7C6;
    z-index: -2 !important;
    opacity: 0.2;
}

#picNsocials .dot
{

width:40px;
height:40px;
border-radius: 50%;
float: right;
margin-top: 8em;
margin-right: 0.1em;

}

#underline
{
background-color:#F27B04;
height: 0.4em;
width: 10em;
margin-left: 1.5em;
margin-top: -1.5em;
z-index: -2;
}
 
#introR .dot
{
    width:110px;
   height:110px;
   border-radius: 50%;
   margin-top: 0.4em;
   margin-left: -0.6em;
   margin-bottom: bottom 10px;;
}

#introR h1
{
    margin-left: 0.5em;
}
#patch
{
    background-color: white;
    width:93vw;
    height: 0.2em;
    z-index: 100 !important;
    margin-left: auto;
    margin-right: auto;
    margin-top: -0.3em;
}

#mainContent
{
    z-index: -1;
    background-color:white;
    height: auto;
    width: 93vw;
    margin: auto;
    margin-top: -2vh;
    padding-top: 8em;
    margin-bottom: 0.5em;
    padding-bottom: 0.1em;
    box-shadow: 0px 10px 9px 0.5px #666666;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

}

.project 
{
padding: 1em;
margin-right: auto;
margin-left: auto;



}

.project span
{
color: #F27B04;

}
.description
{
  
  text-align: center;
  font-weight: 600;
  font-size: 1.1em;
}
.description a 
{
    font-family: montserrat sans-serif;
    text-align: right;
    font-weight: 600; 
    font-size: 1.4em; 
    margin-bottom: 0; 
    text-decoration: none;
    color: black;
    display: block;
}

.project #underline 
{
    float: right;
    margin-top: -0.5em;
    height: 0.3em;
    width: 5em;
    margin-bottom: 0;
}
 
.description p
{
  margin-bottom: 0.5em;  
}


.pCover img
{
    display: block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0.5em;
   border:solid 3px black;
   border-radius: 14px;
}





footer
{
    text-align: center;
font-size: 0.6em;
}

@media screen and (orientation:landscape) 
{ 
  
  #mainContainer
  {
   height: 70vh; 
  }
#nav 
  {
     height: 25vh;
  }
}

@media only screen and (max-width:308px)
{
    #scrollUp
    {
        right: 20px;
        bottom: 40px;
    }
    #nav
    {  
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: -4px;
        z-index: 101;
    }

    #backNarrow
    {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 40px;
        z-index: 101;
    }

    .cert img 
    {
        max-width: 200px;
    }
   
    #links
    {
        margin-top: 0.65em;
    }
    #links > ul > li
    {
        font-size: 0.5em;
    }  

    #logo
    {
        width: 30px;
        height: 30px;
        margin-top: 0.6em;
        
    }

    h1 
    {
        font-size: 1.2em;
        margin-bottom: 0;
    }
 #underline
{
    height: 4px;
    margin-top: -0.2em;
}
 .description h2
    {
        font-size: 1.2em;
    }

    #piclifyHome img 
    {
    width: 200px;
    height: auto;
    }

    #video video 
{
    width: 200px;
       
}

    .DpageD img
    {
    width: 200px;
    height: auto;
    }

    #contactContent
    {
        font-size: 0.8em;
    }

    #emailA
{
    margin-top: 0.15em;
}

#telNum
{
    margin-top: 0.15em;
}

#INlink
{
    margin-top: 0.15m;
}
}

@media only screen and (min-width:375px)
{
#logo
{
    margin-top: 0.4em;

}
#links
{
    margin-top: 0.35em;

}

#piclifyHome img 
    {
    width: 300px;
    height: auto;
    }

    #video video 
{
    width: 300px;
       
}

    .DpageD img
    {
    width: 300px;
    height: auto;
    }

}

@media only screen and (min-width:550px)
{

    #piclifyHome img 
    {
    width: 400px;
    height: auto;
    }
    #video video 
    {
        width: 400px;
          
    }
    
    .DpageD img
    {
    width: 400px;
    height: auto;
    }

}

@media only screen and (max-width:690px)
{
    body 
    {
        background-image: url("/IMAGES/Frame\ 6.svg");
        background-repeat: repeat-y;
        background-attachment: fixed;
        background-position: center !important;
    }

    #nav
    {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: -4px;
        z-index: 101;
    }

    #backNarrow
    {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 40px;
        z-index: 101;
    }  
}

@media only screen and (min-width:691px)
{

    body 
    {
        background-image: url("/IMAGES/bgImage.png");
background-repeat: repeat-y;
background-attachment: fixed;
background-position: center !important;
    }
    #scrollUp
    {
        right: 50px;
        bottom: 50px;
    }
    .cert img 
    {
        width: 350px;
    }


    #piclifyHome img 
    {
    width: 600px;
    height: auto;
    }

    #video video 
{
    width: 600px;
       
}


    .DpageD img
    {
    width: 600px;
    height: auto;
    }

    #workImage 
    { 
        padding-bottom: 2em;
        float: left;
        margin-top: 8vh; /*24*/
        width: 100px;
        height: 50px;
        margin-left: 0.5em;
       
    }
    #workImage img
    {
        visibility: visible;
        width: 100px;
        height: 50px;
       
        
    }
   #nav 
   {
       height: 6vh;
   }

   #logo
   {
       margin-top: 0.7em;
   }
  #links
  {   margin-top: 0.6em;
      margin-right: 1em;
      
  }
    
  #contentBox
    {
        height: 55vh ;
        width: 85vw ;
        margin-top: 6em;
        margin-left: auto !important;
        margin-right: auto !important;
    }
#introContent
{   width: 100%;
    height: 48.9vh;
    display: flex;
    
    margin-right: 0;
    

}

#introContent .dot
{
display: none;


}

#introL
{
    height: 100%;

     width: 50%;
     
     
     
}

#introR
{
    height: 100%;
     width: 50%;
    background-color: #D6C2AF;  
    margin-top: 0;
    margin-right: 0; 
    margin-bottom: 0;
    border-bottom-right-radius: 10px;
    
    
     
}

#introR h1 
{
    margin-left: 1em;
    margin-top: 11.2em;
    

}


#mainContent
{
    width: 85vw;
    margin-top: 6em;
    box-shadow: 0px 0px 9px 0.5px #666666;
    border-radius: 10px;
    padding-top: 0.1em;
    margin-left: auto;
    margin-right: auto;
    

}

#patch
{
    display: none;
   
}

#socialsDivOuter
{
    
    margin-right: 3em;
}

.project
{
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
}

.description :first-child
{
margin-top: 2em;
}

#wireframesContainer
{
  display: flex;
 
  
}

.pageDesigns
{

display: flex;
}
#LFDcontainer
{
    display: flex;
}

}

@media only screen and (min-width:830px)
{
  
    #piclifyHome img 
    {
    width: 650px;
    height: auto;
    }


    #video video 
{
    width: 650px;
    height: auto;   
}

    .DpageD img
    {
    width: 650px;
    height: auto;
    }

#links
{
    margin-top: em;/*????????*/
}

#logo
{
    margin-top: 0.7em;
}
  
   #workImage 
    { 
       
        margin-top: 10vh; /*24*/
       
    }
}




    @media only screen and (min-width:930px)
{ 
    body 
    {
        background-image: url("/IMAGES/Frame\ 7.svg");
background-repeat: repeat-y;
background-attachment: fixed;
background-position: center !important;
z-index: -2;
    }

    #workImage
    {
        
        
        margin-top: 5.5em;
         
    }
    #scrollUp
    {
        right: 60px;
        bottom: 60px;
    }
    #certs
    {
        margin-left: auto;
        margin-right: auto;
       display: flex;
    }

    .cert img 
    {
        margin-bottom: 0;
        padding-right: 1em;
        margin-left: auto;
        margin-right: auto;
        width: 275px;
        height: auto;
    }
    #piclifyHome img 
    {
    width: 700px;
    height: auto;
    }

    #video video 
{
    width: 700px;
       
}

    .DpageD img
    {
    width: 700px;
    height: auto;
    }
 
    #mainContent
    {
        display: flex;
        width: 97vw;
        border-radius: 0px;
        padding-bottom: 0;
        
    }

    #contentBox
{
    background-color:white;
    height: 66vh;
    width: 70vw;
    
    margin-top: 10vh;
    box-shadow: 0px 0px 9px 0.5px #666666;
    border-radius: 0px;
    
   
}

#nav 
{
    height: 10vh;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}

#logo
{
    margin-top: 1.6em;
    

}
#links
{
    margin-top: 1.6em;
}

#introBox
{
    height: 70vh;
}
#introR h1
{   
    position: relative;
    font-weight: 900;
    font-size: 1.6em;
    margin-top: 10em;
}

#introR 
{
    height: 56vh;
    border-bottom-right-radius: 0px;
}

#introR #underline
{
    border-bottom-right-radius: 0px;
    margin-bottom: 4.82em;
}

    
footer
{
    font-size: 0.8em;
}

.project
{
    margin-top: -2em;
    
}



#socialsDivInner
{
    display: none;
}
#socialsDivOuter
{
    font-size: 1.6em;
    display: unset;
    float: right;
    visibility: visible;
    margin-right: 4vw;
    margin-top: -39vh;
    
}



}

@media only screen and (min-width:1350px)
{
    #scrollUp
    {
        right: 70px;
        bottom: 70px;
    }
    #workImage 
    {
        float: left;
        
        margin-top: 5.5em;
         
    }

    .DpageD img
    {
    width: 700px;
    height: auto;
    }

    .cert img 
    {
        width: 350px;
    }
   #introR h1 
   {
       margin-top: 9em;
   }
}

@media only screen and (min-width:1440px)
{
    #introR h1 
    {
        margin-top: 11em;
    }  
    
    #workImage 
    {
        margin-top: 6em;
         
    }

   
}
@media only screen and (min-width:1599px)
{
    #introR h1 
    {
        margin-top: 12em;
    }  
    
    #workImage 
    {
      margin-top: 6em 
           
    }
}

/*ABOUT ME*/

#projectContentBox  
{
    background-color:white;
    height: auto;
    width: 93vw;
    margin: auto;
    margin-top: 1.3vh;
    box-shadow: 0px 0px 9px 0.5px #666666;
    border-radius: 10px;
    
}



#linkToHome
{
    display: block;
}
 
#backNarrow
{
    display: flex;
}

#back a
{
margin-top: 0.2em;
   margin-left: 0.1em; 
   font-family: montserrat sans-serif;
   font-weight: 600; 
   font-size: 1.4em; 
   margin-bottom: 0; 
   text-decoration-color: #F27B04;
   color: black;
   display: block;
}


#intro h3
{
    padding: 20px;
    padding-top: 2px;
    font-size: 0.8em;
    margin: 0;
}

#projectContent p
{
    padding: 20px;
    font-size: 0.8em;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;

}

#ending p
{
    padding: 20px;
    font-size: 0.8em; 
    font-weight: 600; 
}

#wireframe
{
    margin-left: auto;
    margin-right: auto;  
}


#wireframe img
{
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: solid black 1px;
    border-radius: 0px; 
    width: 159px;
    height: 357px;
}

#pageD
{
    margin-left: auto;
    margin-right: auto;   
}

#piclifyMobileHome img
{
    display: block;
    margin-left: auto;
    margin-right: auto;  
}

#piclifyHome img
{
    display: block;
    margin-left: auto;
    margin-right: auto; 
    height: auto;
    margin-bottom: 1em;
    border: solid 2px 
}

#pageD img
{
    margin:10px;
    display: block;
    margin-left: auto;
    margin-right: auto; 
    width: 159px;
    height: 357px;
    border-radius: 15px;
    border: solid 1.9px black ; 

}

.DpageD img
{
    display: block;
    margin-left: auto;
    margin-right: auto; 
    height: auto;
    margin-bottom: 1em;
    
}

#lfd
{   
   
    margin-left: auto;
    margin-right: auto;
}

#lfd img 
{
    
    margin-bottom: 1em;
    display: block;
    margin-left: auto;
    margin-right: auto; 
    border: solid black 2px;
    border-radius: 20px; 
}



.pageDesigns :last-child img
{
    margin-bottom: 1em;
}

#wireframesContainer :last-child img
{
    margin-bottom: 1em;
} 


.paragraph > p > span
{
   font-style: italic; 
   font-weight: inherit;
}

#piclifyMobileHome
{
    padding-bottom: 20px;
}

#contactContent
{
    margin-left: 1em;
}


#aboutMeContent
{
    margin-left: 1em;
    margin-right: 1em;
}

.cont
{
    display: flex;
    margin-bottom: 0.5em;
}

#nameNaddress h1
{
    margin-bottom:-0.8em;
}

.left
{
    display: flex;
    
}

.sectionTitle h3
{
    margin-top: -0.05em;
    margin-bottom: 0;
}

#headline h1
{
    margin-top: 0.5em;
}

.bullets span 
{
    font-weight: 600;
}

#headline span
{
color:#F27B04 ;
}

.colour
{
    display: flex;
    margin-bottom: 0.5em;
}

#fontsNtypo
{
    margin-left: 1.3em;
}

#tone1
{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-color: #48D1CC;
   
margin-right: 0.5em;
border: solid 0.2px black;
}

#tone2
{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-color:#EFEBDA;
    
margin-right: 0.5em;
border: solid 0.2px black;
}

#tone3
{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-color: #F9F4E3;
   
margin-right: 0.5em;
border: solid 0.2px black;
} 

#tone4
{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-color: #000000;
    
margin-right: 0.5em;
border: solid 0.2px black;
} 

#tone5
{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-color: #FFFFFF;
    
margin-right: 0.5em;
border: solid 0.2px black;
}

#ending h3
{
margin-left: 1em;
padding-bottom: 1em;
font-size: 0.8em;

}

#ending h4
{
margin-left: 0.5em;
margin-bottom: 0;
margin-left: 0.7em;

}

#backNarrow
{
width: 100%;
background-color: white;
position: sticky;
z-index: 100;

}