/* Larger */
@media only screen and (max-width: 1440px) {
	.innerHeader {
		width: 80%;
	}
	.preview .innerPreview {
		width: 80%;
	}
	.main .innerMain {
		width: 80%;
	}
	.contactBlock {
		width: 85%;
	}
}

/* Large desktops and laptops */
@media only screen and (max-width: 1200px) {
	.innerHeader {
		width: 90%;
	}
	.preview .innerPreview {
		width: 90%;
	}
	.main .innerMain {
		width: 90%;
	}
	.projCard {
		width: 210px;
	}
	.projCard span {
		font-size: 17px;
	}
	.contactBlock {
		width: 95%;
	}
	.contactCard {
		width: 240px;
	}
}

/* Portrait tablets and medium desktops */
@media only screen and (max-width: 992px) {
	.innerHeader {
		width: 95%;
	}
	.preview .innerPreview {
		width: 95%;
	}
	.main .innerMain {
		width: 95%;
		margin-top: 40px;
	}
	.projCard {
		width: 180px;
	}
	.projCardImage {
		width: 40px;
		height: 40px;
	}
	.projCardImage#calculator {
		width: 34px;
		height: 34px;
	}
	.projCard span {
		font-size: 15px;
	}
	.contactBlock {
		width: 95%;
		margin-top: 40px;
	}
	.contactGrid {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-template-areas:
			". . ."
			". . ."
			". . ."
			". . .";
	}
	.contactCard {
		width: 240px;
		height: 80px;
	}
}

/* Landscape phones and portrait tablets */
@media only screen and (max-width: 767px) {
	.header {
		height: 120px;
	}
	.innerHeader {
		width: 95%;
		flex-direction: column;
		justify-content: space-around;
	}
	.header .innerHeader .logo img {
		width: 50px;
		height: 50px;
	}
	.header .innerHeader nav a {
		padding: 13px 50px;
		margin-left: 3%;
	}
	.header .innerHeader nav a:first-child {
		margin-left: 0;
	}
	.preview .innerPreview {
		width: 75%;
	}
	.preview .innerPreview label {
		font-size: 30px;
		line-height: 40px;
	}

	.main .innerMain {
		width: 75%;
		flex-direction: column;
		margin-top: 40px;
	}
	.main .innerMain#projects {
		width: 75%;
		flex-direction: column-reverse;
		justify-content: space-between;
		margin-top: 40px;
	}
	.main .innerMain .info {
		width: 100%;
	}
	.main .innerMain .stats {
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	.main .innerMain .info h1 {
		font-size: 20px;
	}
	.main .innerMain .info p {
		font-size: 16px;
	}
	.main .innerMain .stats .skills {
		width: 500px;
	}
	.main .innerMain .stats .skills .statHead label {
		font-size: 17px;
	}
	.projBlock {
		width: 100%;
		min-height: 200px;
		margin-bottom: 40px;
	}
	.projCard {
		width: 180px;
	}
	.contactGrid {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.contactCard {
		width: 75%;
		justify-content: center;
		align-items: center;
	}
	.contactCard.invisible {
		display: none;
	}
}

/* Landscape phones and smaller */
@media only screen and (max-width: 480px) {
	.header .innerHeader nav a {
		padding: 13px 20px;
		margin-left: 5%;
	}
	.preview .innerPreview {
		width: 85%;
	}
	.preview .innerPreview label {
		font-size: 25px;
	}
	.main .innerMain {
		width: 85%;
	}
	.main .innerMain#projects {
		width: 85%;
	}
	#myProjectsContent {
		font-size: 14px;
	}
	.projLine {
		align-items: center;
		flex-direction: column;
		height: fit-content;
		padding-top: 0;
	}
	.projCard {
		width: 85%;
		height: 100px;
		justify-content: center;
		margin-top: 10px;
	}
	.projCardImage {
		width: 50px;
		height: 50px;
	}
	.projCardImage#calculator {
		width: 40px;
		height: 40px;
	}
	.projCard span {
		font-size: 20px;
	}
	.projActiveDescription span {
		font-size: 18px;
		text-align: center;
	}
	.projActiveButtons {
		flex-direction: column-reverse;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
	}
	.projActiveButtons a {
		justify-content: center;
	}
	.backButton {
		width: 50%;
		height: 50px;
		margin: 10px 0;
		font-size: 20px;
	}
	.linkTo {
		width: 50%;
		height: 50px;
		margin: 10px 0;
		font-size: 18px;
	}
}

/* Much smaller */
@media only screen and (max-width: 320px) {
	.header {
		height: 110px;
	}

	.header .innerHeader .logo img {
		width: 40px;
		height: 40px;
	}
	.header .innerHeader .logo label {
		font-size: 14px;
	}
	.header .innerHeader nav a {
		padding: 13px 16px;
		margin-left: 10px;
	}
	.header .innerHeader nav span {
		font-size: 12px;
		line-height: 20px;
	}
	.preview .innerPreview {
		width: 85%;
	}
	.preview .innerPreview label {
		font-size: 25px;
		line-height: 40px;
	}
	.preview .innerPreview svg {
		width: 80px;
		height: 80px;
	}
	.main .innerMain {
		width: 85%;
	}
	.main .innerMain#projects {
		width: 85%;
	}
	.main .innerMain .info h1 {
		font-size: 15px;
		line-height: 20px;
	}
	.main .innerMain .info p {
		font-size: 12px;
		line-height: 20px;
	}
	.main .innerMain .stats .skills .statHead label {
		font-size: 14px;
		line-height: 18px;
	}
	.main .innerMain .stats .skills .statContent .statElement svg {
		width: 20px;
		height: 20px;
	}
	.main .innerMain .stats .skills .statContent .statElement span {
		font-size: 13px;
	}
	.projHead label {
		font-size: 14px;
		line-height: 22px;
	}
	#myProjectsContent {
		font-size: 12px;
	}
	.projCard {
		width: 75%;
		height: 60px;
	}
	.projCardImage {
		width: 40px;
		height: 40px;
	}
	.projCardImage#calculator {
		width: 30px;
		height: 30px;
	}
	.projCard span {
		font-size: 15px;
	}
	.projActiveDescription img {
		width: 90%;
	}
	.projActiveDescription span {
		font-size: 12px;
		text-align: center;
	}
	.backButton {
		width: 40%;
		height: 40px;
		font-size: 15px;
	}
	.linkTo {
		width: 40%;
		height: 40px;
		font-size: 12px;
	}
	.linkTo img {
		width: 20px;
	}
	.contactCard {
		width: 70%;
		height: 70px;
	}
	.contactCard span {
		font-size: 16px;
	}
	.copyright img {
		width: 50px;
		height: 50px;
	}
	.copyright span {
		font-size: 10px;
	}
}