@charset "utf-8";
html {
scroll-behavior: smooth;
	height: 100%;
}


* {
  box-sizing: border-box;
}

.grecaptcha-badge {
visibility: hidden;
}

body {
	margin: auto;
	background-image: url("../imgs/background.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	scroll-behavior: smooth;
	/*overflow: auto; /*DO NOT REMOVE; REQUIRED FOR MOBILE*/
	height: 100%;
}

@font-face {
	font-family: 'VarelaRound';
	font-style: normal;
	src: url("../fonts/VarelaRound.woff2") format('woff2');
}	

@font-face {
	font-family: 'VarelaRound-Regular';
	font-style: normal;
	src: url("../fonts/VarelaRound-Regular.ttf") format('truetype');
}	

.logo {
position: fixed;
    z-index: 100;
    margin: auto;
    box-shadow: 3px -5px 20px rgba(34, 25, 72, .3);
	width: 380px;
	height: 312px;
    background-color: #DDE8FF;
    border-radius: 50%;
        top: -150px;
        left: -140px;
	opacity: 1;
}

.logo img {
	width: 150px;
	height: auto;
	position: absolute;
	top: 180px;
	right: 80px; opacity: 1;
}

.logo:hover .logo-hover-overlay {
opacity: .7;

}

.logo-hover-overlay {
    background: radial-gradient(circle, rgba(250,199,71,1) 0%, rgba(125,100,36,1) 70%);
	box-shadow: 10px 10px 60px rgba(250,199,71,.5);
    z-index: 101;
    margin: auto;
	width: 380px;
	height: 312px;
    border-radius: 50%;
    mix-blend-mode: hard-light;
	inset: 0;
	opacity: 0;
	transition: all .3s ease-in;	
	
}	


/* Font styles*/
h1 {
    margin: 0;
    font-family: 'VarelaRound';
    text-transform: uppercase;
    font-size: 1.8em;
    font-weight: 500;
    color: #A7D596;
    letter-spacing: 5px;
    text-align: center;
	
}

h2 {
	margin: 0;
	font-size: 1.6em;
	text-transform: uppercase;
	color: #9824c3;
	font-weight: 500;
}

h3 {
	margin: 0;
	font-family: 'VarelaRound';	
	font-size: 1.4em;
	font-weight: 300;
	color: #fff;
	text-wrap: pretty;

}

h4 {
	margin: 0;
	font-size: 1.3em;
	text-align: center;
	font-weight: 500;
	
}

h5 {
	margin: 0;
	font-size: 1em;
	text-align: center;
	color: #221948;
}

p {
	font-family: 'VarelaRound';
   margin: 0;
   font-size: 1em;
	letter-spacing: 0.01em;
	line-height: 1.3em;
	color: #221948;
	text-wrap: pretty;
}

/* Navigation Menu */

/*.logo {
position: fixed;
    z-index: 100;
    margin: auto;
    box-shadow: 3px -5px 20px rgba(34, 25, 72, .3);
	width: 380px;
	height: 312px;
    background-color: #DDE8FF;
    border-radius: 50%;
    top: -165px;
    left: -110px;
	opacity: 1;
}

.logo img {
	width: 150px;
	height: auto;
	position: absolute;
	top: 180px;
	right: 80px;
}

.logo:hover .logo-hover-overlay {
opacity: .7;

}

.logo-hover-overlay {
    background: radial-gradient(circle, rgba(250,199,71,1) 0%, rgba(125,100,36,1) 70%);
	box-shadow: 10px 10px 60px rgba(250,199,71,.5);
    z-index: 101;
    margin: auto;
	width: 380px;
	height: 312px;
    border-radius: 50%;
    mix-blend-mode: hard-light;
    top: -165px;
    left: -110px;	
	opacity: 0;
	transition: all .3s ease-in;	
	
}*/

/*Navigation Menu*/
.nav-container {
	position: sticky !important;
}

.lightbulbs-container {
	position: sticky !important;
}

.lightbulbs-container .lightbulbs {
	position: sticky !important;
}

.dimmer-studio {
	top: 0 !important;
	z-index: 1 !important;
	height: 100vh !important;
	
} 	

#dropdownButton1 {
	color: #9824c3;
}

