/* ----------- Galaxy S6 ----------- */

/* Portrait */
@media screen and (min-device-width: 360px) and (max-device-width: 410px) {
	#navbar {
		background: #a3ceff;
		height: 10vh;
		position: fixed;
		width: 100%;
		box-shadow: 0 0 8px #1d252e;
	}

	#navbar ul {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	#navbar ul li a {
		color: #2b5380;
		font-size: 1.2rem;
		text-decoration: none;
	}

	/** WELCOME SECTION **/

	#welcome-section {
		background: linear-gradient(#4584cc, #2b5380);
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #a3ceff;
		text-shadow: 0 1px 5px rgb(32, 32, 32);
	}

	#welcome-section p {
		font-size: 1.5rem;
		font-weight: lighter;
		text-transform: lowercase;
	}

	#welcome-section h1 {
		font-size: 4rem;
		margin: 10px 0;
		font-weight: bold;
		text-align: center;
		line-height: 1.2;
	}

	/** PROJECTS **/

	#projects {
		background: #a3ceff;
	}

	#projects h2 {
		text-align: center;
		color: #2b5380;
		font-size: 1.5rem;
		padding: 1em 0;
		font-weight: 600;
	}

	#projects div .videos {
		margin: 0 auto;
		padding: 3em 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	#projects iframe {
		border: 8px solid #576b82;
		margin: 2em 0;
		border-radius: 3px;
		box-shadow: 0 4px 5px #1d252e;
	}

	#projects::before {
		display: block;
		content: "";
		height: 10vh;
		visibility: hidden;
		pointer-events: none;
	}

	footer#contact {
		background: linear-gradient(#2b5380, #4584cc);
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 1.5rem;
		color: #a3ceff;
		height: 200px;
	}

	footer#contact p {
		font-size: 1.3rem;
		display: block;
		padding: 1em 0;
	}

	footer#contact div ul {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	footer#contact div ul li {
		margin: 5px 0;
	}

	footer#contact div ul li a {
		color: #a3ceff;
		text-decoration: none;
	}
}

/* ----------- Google Pixel XL ----------- */

/* Portrait and Landscape */
@media screen and (min-device-width: 411px) and (max-device-width: 767px) {
	#navbar {
		background: #a3ceff;
		height: 10vh;
		position: fixed;
		width: 100%;
		box-shadow: 0 0 8px #1d252e;
	}

	#navbar ul {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	#navbar ul li a {
		color: #2b5380;
		font-size: 1.3rem;
		text-decoration: none;
	}

	/** WELCOME SECTION **/

	#welcome-section {
		background: linear-gradient(#4584cc, #2b5380);
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #a3ceff;
		text-shadow: 0 1px 5px rgb(32, 32, 32);
	}

	#welcome-section p {
		font-size: 1.6rem;
		font-weight: lighter;
		text-transform: lowercase;
	}

	#welcome-section h1 {
		font-size: 4.5rem;
		margin: 10px 0;
		font-weight: bold;
		text-align: center;
		line-height: 1.2;
	}

	/** PROJECTS **/

	#projects {
		background: #a3ceff;
	}

	#projects h2 {
		text-align: center;
		color: #2b5380;
		font-size: 1.5rem;
		padding: 1em 2em;
		font-weight: 600;
	}

	#projects div .videos {
		margin: 0 auto;
		padding: 3em 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	#projects iframe {
		border: 8px solid #576b82;
		margin: 2em 0;
		border-radius: 3px;
		box-shadow: 0 4px 5px #1d252e;
	}

	#projects::before {
		display: block;
		content: "";
		height: 10vh;
		visibility: hidden;
		pointer-events: none;
	}

	footer#contact {
		background: linear-gradient(#2b5380, #4584cc);
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 1.5rem;
		color: #a3ceff;
		height: 200px;
	}

	footer#contact p {
		font-size: 1.3rem;
		display: block;
		padding: 1em 0;
	}

	footer#contact div ul {
		display: flex;
		flex-direction: column;
		text-align: center;
	}

	footer#contact div ul li {
		margin: 5px 0;
	}

	footer#contact div ul li a {
		color: #a3ceff;
		text-decoration: none;
	}
}