* {
  box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  text-align: center;
  line-height: 1.5;

}

.dark-theme {
	background-color: #181818;
	color: white;
}

.light-theme {
	background-color: #fbfbfb;
	color: #4c4c4c;
}

p {
	margin: 0;
	margin-top: 10px;
	text-align: left;
	padding-left: 10px;
	padding-right: 10px;
}

.dark-theme p {
	font-weight: 300;
}

.light-theme p {
	font-weight: 400;
}

.headline p {
	font-weight: 400;
}

p.center-it {
	text-align: center;
}

hr {
    border: 0;
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 60px;
}

a {
	padding: 5px;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a.anchors {
	padding: 0px;
	margin: 0px;
}

.hide {
	display: none;
}

.bold-text {
	font-weight: 800;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

header {
	margin-top: 50px;
	margin-bottom: 	20px;
}

section {
	margin-top: 50px;
}

h1, h2, h3 {
	margin-top: 	15px;
	margin-bottom: 	0;
}

.dark-theme h1 {
	color: #9595ff;
}

.light-theme h1 {
	color: #5c5c97;
}

.dark-theme h2 {
	color: #9595ff;
}

.light-theme h2 {
	color: #5c5c97;
}

.dark-theme h3 {
	color: #9595ff;
}

.light-theme h3 {
	color: #5c5c97;
}

.dark-theme .headline {
	color: #9595ff;
}

.light-theme .headline {
	color: #5c5c97;
}

.dark-theme .accent-color {
	color: #9595ff;
}

.light-theme .accent-color {
	color: #5c5c97;
}

.skills {
	margin-top: 30px;
}

.hero-img {
	width: 100%;
	height: 100%;
	max-height: 300px;
	max-width: 300px;
	border-radius: 50%; 
	object-fit: cover;
}

.headline {
	font-size: 	24px; 
}

.screen-img {
	width: 250px;
	height: auto;
	max-height: 250px;
	object-fit: contain;
}

.screenshot {
	display: 	table;	
	margin-left: auto;
	margin-right: auto;
}

.screenshot-content {
	display: 	table-cell;	
	vertical-align: 	middle;	
	text-align: 	center; 
}

.project {
	margin-top: 50px;
}

.project.first {
	margin-top: 22px;
}

nav {
	margin-bottom: 20px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
    float: right;
}

nav li button {
	font-family: 'Lato', sans-serif;
  	font-size: 12px; 
    display: block;
    text-align: center;
    margin-top: 5px;
    margin-left: 5px; 
    margin-right: 5px;
    padding: 0;
    padding-left: 5px;
    padding-right: 5px;
    text-decoration: none;
    border-style: none; 
    background-color: transparent;
}

.toggle-theme {
	margin-right: 0;
	cursor: pointer;
}

.dark-theme nav li button {
	color:  white;
}

.light-theme nav li button {
	color: black;
}

nav li button:hover {
    text-decoration: underline;

	}

.skills li {
	margin-bottom: 	20px;
	text-align: left;
	padding-left: 20px;
	padding-right: 20px;
}

.contact-links {
font-size: 32px; 
}

.light-theme a {
	color: #5c5c97;
}

.dark-theme a {
	color: #9595ff;
}

.react {
	color: #61dbfb;
}

.html5 {
	color: #e44f29;
}

.css3 {
	color: #039ae4;
}

.js {
	color: #f0db4f;
}

.node {
	color: #7fca0b;
}

.npm {
	color: #cb3837;
}

.text-32 {
	font-size: 32px;
}


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

body {
	font-size: 20px;
}


h1, h2, h3 {
	margin-top: 	0;
	margin-bottom: 	0;
}


nav li button {
  	font-size: 20px;
    margin-left: 10px; 
    margin-right: 10px;
  }

.hero {
	margin-top: 10px;
}

.screen-img {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: contain;
}

.screenshot {
	margin-top: 35px;
}

.headline {
	font-size: 	32px; 
}

.contact-links {
font-size: 42px; 
}

.project.first {
	margin-top: 50px;
}

.skills {
	margin-top: 0px;
}

.skills li {
	text-align: justify;
}

}