style.scss

/* VARIABLES */ 

$white: white;
$lightblue: lightblue;
$lightgray: #E5E5E5;
$dark: #242424;
$transparent: rgba(36, 36, 36, 0.5);
$transDark: rgba(36, 36, 36, 0.8);

/* TYPOGRAPHY */

$small: 0.8em;
$medium: 1.2em;
$large: 1.5em;
$pangea: 3em;
$lighter: lighter;
$bold: bold;

html, body {
	margin: 0;
	font-family: "Segoe UI", Arial, sans-serif;
	color: $dark;
}

.firstScreen {
	background-image: url(img/bg.jpg);
	padding:20px 40px 40px 40px;
	min-height: 86vh;
	display:grid;
}

nav {
	display:grid;
	grid-template-columns: auto 1fr;
	align-items:center;
}

.logo img {
	width: 100px;
}

.links {
	text-align: right;

	a {
		text-decoration: none;
		color: $white;
		font-size: $medium;
		font-weight: $lighter;
		margin-right: 10px;
	}

	a:hover {
		border-bottom: 2px solid $white;
	}
}

.phone {
	text-align: right;
	color: $white;
	font-weight: $bold;
	font-size: $medium;

	i {
		color: $lightblue;
	}

	.phoneQ {
		font-weight: $lighter;
		font-size: $small;
	}

	p {
		margin:0;
	}

	.phoneWrapper {
		display: inline-block;
		border: 2px solid white;
		padding: 10px;
		background-color: $transparent;
	}
}

.header {
	margin-top: 10em;
	width: 60%;

	h1 {
		font-size: $pangea;
		color: $white;
		font-weight: $bold;
	}

	.headerDesc {
		color: $white;
		font-size: $medium;
	}
}

.orderPlace {
	border: 0;
	font-size: $medium;
	padding:10px;
	cursor: pointer;
	font-weight: $lighter;
	margin-right: 10px;
	background-color: $lightblue;
	color:$dark;
}

.choosePlace {
	border: 0;
	font-size: $medium;
	padding:10px;
	cursor: pointer;
	font-weight: $lighter;
	color:$dark;
}

.main {
	margin: 0 auto;
	max-width: 80%;
	padding-top: 3em;

	h2 {
		text-align:center;
		font-size: $pangea;
	}

	span {
		border-bottom:3px solid $dark;
	}

	.weAre {
		width:60%;
		margin:0 auto;
		font-size: large;
		font-weight: $lighter;;
	}
}

.products {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	padding-top: 3em;
	padding-bottom: 20px;
	text-align: center;

	.product-item {
		border: 1px solid $lightgray;
		padding-bottom:10px;
	}

	.product-item img {
		width: 100%;
		margin-bottom: 10px;
	}

	.product-item a {
		font-size: $medium;
		text-decoration: none;
		font-weight: $lighter;
	}
}

.socialMedia {
	
	.mediaWrapper {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		margin-bottom: 3em;
	}

	.mediaDesc {
		display:none;
		justify-content: center;
		align-content:center;
		text-align:center;
		font-size: $medium;
		color: $white;
		position: relative;
		z-index: 2;
	}

	.mediaItem {
		display:grid;
		position:relative;
		transition: 1s;
	}

	.mediaItem:hover .mediaDesc {
		display: grid;
	}

	.darker {
		position:absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		background-color: $transDark;
		display: none;
	}

	.mediaItem:hover .darker {
		display: block;
	}

	h2 {
		text-align:center;
		font-size: $pangea;
	}

	span {
		border-bottom:3px solid $dark;
	}

	a {
		text-decoration: none;
		color: $white;
		font-weight: $bold;
	}

	p {
		font-size: $small;
	}

	.mediaItem-1 {
		background-image: url(img/media1.jpg);
		height: 299px;
	}

	.mediaItem-2 {
		background-image: url(img/media2.jpg);
		height: 299px;
	}

	.mediaItem-3 {
		background-image: url(img/media3.jpg);
		height: 299px;
	}

	.mediaItem-4 {
		background-image: url(img/media4.jpg);
		height: 299px;
	}

	.mediaItem-5 {
		background-image: url(img/media5.jpg);
		height: 299px;
	}

	.mediaItem-6 {
		background-image: url(img/media6.jpg);
		height: 299px;
	}

	.mediaItem-7 {
		background-image: url(img/media7.jpg);
		height: 299px;
	}

	.mediaItem-8 {
		background-image: url(img/media8.jpg);
		height: 299px;
	}
}

.video {
	margin: 0 auto;
	max-width: 80%;
	padding-top: 3em;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;

	.videoWrapper {
		background-image: url(img/video.jpg);
		height:300px;
		display: grid;
		align-items: center;
		justify-content: center;
		color: $white;
		font-size: $pangea;
		margin-bottom: 3em;
	}

	h2 {
		font-size: $pangea;
		margin-top: 0;
	}

	.videoAuthor {
		font-weight: $bold;
	}
}

.contacts {
	background-image: url(img/contacts.jpg);
	padding:20px 40px 40px 40px;
	min-height: 50vh;
	display:grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	color: $white;

	h2 {
		font-size: $pangea;
		margin-top: 0;
	}

	#form {
		display: grid;
		grid-template-columns: 300px;
		align-items: center;
		justify-content: center;
		color: $dark;
		margin: 0 auto;
		padding:20px;
		background-color: $white;
		max-width: 400px;
		gap: 10px;

		label {
			font-weight: $bold;
		}

		input {
			height: 40px;
		}

		#submit {
			border: 0;
			padding:10px;
			background-color: $lightblue;
		}
	}
}

@media only screen and (max-width: 600px) {
   .phone {
   	margin-top: 2em;
   }
   .orderPlace {
   	margin-bottom: 10px;
   }
   .main .weAre {
   		width: 100%;
    }
    .main {
   		max-width: 90%;
    }
    .products {
  		display: block;
  	}
  	.product-item {
  		margin-bottom: 10px;
  	}
  	.socialMedia .mediaWrapper {
  		display: block;
  	}
  	.video {
  		display: block;
  		padding-top: 0;
  		max-width: 90%;
  	}
  	.video .videoWrapper {
  		background-position: right;
  		margin-bottom: 35px;  	
  	}
  	.videoDesc {
  		margin-bottom: 35px;
  	}
  	.contacts {
  		display: block;
  		background-position: top;
  		padding: 20px;
  	}
  	.contacts #form {
  		display: block;
  	}
  	.contacts #form #email {
  		width: 95%;
  		margin: 10px 0;
  	}
  	.contacts #form label {
  		display: block;
  	}
  	#submit {
  		width: 98%;
  	}
  	.firstScreen {
  		padding: 20px;
  	}
}