/*
# Creator: Aryon Rabello
# GitHub: https://github.com/arriaoedu123/
# Creation date: 07/12/2021
# Update date: 19/02/2022
# Version: 1.1
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');

* { /* general preset */
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	color: #1f1f1f;
}

body { /* giving body a background */
	width: 100%;
	min-height: 100vh;
	background-color: #ffffff; 
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.container {
	width: 95%;
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 0.3fr 1fr;
  gap: 0px 0px; 
  grid-template-areas: 
    "title title"
    "box setup"; 
  padding-right: 20px;
}
.title { grid-area: title; }
.box { grid-area: box; }
.setup { grid-area: setup; }

.title {
	text-align: center;
	padding: 15px 0;
	font-size: 1.5rem;
	width: 100%;
}

.box,
.setup {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.box {
	margin-left: 70px;
}

.setup {
	margin-left: 80px;
}

/* Box Shadow Generator CSS */

.box-shadow-generator {
	background-color: #e4e4e4;
	border-radius: 15px;
}

.box-shadow-preview {
	--radius: 5px;
	--horizontal: 2px;
	--vertical: 2px;
	--spread: 1px;
	--blur: 2px;
	width: 250px;
	height: 250px;
	display: block;
	background-color: #0275d8;
	box-shadow: var(--horizontal) var(--vertical) var(--blur) var(--spread) rgba(0, 0, 0, 0.5);
	border-radius: var(--radius);
}

/* Range Slider CSS */

.range {
	height: 35px;
	width: 380px;
	border-radius: 10px;
	padding: 0 65px 0 45px;
	margin-bottom: 26px;
}

.field {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}

.field .value{
  position: absolute;
  font-size: 18px;
  color: #1f1f1f;
  font-weight: 600;
}

.range:nth-child(1) .field .value.left,
.range:nth-child(5) .field .value.left {
	left: -30px;
}

.field .value.left{
  	left: -53px;
}

.range:nth-child(1) .field .value.right {
	right: -56px;
}

.field .value.right{
  	right: -43px;
}

.range input{
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  background-color: #4aabff;
  border-radius: 5px;
  outline: none;
  border: none;
  z-index: 2222;
}

.range input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0275d8;
  cursor: pointer;
}

.range input::-moz-range-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0275d8;
  cursor: pointer;
}

.range input::-moz-range-progress{
  background-color: #0275d8;
}

/* Code preview CSS */

.code {
	position: relative;
	width: 100%;
	background-color: #1d1f21;
	font-family: 'Fira Code', sans-serif;
	font-size: 10px;
	border-radius: 5px;
	padding: 10px;
	margin-top: 27px;
	word-break: break-word;
}

.code p {
	width: 85%;
	color: #96cbfe;
}

.code p span {
	color: #c5c8c6;
}

/* Code copy CSS */

.copy {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: #3b843c;
	color: #fff;
	font-size: 12px;
	border-radius: 5px;
	padding: 5px;
	border: none;
	position: absolute;
	transition: transform 0.1s ease;
	top: 10px;
	right: 10px;
}

.copy:hover {
	transform: scale(1.1);
}

.copy:active {
	transform: scale(1.0);
}

.responsive-warning {
	display: none;
}

@media only screen and (max-width: 991px) {
	.box-shadow-generator {
		display: none;
	}

	.responsive-warning {
		display: block;
		color: #000;
		font-size: 2rem;
		text-align: center;
	}
}