:root {
--clr-white:0 0 100%;
--clr-shade-100:170 42% 81%;
--clr-shade-150:175 84% 74%;
--clr-shade-200:169 43% 81%;
--clr-shade-300:170 9% 47%;
--clr-shade-350:170 16% 85%;
--clr-shade-400:175 8% 26%;
--clr-shade-250:169 9.69% 49.32%;
--fs-50:.75rem;
--fs-100:1rem;
--fs-200:1.2rem;
--fs-300:1.5rem;
--fs-400:2rem;
--fs-500:2.5rem;
--fs-600:3rem;
--font-family-inter:Inter,sans-serif;
--m-8:.5rem;
--m-16:1rem;
--m-24:1.5rem;
--m-32:2rem;
--m-48:2.5rem;
--m-64:4rem;
--m-128:8rem;
--p-8:.5rem;
--p-16:1rem;
--p-24:1.5rem;
--p-32:2rem;
--p-48:2.5rem;
--slider-height:2rem;
--slider-width:90%;
--slider-thumb-height:3rem;
--slider-thumb-width:3rem;
--border-radius-8:.5rem;
--gap-row-8:.5rem;
--gap-row-16:1rem;
--gap-row-64:4rem;
--gap-row-80:5rem
}

*,::after,::before {
box-sizing:border-box;
margin:0;
padding:0
}

body,h1,h2,h3,p,input,ul {
margin:0
}

ul {
padding:0
}

li {
list-style:none
}

body {
line-height:1.5;
font-family:var(--font-family-inter);
font-size:var(--fs-100);
width:100%;
height:100%
}

input,button {
font:inherit
}

img {
display:block;
max-width:100%;
height:auto
}

#color-picker-div {
width:100%;
height:100%
}

#my-canvas {
margin:0;
display:block;
width:90%;
aspect-ratio:1 / .82;
touch-action:none
}

#slider {
appearance:none;
-webkit-appearance:none;
background-image:linear-gradient(90deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%));
--thumb-color:hsl(180,100%,50%);
height:var(--slider-height);
width:var(--slider-width)
}

#slider::-webkit-slider-thumb {
appearance:none;
width:var(--slider-thumb-width);
height:var(--slider-thumb-height);
border:solid #ffffff 8px;
border-radius:50%;
background:var(--thumb-color,hsl(180,100%,50%))
}

#slider::-moz-range-thumb {
appearance:none;
width:var(--slider-thumb-width);
height:var(--slider-thumb-height);
border:solid #ffffff 8px;
border-radius:50%;
background:var(--thumb-color,hsl(180,100%,50%))
}

.flex-row {
display:flex
}

.flex-column {
display:flex;
flex-direction:column
}

.space-evenly {
justify-content:space-evenly
}

.gap-row-16 {
row-gap:var(--gap-row-16)
}

.space-between {
justify-content:space-between
}

.space-around {
justify-content:space-around
}

.center-main-axis {
justify-content:center
}

.center-cross-axis {
align-items:center
}

.grid-two-rows {
grid-template-rows:auto auto
}

.grid-vertical-center {
align-items:center
}

.rounded-border {
border-radius:var(--border-radius-8,0.5rem)
}

.display-block {
display:none
}

.p-8 {
padding:var(--p-8)
}

.p-16 {
padding:var(--p-16)
}

.p-24 {
padding:var(--p-24)
}

.p-32 {
padding:var(--p-32)
}

.p-48 {
padding:var(--p-48)
}

.p-inline-8 {
padding-inline:var(--p-8)
}

.p-inline-16 {
padding-inline:var(--p-16)
}

.p-inline-24 {
padding-inline:var(--p-24)
}

.p-inline-32 {
padding-inline:var(--p-32)
}

.p-inline-48 {
padding-inline:var(--p-48)
}

.p-block-8 {
padding-block:var(--p-8)
}

.p-block-16 {
padding-block:var(--p-16)
}

.p-block-24 {
padding-block:var(--p-24)
}

.p-block-32 {
padding-block:var(--p-32)
}

.p-block-48 {
padding-block:var(--p-48)
}

.mb-8 {
margin-bottom:var(--m-8)
}

.mb-16 {
margin-bottom:var(--m-16)
}

.mb-24 {
margin-bottom:var(--m-24)
}