.projects .dropbtn svg, .showcase .dropbtn svg {
	display: none;
}

.projects:hover a, .showcase:hover a {
	color: #9824c3;
}

.projects .dropdown-content, .showcase .dropdown-content {
	display: none;
}

main {
	position: relative;
	margin: 0 auto;
	/*margin-top: 65px; */
	/*height: calc(100vh - 65px);*/
	width: 100%;
	height: 100%;
	overflow-y: scroll;	
     scroll-behavior: smooth;
    scroll-snap-type: y;
	z-index: 3;
}

/*Interactive Studio*/
#studio {
	position: relative;
	max-width: 1920px;
	width: 100%;
	/*max-width: none;*/
	margin: 0 auto;
  display: flex;
  justify-content: center;	
}

#animation_container {
	position: relative;
	max-width: 1920px !important;
	width: 100% !important;
	height: auto !important;
	margin: 0 auto !important;
padding-bottom: 56.25%;	
	-webkit-tap-highlight-color: transparent; 
}

#canvas {
	position: absolute; 
	display: block; 
	height: 100% !important;
	width: auto !important;
}

#dom_overlay_container {
	width: 100% !important;
	height: auto !important;
}

section {
	scroll-margin-top: 50px;
      scroll-snap-align: start;
  /*scroll-snap-stop: normal;*/
   margin: 0 auto;
	max-width: 1200px;
	height: auto;
	z-index: 3;
    box-sizing: border-box;
	
}

.content {
	position: relative;
	display: grid;
	align-items: center;
    height: fit-content;
	padding: 100px 50px;
	width: 100%;
	margin: 0 auto;
    box-sizing: border-box;
	z-index: 0;
	gap: 40px;
}

.about-me-content {
    display: grid;
	align-content: space-evenly;	
	background: #F0DEF6;
    width: 500px;
	height: fit-content;
    margin: 0 auto;
	gap: 15px;
    padding: 30px;
    box-sizing: border-box;
	border-radius: .8em;
box-shadow: 0px 3px 3px rgba(34,25,72,.5);	
}

.about-me-content h1 {
	margin: 0;
	text-align: left;
	color: #9824C3;
}

.about-me-content p {
	line-height: 1.5em;
}

.img-headphone {
position: absolute;
    transform: translate(-250px, 0px) rotate(-15deg);
    width: 150px;
	opacity: .75;
	z-index: -1;
}

.img-stationery {
position: absolute;
    transform: translate(-220px, 300px) rotate(-15deg);
    width: 80px;
    opacity: .75;
	z-index: -1;	
}

.img-penguin {
    position: absolute;
    transform: translate(580px, 150px) rotate(15deg);
    width: 80px;
    opacity: .75;
	z-index: -1;	
}

.languages-box {
	display: flex;
	gap: 100px;
	margin: 20px;
 height: fit-content;
	    position: relative;
    z-index: -1;
}

.languages-chart {
	width: 33.3%;
}

