* {
	
margin: 0px;
padding: 0px;
box-sizing: border-box;

}

/*-----------------------------------------mobile----------------------------------------------*/

/* profile pic and copy */
#intro-container {

background-color: none;
margin-left: 25px;
margin-right: 25px;
margin-top: 100px;
margin-bottom: 40px;
max-width: 1000px;

}

/* container for image */
#profile-pic-container {

height: 350px;
width: 350px;
border-radius: 10px;
margin: auto;
margin-bottom: 40px;
background-color: none;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;

}

/* settings for gif 

#profile-pic-container img {

position:relative;
right:140px;
top:-150px;
transform: scale(.6);


}*/


/* controls image inside profile-pic-container */
#profile-pic-container img {

width:400px;

}

/* controls video inside profile-pic-container */
#profile-pic-container video {

width:400px;
margin-top: 20px;

}


/*hello*/
#intro-container h6 {

text-align: center;
font-family: "lavanderia-sturdy";
color: #a8a8a8;
font-size: 40px;
background-color: none;
margin: 0px;
padding: 0px;
margin-bottom: -15px;

}


/*i'm mark graphic designer*/
#intro-container h1 {

color:#7b7b7b;
text-align: center;
font-family: "sf-display-bold";
line-height: 1em;
font-size: 50px;

}


/*Visual designer*/
#intro-container span{

color: #2276d3;

}


/*Small line in intro container*/
hr {

border:.25px solid #a8a8a8;
margin-bottom: 20px;
margin-top: 20px

}


/*short paragraph*/
#intro-container p {

font-family: "sf-display-regular";
color: #7b7b7b;
line-height: 2em;
font-size:16px;
text-align: center;

}


/*controls gray background for all sections*/
.new-section {

margin-top: 80px;
background-color: #fafafa;
text-align: center; /*centers section labels*/
border-top:.25px solid #a8a8a8;
border-bottom:.25px solid #a8a8a8;
padding-top: 40px; /*a little space*/
padding-bottom: 40px; /*a little space*/

}


/*controls labels (Strengths, Interests, etc.) for all sections*/
.about-me-section-label {

font-family: "sf-display-medium";
color: white;
background-color: #2276d3;
display: inline;
border-radius: 2px;
letter-spacing: .5px;
position: relative;
top:-50px;
padding: 10px 20px;
letter-spacing: .5px;
border-radius: 50px;
font-size: 18px;

}

/*spacer at bottom of page*/
#bottom-spacer{

height: 100px;

}


/*----------------------------strengths section-------------------------*/

/*container for stengths cards*/
#traits-container, .links-container {

background-color: none;
margin-right: 25px;
margin-left: 25px;
max-width: 1000px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;


}


/*controls small white containers in strength sections*/
.trait-div, .linkdiv {

background-color: white;
border:.25px solid #a8a8a8;
border-radius: 10px;
font-family: "sf-display-medium";
font-size:16px;
color:#7b7b7b;
width: 48%;
padding: 22px;
margin-bottom: 20px;
position: relative;

}



/*----------------------------interests section-------------------------*/

/*container to flex animation divs*/
.interests-container {

background-color: none;
margin-right: 25px;
margin-left: 25px;
max-width: 1000px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: left;


}


/*need this div for flex to work*/
.icons-image-container { 

background-color: none;
font-family: "sf-display-medium";
font-size:16px;
color:#7b7b7b;
width: 50%;
margin-bottom: 40px;
text-align: center;/*this keeps icons centered in div*/
position: relative;


}


/*controls gifs images inside .icons-image-container*/
.icons-image-container img {

padding-bottom: 10px;
width: 60%;
background-color: none;
}



/*------------------------program section begin---------------------*/



/*main container*/
.programs-container {

background-color: none;
margin-right: 25px;
margin-left: 25px;
max-width: 1000px;

}


/*controls gray background for progress bar*/
.progress-bar {

background-color: #d0d0d0;
height: 15px;
text-align: left;
font-family: "sf-display-medium";
font-size:16px;
color: #7b7b7b;
margin-bottom: 60px;
width: 100%;
border-radius: 20px;
position: relative;

}


/*controls Program name (Photoshop, Illustrator, etc.)*/
.progress-bar p {

margin-top:12px;

}


/*controls for proficient labels*/
.progress-bar span {

font-size:11px;
position: absolute;
right:5px;
top:22px;

}


.progress-fill-illustrator {

background-color: #2276d3;
width: 98%;
height: 15px;
border-radius: 20px 0px 0px 20px;

/*box-shadow: rgb(170,170,170) 4px 0px 0px;*/


}


.progress-fill-photoshop {


background-color: #2276d3;
width: 98%;
height: 15px;
border-radius: 20px 0px 0px 20px;


}