.mb-32 {
margin-bottom:var(--m-32)
}

.mb-48 {
margin-bottom:var(--m-48)
}

.mb-64 {
margin-bottom:var(--m-64)
}

.mb-128 {
margin-bottom:var(--m-128)
}

.mt-8 {
margin-top:var(--m-8)
}

.mt-16 {
margin-top:var(--m-16)
}

.mt-24 {
margin-top:var(--m-24)
}

.mt-32 {
margin-top:var(--m-32)
}

.mt-48 {
margin-top:var(--m-48)
}

.mt-64 {
margin-top:var(--m-64)
}

.mt-128 {
margin-top:var(--m-128)
}

.bg-brighter {
background-color:hsl(var(--clr-shade-100))
}

.bg-bright {
background-color:hsl(var(--clr-shade-200))
}

.bg-dark {
background-color:hsl(var(--clr-shade-300))
}

.bg-darker {
background-color:hsl(var(--clr-shade-400))
}

.text-brighter {
color:hsl(var(--clr-shade-100))
}

.text-bright {
color:hsl(var(--clr-shade-200))
}

.text-less-bright {
color:hsl(var(--clr-shade-250))
}

.text-dark {
color:hsl(var(--clr-shade-300))
}

.text-darker {
color:hsl(var(--clr-shade-400))
}

.text-white {
color:hsl(var(--clr-white))
}

.fs-100 {
font-size:var(--fs-100)
}

.fs-200 {
font-size:var(--fs-200)
}

.fs-300 {
font-size:var(--fs-300)
}

.fs-400 {
font-size:var(--fs-400)
}

.fs-500 {
font-size:var(--fs-500)
}

.h-64 {
height:2.5rem
}

.text-center {
text-align:center
}

.bg-img {
position:absolute;
inset:0;
z-index:-2;
width:100%;
height:100%;
object-fit:cover
}

.overlay-bg-image {
position:relative
}

.overlay-bg-image::after {
content:"";
width:100%;
height:100%;
position:absolute;
inset:0;
background-image:linear-gradient(0deg,rgb(0,0,0) 0%,rgba(255,255,255,0) 100%);
z-index:-1;
opacity:.55
}

.logo-styling {
color:hsl(var(--clr-shade-200));
font-weight:700
}

.logo-styling::first-letter {
color:hsl(var(--clr-shade-400))
}

.main-heading-div .subtitle {
opacity:80%
}

.toggle-menu-btn {
position:absolute;
top:2.5rem;
right:2rem;
background-image:url(/img/menu-hamburger.svg);
background-color:transparent;
background-size:cover;
background-repeat:no-repeat;
z-index:21;
width:2rem;
aspect-ratio:1;
border:none
}

.remove-menu-btn {
background-image:url(/img/solid-remove.svg);
position:fixed;
width:1.8rem;
transition:background-image .5s ease-in
}

.menu-nav {
position:fixed;
top:0;
right:0;
bottom:0;
left:40%;
z-index:20;
background-color:hsl(var(--clr-shade-200) / 0.3);
backdrop-filter:blur(10px);
border-left:solid hsl(var(--clr-shade-200)) 2px;
border-bottom:solid hsl(var(--clr-shade-200)) 2px;
border-radius:0 0 0 var(--border-radius-8,0.5rem);
padding:3rem 2rem;
display:none
}

.menu-nav ul {
display:flex;
flex-direction:column
}

.menu-nav .menu-items-list {
list-style:none;
padding:1rem
}

.menu-nav > ul > li > a {
text-decoration:none;
color:hsl(var(--clr-shade-400));
display:inline-block;
width:100%;
padding-bottom:.5rem;
border-bottom:solid hsl(var(--clr-shade-200) / 0) 5px
}

.menu-nav .menu-items-list a:hover,.menu-nav .menu-items-list a:focus {
cursor:pointer;
border-bottom:solid hsl(var(--clr-shade-350)) 5px
}

#output-color-div {
margin-top:3rem;
width:90%;
background-color:hsl(var(--clr-shade-200));
border-radius:var(--border-radius-8);
padding:2rem;
padding-left:0;
padding-bottom:3.5rem
}

.color-selected-styling {
width:60%;
text-align:left;
background-color:hsl(var(--clr-shade-150));
padding-left:2rem
}

.wrap-output-color-div {
width:100%;
height:100%
}