.languages-chart img {
	width: 100%;
	height: 100%;
	filter: drop-shadow(5px 5px 5px #221948);
}

/* Personal Branding */
.logo-rationale {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	padding: 40px;
	gap: 40px;
	box-sizing: border-box;
}

.logo-image {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: auto;
	justify-content: space-around;
    gap: 20px;	
	/*padding: 5rem 0 2rem 0;*/
	box-sizing: border-box;
}

.logo-image img {
	box-shadow: 0px 5px 5px rgb(0 0 0 / 30%);
    border-radius: 3px;
}

.logo-image-container {
	display: flex;
	flex-direction: column;
	width: 400px;
}

.logo-vector {
	display: flex;
	flex-direction: column;
	width: 400px;	
}

.logo-description {
	width: 100%;
	height: auto;
}

.logo-description h3 {
	text-align: center;
	font-size: 1em;
	line-height: 1.6;
}

/* Adobe Skills*/
.skills-chart {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
    z-index: -1;
	margin: 0 auto;
	gap: 20px;
	
}

.skills-chart .section1, .skills-chart .section2 {
	display: grid;
	margin: 20px;
	gap: 20px;
	width: 50%;
	height: auto;
	box-sizing: border-box;
}

.section1 h2, .section2 h2 {
font-family: 'VarelaRound';
    position: absolute;
    right: 10px;
    font-size: 1.2em;
    letter-spacing: 2px;
    color: #fff;
}

.section1 h3 {
margin-left: 25%;
	font-size: 1em;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.section2 h3 {
margin-left: 25%;
	font-size: 1em;
	letter-spacing: 1px;
	text-transform: uppercase;
}	

.section_single_col_smaller_screen {
	display: none;
}

.illustrator {
	display: grid;
	align-items: center;
	position: relative;
	background-image:url("../imgs/adobe-skills/illustrator.svg");
	 background-repeat: no-repeat;
  background-size: contain;
	background-position: center;
width: 80%;
	height: 100px;
	justify-self: center;
	overflow: hidden;
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));	
}

.photoshop {
	display: grid;
	align-items: center;
	position: relative;	
	background-image:url("../imgs/adobe-skills/photoshop.svg");
	 background-repeat: no-repeat;
  background-size: contain;
	background-position: center;
width: 80%;
	height: 100px;
	justify-self: center;
	overflow: hidden;
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));	
}

.premiere-pro {
	display: grid;
	align-items: center;
	position: relative;	
	background-image:url("../imgs/adobe-skills/premiere-pro.svg");
	 background-repeat: no-repeat;
  background-size: contain;
	background-position: center;
width: 80%;
	height: 100px;
	justify-self: center;
	overflow: hidden;
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));	
}

.animate {
	display: grid;
	align-items: center;
	position: relative;	
	background-image:url("../imgs/adobe-skills/animate.svg");
	 background-repeat: no-repeat;
  background-size: contain;
	background-position: center;
width: 80%;
	height: 100px;
	justify-self: center;
	overflow: hidden;
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));	
}

.xd {
	display: grid;
	align-items: center;
	position: relative;		
	background-image:url("../imgs/adobe-skills/xd.svg");
	 background-repeat: no-repeat;
  background-size: contain;
	background-position: center;
width: 80%;
	height: 100px;
	justify-self: center;
	overflow: hidden;
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));	
}

.indesign {
	display: grid;
	align-items: center;
	position: relative;		
	background-image:url("../imgs/adobe-skills/indesign.svg");
	 background-repeat: no-repeat;
  background-size: contain;
	background-position: center;
width: 80%;
	height: 100px;
	justify-self: center;
	overflow: hidden;
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));	
}


.dreamweaver {
	display: grid;
	align-items: center;
	position: relative;		
	background-image:url("../imgs/adobe-skills/dreamweaver.svg");
	 background-repeat: no-repeat;
  background-size: contain;
	background-position: center;
width: 80%;
	height: 100px;
	justify-self: center;
	overflow: hidden;
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));	
}

.after-effects {
	display: grid;
	align-items: center;
	position: relative;		
	background-image:url("../imgs/adobe-skills/after-effects.svg");
	 background-repeat: no-repeat;
  background-size: contain;
	background-position: center;
width: 80%;
	height: 100px;
	justify-self: center;
	overflow: hidden;
filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));	
}

.img-stationery-2 {
position: absolute;
    transform: translate(1080px, 280px) rotate(5deg);
    width: 150px;
    opacity: .75;
    z-index: -1;
}

/* Design Skils*/
.design-skills {
	display: flex;
	padding: 40px;
	justify-content: space-evenly;
	z-index: -1;
gap: 40px;
    width: fit-content;
    margin: 0 auto;	
}

.design-skills .column1, .design-skills .column2 {
	display: grid; 	
	width: fit-content;
	gap: 2rem;
letter-spacing: 1.5px;
    font-size: .75em;
    text-transform: uppercase;
}