.progress-fill-indesign {

background-color: #2276d3;
width: 95%;
height: 15px;
border-radius: 20px 0px 0px 20px;

}


.progress-fill-ae {

background-color: #2276d3;
width: 85%;
height: 15px;
border-radius: 20px 0px 0px 20px;


}



.progress-fill-sketch {

background-color: #2276d3;
width: 0%;
height: 15px;
border-radius: 20px 0px 0px 20px;
box-shadow: rgb(170,170,170) 4px 0px 0px;

}



.progress-fill-figma {

background-color: #2276d3;
width: 85%;
height: 15px;
border-radius: 20px 0px 0px 20px;

}


.progress-fill-microsoft {

background-color: #2276d3;
width: 85%;
height: 15px;
border-radius: 20px 0px 0px 20px;


}


.progress-fill-html {


background-color: #2276d3;
width: 90%;
height: 15px;
border-radius: 20px 0px 0px 20px;

}




.progress-fill-css {


background-color: #2276d3;
width: 90%;
height: 15px;
border-radius: 20px 0px 0px 20px;

}


.progress-fill-javascript {


background-color: #2276d3;
width: 50%;
height: 15px;
border-radius: 20px 0px 0px 20px;
box-shadow: rgb(170,170,170) 4px 0px 0px;

}


.progress-fill-jquery {


background-color: #2276d3;
width: 60%;
height: 15px;
border-radius: 20px 0px 0px 20px;


}


.progress-fill-c4d {


background-color: #2276d3;
width: 50%;
height: 15px;
border-radius: 20px 0px 0px 20px;

}


.progress-fill-blender {


background-color: #2276d3;
width: 30%;
height: 15px;
border-radius: 20px 0px 0px 20px;

}


/*---------------------------------experience section begin--------------------------------*/

/*container for all experience cards together*/
.experience-container {

background-color: none;
margin-right: 25px;
margin-left: 25px;
max-width: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;


}


/*white card settings*/
.experience-card {

background-color: white;
border: .25px solid #a8a8a8;
border-radius: 18px;
text-align: left;
font-family: "sf-display-medium";
width: 100%;
margin-bottom:25px;
height: 340px;
overflow: hidden;
position: relative;

}


/*company logo inside cards*/
.experience-card img {

width: 150px;
margin-left: 40px;
margin-top: 40px;


}


/*Company name settings*/
.experience-card h2 {

color: #2276d3;
padding-top: 10px;
margin-left: 40px;


}


/*all experience card type settings*/
.experience-card p {

color: #7b7b7b;
margin-bottom: 20px;
margin-left: 40px;
margin-top: 10px;
font-size:16px;

}


/*experience date settings*/
.experience-container p:nth-child(4){

margin-top: -15px;
margin-bottom: 30px;
color: #a8a8a8;

}


/*button settings*/
.visit-website-button {

border-top: .25px solid #a8a8a8;
background-color: none;
width: 100%;
height: 100%;
transition: all .25s ease-out;

}


/*text inside button settings*/
.visit-website-button p {

color: #7b7b7b;
text-decoration: underline;
padding-top: 25px;
font-size: 16px;

}


/*change background when hovering*/
.visit-website-button:hover{

background-color: #2276d3;

}


/*change text color when hovering*/
.visit-website-button:hover p{

color: white;

}



/*-------------------------------------tablet----------------------------------------*/

@media only screen and (min-width: 850px){ /*tablet breakpoint*/



/*allows progress bars to be side by side*/
.programs-container {

display: flex;
flex-wrap: wrap;
justify-content: space-between;
background-color: none;

}

/*child of programs-container*/
.progress-bar {

width: 48%;

}


/*arranges icons in 3 columns instead of 2*/
.icons-image-container { 

width: 33.3%;

}

/*arranges cards in 2 columns instead of 1*/
.experience-card {

width: 48%;
display: inline-block;
margin-bottom: 40px;

}



}/*tablet close*/


/*-------------------------------------desktop----------------------------------------*/

@media only screen and (min-width: 1050px){ /*desktop breakpoint*/
/*containers have max width 1100, leave a little room for margin*/

/*centers containers*/
#traits-container, .interests-container, .programs-container, .experience-container {

margin: auto;

}


/*arranges traits/strengths in 4 columns instead of 2*/
.trait-div {

width:23.5%;

}


/*move profile pic to the right*/
#profile-pic-container{

float: right;

}


/*centers container*/
#intro-container {

margin: auto;
height:350px;
margin-top: 100px;/*restores margin to 100px*/

}


/*adjusts short paragraph width*/
#intro-container p {

width: 60%;

}


/*adjusts keyline width*/
#intro-container hr {

width: 60%;

}


/*align text left in desktop view*/
#intro-container h1, #intro-container h6, #intro-container p {

text-align: left;

}



}/*desktop close*/