.chosen-color-styling {
width:30%;
height:2.5rem;
border:hsl(var(--clr-shade-400)) solid 1px;
background-color:hsl(180,100%,50%)
}

.output-color-styling {
padding-inline:var(--p-16)
}

.bar-color-value {
background-color:hsl(var(--clr-white) / 0.22);
border:solid hsl(var(--clr-white)) 1px;
margin-left:2rem
}

#output-color-div .copy-svg-img {
width:1.5rem
}

.palette {
width:90%
}

.palette-card {
background-color:hsl(var(--clr-shade-200));
width:100%;
aspect-ratio:1 / .658;
border-radius:var(--border-radius-8,0.5rem);
display:flex
}

.palette-card-list {
display:flex;
flex-direction:column;
justify-content:space-around;
padding:1.5rem 0;
flex:1
}

.palette-card-list li {
position:relative;
display:flex;
align-items:center;
flex:1;
color:hsl(var(--clr-shade-400));
padding-left:1rem
}

.palette-card-list li::before {
content:"";
position:absolute;
width:90%;
height:90%;
top:5%;
left:0;
border-radius:0 var(--border-radius-8,8px) var(--border-radius-8,8px) 0
}

.palette-card-list li:hover::before,.palette-card-list li:focus::before {
background-color:hsl(var(--clr-white) / 0.22);
border-bottom:solid hsl(var(--clr-white)) 1px;
border-top:solid hsl(var(--clr-white)) 1px;
border-right:solid hsl(var(--clr-white)) 1px
}

.palette-card-list .selected-card-list {
color:#000;
text-shadow:.4px 0 currentColor
}

.selected-card-list::before {
background-color:hsl(var(--clr-white) / 0.22);
border-bottom:solid hsl(var(--clr-white)) 1px;
border-top:solid hsl(var(--clr-white)) 1px;
border-right:solid hsl(var(--clr-white)) 1px
}

.palette-card-list li:hover,.palette-card-list li:focus {
color:#000;
text-shadow:.4px 0 currentColor;
cursor:pointer
}

.p-colors-list {
background-color:hsl(var(--clr-white) / 0.22);
display:flex;
flex-direction:column;
row-gap:var(--gap-row-8,0.5rem);
align-items:center;
justify-content:center;
flex:1;
padding-block:.5rem;
overflow-y:auto
}

.p-colors-list li {
background-color:red;
font-weight:700;
font-size:var(--fs-50);
color:hsl(var(--clr-white));
display:flex;
justify-content:center;
align-items:center;
width:90%;
flex:1;
min-height:0;
cursor:pointer
}

.p-colors-list :first-child {
border-radius:var(--border-radius-8,0.5rem) var(--border-radius-8,0.5rem) 0 0
}

.p-colors-list li:last-of-type {
border-radius:0 0 var(--border-radius-8,0.5rem) var(--border-radius-8,0.5rem)
}

.add-svg-img {
width:2rem;
height:2rem
}

.converter {
width:90%
}

.converter-card {
background-color:hsl(var(--clr-shade-200));
width:100%;
border-radius:var(--border-radius-8,0.5rem);
aspect-ratio:1 / .658;
padding:2rem;
display:flex;
flex-direction:column;
row-gap:var(--gap-row-16)
}

.change-svg-img {
align-self:center
}

.converter-card .btn-styling {
align-self:center;
padding:.8rem .5rem;
border-radius:var(--border-radius-8);
border:none;
background-color:hsl(var(--clr-shade-250));
color:hsl(var(--clr-white));
box-shadow:none
}

.converter-card .btn-styling:hover {
box-shadow:0 0 3px 1px hsl(var(--clr-shade-400));
margin-left:.5rem
}

.converter-card-item {
background-color:hsl(var(--clr-white) / 0.22);
border:solid hsl(var(--clr-white)) 1px;
height:4rem;
padding:1rem;
display:flex;
justify-content:space-evenly;
column-gap:.5rem
}

.converter-input-container {
flex:1;
min-width:0;
display:flex;
column-gap:.5rem
}

.converter-input {
background-color:#ffffff00;
border:none;
text-align:center;
flex:1;
min-width:0;
overflow:hidden
}

.converter-input.not-valid {
border:solid red 1px;
border-radius:var(--border-radius-8)
}