.chart-rate {
	display: grid;
	gap: 1rem;
	border: 2px solid rgba(255,255,255,0.5);
	border-radius: 10px;
	backdrop-filter: blur(5px);
	padding: 20px;
box-shadow: 0px 3px 3px rgba(34,25,72,.5);	
}

.chart-rate-ancent-violet {
	background: rgba(152,36,195,.25);
}

.chart-rate-ancent-blue {
background: rgba(44,117,255,.25);
}

.column1 .chart-rate:first-of-type .chart-rating::before {
	content: "";
    display: block;	
    background-image: url("../imgs/design-skills/branding.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 50px;
}

.column1 .chart-rate:nth-of-type(2) .chart-rating::before {
	content: "";
    display: block;	
    background-image: url("../imgs/design-skills/publication.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 50px;	
}

.column1 .chart-rate:nth-of-type(3) .chart-rating::before {
	content: "";
    display: block;	
    background-image: url("../imgs/design-skills/uiux.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 50px;	
}

.column1 .chart-rate:nth-of-type(4) .chart-rating::before {
	content: "";
    display: block;	
    background-image: url("../imgs/design-skills/digital imaging.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 50px;	
}

.column1 .chart-rate:nth-of-type(5) .chart-rating::before {
	content: "";
    display: block;	
    background-image: url("../imgs/design-skills/video editing.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 50px;	
}

.column2 .chart-rate:first-of-type .chart-rating::before {
	content: "";
    display: block;	
    background-image: url("../imgs/design-skills/typography.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 50px;	
}

.column2 .chart-rate:nth-of-type(2) .chart-rating::before {
	content: "";
    display: block;	
    background-image: url("../imgs/design-skills/illustration.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 50px;	
}

.column2 .chart-rate:nth-of-type(3) .chart-rating::before {
	content: "";
    display: block;	
    background-image: url("../imgs/design-skills/htmlcss.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 50px;	
}

.column2 .chart-rate:nth-of-type(4) .chart-rating::before {
	content: "";
    display: block;	
    background-image: url("../imgs/design-skills/animation.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 50px;	
}

.column2 .chart-rate:nth-of-type(5) .chart-rating::before {
	content: "";
    display: block;	
    background-image: url("../imgs/design-skills/packaging.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100px;
    height: 50px;	
}

.chart-rating {
	display: flex;
    align-items: center;
	gap: 20px;
}

.bulb {
	display: flex;
	width: 100%;
	height: auto;
}

.bulb i.on {
	background-image: url("../imgs/design-skills/bulb rating.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 40px;
    height: 40px;
    display: block;
    margin: 0;
}

.bulb i.off {
	background-image: url("../imgs/design-skills/bulb rating.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;	
	width: 40px;
    height: 40px;
    display: block;
    margin: 0;
	opacity: .1;
}

.bulb i.half {
	background-image: url("../imgs/design-skills/bulb rating.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;	
	width: 40px;
    height: 40px;
    display: block;
    margin: 0;
	opacity: .5;
}

/* Hobbies & Interests */

.round-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; 
}

.row-smaller-screen {
	display: none;
}

.top-row,
.bottom-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.top-row {
  order: 1;
  gap: 10px;
}

.bottom-row {
  order: 2;
  gap: 10px;
}

.round-card {
display: flex;
    flex-direction: column;
	justify-content: center;
    gap: 10px;	
  width: 200px;
  height: 200px;
  border-radius: 50%;
  box-shadow: 0 3px 6px #221948;
  background-color: #F0DAF8;
  border: 6px solid #976CA2;
  margin: 10px;
}

.round-card-icon {
  height: 40%;
	 display: flex;
  justify-content: center;
  align-items: center;
}

.round-card img {
  max-width: 100%;
  max-height: 100%;
}

.round-card-text {
	width: fit-content;
	margin: 0 auto;
  text-align: center;
}
	
/*Contact form*/
form {
	font-family: 'VarelaRound';	
  width: 500px;
	height: 100%;
  margin: 0 auto;
	position: relative;
	display: grid; 
		gap: 40px;
}

label {
  display: block;
  margin-left: 25px;
	color: #fff;
}

.name-label {
	position: absolute;
	width: fit-content;
    font-size: 1.2em;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 50%);
    letter-spacing: 1.2px;
	top: -20px;
	left: 20px;
	z-index: 1;
}

.email-label {
	position: absolute;
	width: fit-content;	
    font-size: 1.2em;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 50%);
    letter-spacing: 1.2px;	
	top: 70px;
	left: 20px;	
	z-index: 1;	
}

.message-label {
	position: absolute;
	width: fit-content;	
    font-size: 1.2em;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 50%);
    letter-spacing: 1.2px;	
	top: 160px;
	left: 20px;
	z-index: 1;	
}

input[type="text"],
input[type="email"],
textarea {
	position: relative;
display: block;
    width: inherit;
	height: 50px;
    padding: 10px;
	color: #221948;
	padding-left: 40px;
	background-color: rgba(240,218,248,0.9);
    border: 3px solid;
	border-color: rgba(34, 25, 72, 0.8);	
    border-radius: 15px;
    box-sizing: border-box;
    font-size: 16px;
	font-family: 'VarelaRound';	
	resize: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  transition: background-color 5000s;
  -webkit-text-fill-color: #221948 !important;
}

textarea {
	height: 200px;
}

button[type="submit"] {
 background-color: #4CAF50;
    font-family: 'VarelaRound';
    text-transform: uppercase;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 40px;
    transition: all 0.1s ease-in;
}

button[type="submit"]:hover {
  background-color: #7a1d9c;
}

#submitBtn:disabled {
  opacity: 0.5; /* reduce opacity of disabled button */
  cursor: not-allowed; /* change cursor to not-allowed */
  pointer-events: none; /* disable pointer events */
}


.contact-form button {
	background-color: #9824c3;
}

.name-icon {
display: inline-block;	
	position: absolute;
    top: -10px;
	left: -20px;
	z-index: 1;
}

.name-icon::before {
	content: url("../imgs/contact-form/contact-name.svg");
	display: block;
	width: 60px; 
}

.email-icon {
display: inline-block;	
	position: absolute;
    top: 80px;
	left: -20px;
	z-index: 1;
}

.email-icon::before {
	content: url("../imgs/contact-form/contact-email.svg");
	display: block;
	width: 60px;
	z-index: 1;
}

.message-icon {
display: inline-block;	
	position: absolute;
    top: 170px;
	left: -20px;
	z-index: 1;
}

.message-icon::before {
	content: url("../imgs/contact-form/contact-msg.svg");
	display: block;
	width: 60px;
}

.contact-button {
	display: flex;
	justify-content: center;
}

/*Middle size*/
@media only screen and (max-width: 1024px) {	
	html, body {
		/*overflow: auto;*/
	}	
	
main {
	max-width: 1920px; 
	margin-top: 0; 
	height: 100vh;
}	
	
	section {
		height: fit-content;
		min-height: inherit;
	scroll-margin-top: 0;
	}
	
/* Font styles*/
h1 {

    font-size: 1.3em;
    letter-spacing: 5px;
}

h2 {

	font-size: 1.3em;

}

h3 {
	/*font-size: 1.1em;*/
	font-size: .7rem;
	
}

h4 {
	font-size: 1em;	
}

h5 {

	font-size: .75em;

}

/*p {

   font-size: .75em;
	letter-spacing: .05em;
	line-height: 1.3em;
}*/
	
/* Navigation Menu */
/*.logo {
		transform: scale(0.6);
        top: -160px;
        left: -140px;
}

.logo img {
	width: 150px;
	height: auto;
	top: 180px;
	right: 80px;
}

.logo:hover .logo-hover-overlay {
opacity: .7;

}

.logo-hover-overlay {
	inset: 0;
}		*/
	

		
	
	.img-headphone {
		width: 100px;
		transform: translate(-170px, 0px) rotate(-15deg);
		
	}
	
	.img-stationery {
		width: 60px;
		transform: translate(-130px, 300px) rotate(5deg);
		
	}
	
	
	.img-penguin {
		width: 50px;
		transform: translate(400px, 100px) rotate(-10deg);
		
	}	
	
.languages-box {
	gap: 50px;
}
	
/*Adobe skills*/	
	.skills-chart {
		gap: 50px;
	}	
	
.skills-chart .section1, .skills-chart .section2 {
	margin: 0;
	gap: 20px;
}	
	
.illustrator, .photoshop, .premiere-pro, .animate, .xd,.indesign, .dreamweaver, .after-effects {
width: 100%;
	padding-top: 20%;
	height: 0;
}	
	
.section1 h3, .section2 h3 {
position: absolute;
	font-size: 1.5vw;
}		
	
	.section1 h2, .section2 h2 {
		font-size: .8rem;
	}	
	
/*Design skills*/
	.design-skills {
		padding: 0;
		gap: 10px;
	}
	
	
	.chart-rate {
		padding: .75rem;
	}
	
.chart-rating {
	gap: 10px;
}	
	
.column1 .chart-rate:first-of-type .chart-rating::before,
.column1 .chart-rate:nth-of-type(2) .chart-rating::before, 
.column1 .chart-rate:nth-of-type(3) .chart-rating::before,
.column1 .chart-rate:nth-of-type(4) .chart-rating::before,
.column1 .chart-rate:nth-of-type(5) .chart-rating::before,
.column2 .chart-rate:first-of-type .chart-rating::before,
.column2 .chart-rate:nth-of-type(2) .chart-rating::before,
.column2 .chart-rate:nth-of-type(3) .chart-rating::before,
.column2 .chart-rate:nth-of-type(4) .chart-rating::before,	
	.column2 .chart-rate:nth-of-type(5) .chart-rating::before {
		width: 60px; 
		height: 30px;
}	
	
	
	
	.bulb i.on, .bulb i.off, .bulb i.half {
		width: 2rem;
		height: 2rem;
	}	

	.bulb {
		width: fit-content;
	}	
	
/*Hobbies & Interests*/
.top-row,
.bottom-row {
  display: none;
}	
	
	.round-card-container {
		gap: 5vw;
	}	
	
.row-smaller-screen	{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
		gap: 5vw;
}
	
.round-card {
   aspect-ratio: 1/1;
	width: 25vw;
	height: auto;
margin: 0;	
	gap: 2vw;
}
	
.round-card-icon {
  height: 35%;
}	
	
.round-card-text {
  width: 65%;		
	}
	
.round-card-text p {
   font-size: 1.5vw;	
}	
	


}


/*Mobile size*/
@media only screen and (max-width: 640px) {

	/* Font styles*/
h1 {

    font-size: 1.3em;
    letter-spacing: 5px;
}

h2 {

	font-size: 1.3em;

}

h3 {
	font-size: 1.1em;
	
}

h4 {
	font-size: 1em;	
}

h5 {

	font-size: .75em;

}

p {

   font-size: .85em;
	letter-spacing: .05em;
	line-height: 1.3em;
}
	
.lightbulbs-container, .lightbulbs {
	position: sticky !important; 
	top: 100px;
}
	
    
	.toggle-nav-button {
	position: absolute !important;	
	}
	
	#studio {
		position: relative;
		overflow-x:  auto;
	}
	
	main {
	    scroll-snap-type: y mandatory;
	}

#animation_container {
	position: relative;
	width: 250% !important;
	height: auto !important;
padding-bottom: 0;	
}

#canvas {
	position: relative; 
width: 250% !important;
       height: auto !important;	
}

.horizontal-line {
  width: 100%;
  height: 6px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5); 
  
}	
	
.content {
	padding: 160px 20px 60px 20px;
	gap: 20px;
}	
	
.about-me-content {
	width: 100%;
    padding: 20px;	
	
}
	
.logo-image {
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	max-width: 400px;
	justify-self: center;
}	
	
.logo-image-container {
	width: auto;
}	
	
.logo-description h3 {
    font-size: .85em;
    line-height: 1.6;
}	
	
.logo-original {
   width: 100%;
}
	
.logo-vector {
   width: 100%;
}
	
.languages-box {
	gap: 20px;
	padding: 20px 0 20px 0;

}	
	
.img-headphone, .img-stationery, .img-penguin {
	display: none;
}	
	
/* Adobe Skills*/
.skills-chart .section1, .skills-chart .section2 {
	display: none;
}	
	
.section_single_col_smaller_screen {
	display: grid;
	gap: 20px;
}
	
.section_single_col_smaller_screen h2 {
font-family: 'VarelaRound';
    position: absolute;
    right: 10px;
    font-size: 1rem;
    letter-spacing: 2px;
    color: #fff;
}

.section_single_col_smaller_screen h3 {
	position: absolute;
margin-left: 25%;
	font-size: .9rem;
	letter-spacing: .15rem;
	text-transform: uppercase;
}
	
	.languages-box {
		margin: 0;
	}
	

.skills-chart {
	flex-direction: column;
	gap: 0;
	max-width: 400px;
justify-self: center;	
	
}	
	
.skills-chart .section1, .skills-chart .section2 {
    gap: 0;
}	

.illustrator, .photoshop, .premiere-pro, .animate, .xd,.indesign, .dreamweaver, .after-effects {
width: 100%;
	padding-top: 20%;
	height: 0;
}	
	
.design-skills {
	padding: 20px 0 20px 0;
	justify-self: center;
	flex-direction: column;   
	gap: 2rem;
	
	      display: flex;
        flex-wrap: wrap;
}
	
.design-skills .column1, .design-skills .column2 {
	width: 100%;
	display: contents;
}
	
.column1 .chart-rate:nth-child(1),
    .column2 .chart-rate:nth-child(1) { order: 1; }
    
    .column1 .chart-rate:nth-child(2),
    .column2 .chart-rate:nth-child(2) { order: 2; }
    
    .column1 .chart-rate:nth-child(3),
    .column2 .chart-rate:nth-child(3) { order: 3; }
    
    .column1 .chart-rate:nth-child(4),
    .column2 .chart-rate:nth-child(4) { order: 4; }
    
    .column1 .chart-rate:nth-child(5),
    .column2 .chart-rate:nth-child(5) { order: 5; }	
	
.chart-rate {
overflow: hidden;
    padding: 20px;
}
	
.chart-rating {
	gap: 10px;
}
	
.column1 .chart-rate:first-of-type .chart-rating::before,
.column1 .chart-rate:nth-of-type(2) .chart-rating::before, 
.column1 .chart-rate:nth-of-type(3) .chart-rating::before,
.column1 .chart-rate:nth-of-type(4) .chart-rating::before,
.column1 .chart-rate:nth-of-type(5) .chart-rating::before,
.column2 .chart-rate:first-of-type .chart-rating::before,
.column2 .chart-rate:nth-of-type(2) .chart-rating::before,
.column2 .chart-rate:nth-of-type(3) .chart-rating::before,
.column2 .chart-rate:nth-of-type(4) .chart-rating::before,	
.column2 .chart-rate:nth-of-type(5) .chart-rating::before	{
	width: 40%;
}	
	
.bulb {
width: 60%;	
	gap: 10px;
}	
	
.bulb i.on, .bulb i.off, .bulb i.half {
width: 30px;
}
	
.top-row,
.bottom-row {
  display: none;
}	
	
.row-smaller-screen	{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 400px;
	gap: 20px;
}
	
.round-card {
   aspect-ratio: 1/1;
	width: 50%;
	height: auto;
margin: 10px 0;	
}
	
.round-card-icon {
  height: 35%;
}	
	
.round-card-text {
  width: 65%;		
	}
	
.round-card-text p {
   font-size: .75em;	
}
	
/*Contact Form*/
	form {
	width: 95%;
		height: 100%;
		justify-items: center;
}
	

.name-label, .email-label, .message-label {
   font-size: 1em;
}	

/*Footer*/
	.iframe-footer {
		text-align: center;
		padding: 0;
	}
	
}