.sitemap-div ul li {
padding:.2rem
}

.sitemap-div ul li a {
text-decoration:none;
color:hsl(var(--clr-white));
display:inline-block;
width:100%
}

.sitemap-div > ul > li a:hover,.sitemap-div > ul > li a:focus {
cursor:pointer;
background-color:hsl(var(--clr-shade-350));
color:hsl(var(--clr-shade-400));
text-shadow:.4px 0 currentColor
}

@media only screen and (min-width: 900px) {
:root {
--fs-100:1rem;
--fs-200:1.5rem;
--fs-300:2rem;
--fs-400:2.5rem;
--fs-500:3rem;
--fs-600:3.5rem;
--m-8:.5rem;
--m-16:1rem;
--m-24:1.5rem;
--m-32:2rem;
--m-48:2.5rem;
--m-64:4rem;
--m-128:8rem;
--p-8:.5rem;
--p-16:1rem;
--p-24:1.5rem;
--p-32:2rem;
--p-48:2.5rem;
--slider-height:4.5rem;
--slider-width:100%;
--slider-thumb-height:4.5rem;
--slider-thumb-width:4.5rem
}

.h-64 {
height:4rem
}

.grid-container {
display:grid;
grid-template-columns:repeat(12,90px);
column-gap:.9rem;
row-gap:var(--gap-row-80,5rem);
justify-content:center
}

.primary-header > .logo-div {
grid-column-start:1
}

.primary-header > .menu-nav {
grid-column:4 / span 8
}

.primary-header > .main-heading-div {
grid-row-start:2;
grid-column:1 / -1
}

.product-section-div > .product-heading-div {
grid-column:1 / -1
}

#color-picker-div {
grid-row-start:2;
grid-column:1 / span 5
}

#color-picker-div :where(#my-canvas,#slider) {
width:100%
}

#output-color-div {
grid-row-start:2;
grid-column:8 / -1
}

.sitemap-div {
grid-column:1 / span 3
}

.sub-footer > .logo-div {
grid-column:6 / -1
}

.copyright-section-footer {
grid-row-start:2;
width:100%
}

.palette {
width:100%
}

.palette .sub-container {
grid-column:1 / span 5
}

.converter {
width:100%
}

.converter .sub-container {
grid-column:1 / span 5
}

.primary-header {
padding-bottom:10rem
}

.toggle-menu-btn {
display:none
}

.menu-nav {
position:static;
background-color:hsl(var(--clr-shade-200));
backdrop-filter:none;
border-left:none;
border-bottom:none;
border-radius:var(--border-radius-8,0.5rem);
padding:0;
display:block
}

.menu-nav ul {
display:flex;
flex-direction:row
}

.menu-nav > ul > li > a {
display:inline-block;
width:100%;
padding-bottom:0;
border-bottom:none;
padding:1rem
}

.menu-nav .menu-items-list {
position:relative;
padding:0
}

.menu-nav .menu-items-list::before {
content:"";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
border-radius:var(--border-radius-8,8px);
pointer-events:none
}

.menu-nav .menu-items-list:hover::before,.menu-nav .menu-items-list:focus::before {
border-left:solid hsl(var(--clr-white)) 1px;
border-right:solid hsl(var(--clr-white)) 1px
}

.menu-nav .menu-items-list:hover,.menu-nav .menu-items-list:focus {
cursor:pointer;
background-color:hsl(var(--clr-shade-350));
text-shadow:.4px 0 currentColor
}

.menu-nav .menu-items-list a:hover,.menu-nav .menu-items-list a:focus {
border-bottom:none
}

#my-canvas {
margin:0;
display:block;
width:100%;
aspect-ratio:1 / .82
}

.wrap-output-color-div {
width:auto;
height:auto
}

.color-selected-styling {
height:4rem
}

.chosen-color-styling {
height:4rem
}

#output-color-div {
padding:2rem 1.5rem 0 0;
height:90%
}

.color-selected-styling {
width:45%
}

#output-color-div .copy-svg-img {
width:2rem
}

.palette-card-list {
padding:2rem 0
}

.palette-card-list li {
padding-left:3.5rem;
padding-right:4rem
}

.p-colors-list li {
padding:.5rem 2.5rem;
font-size:var(--fs-100)
}

.add-svg-img {
width:2.5rem;
height:2.5rem
}
}