styles.css

/* RESET BORDER BOX - text size adjust for safari in iphones  */

html {
    box-sizing: border-box;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* VARIABLES */

:root {
/* main color */
    --main-color: steelblue;
    --font-color:hsla(0, 0%, 96%, 100%);
    --icon-color: hsla(32, 0%, 50%, 100%);
    --icon-hovercolor: steelblue;
    --footer-textcolor:hsla(32, 0%, 50%, 100%);
    --footer-bckgrndcolor:hsla(30, 29%, 5%, 100%);
    --background-color:hsla(32, 0%, 13%, 100%);
/* SLA variations */
    --try_this_color: 207;
/* custom color 1 */
    --try_h_1: 30;
    --try_s_1: 100%;
    --try_l_1: 50%;
    --try_a_1: 100%;
/* custom color 2 */
    --try_h_2: 178;
    --try_s_2: 65%;
    --try_l_2: 46%;
    --try_a_2: 100%;
/* custom color 3 */
    --try_h_3: 270;
    --try_s_3: 36%;
    --try_l_3: 50%;
    --try_a_3: 100%;
/* custom color 4 */
    --try_h_4: 330;
    --try_s_4: 70%;
    --try_l_4: 69%;
    --try_a_4: 100%;
/* custom color 5 */
    --try_h_5: 80;
    --try_s_5: 60%;
    --try_l_5: 50%;
    --try_a_5: 100%;
/* custom color 6 */
    --try_h_6: 60;
    --try_s_6: 77%;
    --try_l_6: 60%;
    --try_a_6: 100%;
}

/* LAYOUT AND TEXT SETTINGS */

html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    width: 90%;
    max-width: 1200px;
    min-width: 500px;
    margin: auto;
    font-family: 'Arial', sans-serif;
    text-align: center;
    background-color: var(--background-color);
}

h1 {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 5rem;
    line-height: 2rem;
    color: var(--font-color);
}

h2 {
    font-size: 2rem;  
    line-height: 2rem;
    color: var(--main-color);
}

h3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
    font-size: 1.6rem;  
    line-height: 0.8rem;
    color: var(--font-color);
}

h4 {
    font-size: 1.6rem;  
    line-height: 0.8rem;
    color: var(--font-color)
}
h5 {
    font-weight: 400;
    font-size: 1rem;  
    line-height: 1.3rem;
    color: var(--font-color);
}
h6 {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--icon-color);
}
p {
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1rem;
    text-align: left;
}

a {
    color: var(--icon-color);
    transition: color 0.5s;
}

a:hover,
a:focus {
    color:var(--icon-hovercolor); 
}

.link_to_hex {
    margin-top: 2rem;
}

.selected-text {
    font-size: 1.2rem;
    font-weight: 900;
}

.intro_specs {
margin-bottom:3rem;
}


/* COLORS LAYOUT */

.intro-text {
    margin-top: 8rem;
}

.about-txt {
    width: 70%;
    margin: auto;
}

#hue-swatches,
#custom-palette {
    margin-top: 3rem;
    border-top: var(--footer-bckgrndcolor) 2px solid;
}

#try-this-hue  {
    margin-top: 3rem;
}

.color-wheel {
    display: grid;
    width: 100%;
    margin: auto;
    grid-template: repeat(6, 1fr) / repeat(6, 1fr);
    grid-gap: 5px;
}

.color-w {
    width: 100%;
    height: 9rem;
}

.s-l-a {
    width:85%;
    margin: auto;
}

.colorgroup {
    display: flex;
    width: 100%;
    margin: auto;
}

.colorito {
    width: 100%;
    height: 7rem;
}

.color-w p,
.colorito p {
    margin: auto;
    padding: 10%;
}

/* S-L-A INPUT FORM  */

#hue-form {
    margin-top: 2rem;
    text-align: center;
    color: var(--font-color);
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 3rem;
    cursor: pointer;
}

.text-form-hue {
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
}

#new-hue-slider {
    display: block;
    width: 50%;
    margin: auto;
    text-align: center;
    cursor: pointer;
}

#new-hue-number {
    width: 10%;
    color: var(--font-color);
    background-color: var(--footer-textcolor);
    margin: none;
    border: none;
    text-align: center;
    cursor: pointer;
}


/* CUSTOM COLOR PALETTE  */

.colores {
    width: 100%;
    margin: auto;
}

.custom {
    display: flex;
    width: 100%;
    margin: auto;
}
.custom-color {
    width: 100%;
}

.custom-colorito {
    width: 100%;
    height: 9rem;
    margin-bottom: 2rem;
}

/* CUSTOM PALETTE INPUT FORM  */

#hsla-form {
    display: block;
    width: 100%;
    margin: auto;
    margin-top: 1rem;
    color: var(--font-color);
    font-weight: 400;
    font-size: 1rem;
    line-height: 2.5rem;
    cursor: pointer;
}

#hue1-number, #hue2-number, #hue3-number, #hue4-number, #hue5-number, #hue6-number, #sat1-number, #sat2-number, #sat3-number, #sat4-number, #sat5-number,#sat6-number, #lig1-number, #lig2-number, #lig3-number, #lig4-number, #lig5-number,#lig6-number, #alph1-number, #alph2-number, #alph3-number, #alph4-number, #alph5-number,#alph6-number {
    width: 30%;
    color: whitesmoke;
    background-color: var(--footer-textcolor);
    margin: none;
    border: none;
    text-align: center;
    cursor: pointer;
}

#hue1, #hue2, #hue3, #hue4, #hue5, #hue6,
#sat1, #sat2, #sat3, #sat4, #sat5, #sat6,
#lig1, #lig2, #lig3, #lig4, #lig5, #lig6,
#alph1, #alph2, #alph3, #alph4, #alph5, #alph6 {
    width: 45%;
    cursor: pointer;
}

/* contact */
footer {
    margin-top: 3rem;
    background-color: var(--footer-bckgrndcolor);
}

.text-footer {
    margin: auto;
    padding: 1rem 0 1rem 0;
    font-size: 0.7rem;
    text-align: center;
    color: var(--footer-textcolor);
}
#contact {
    width: 100%;
    margin: auto;
    padding-top: 0.2rem;
    text-align: center;
}

.contactFlex {
    margin-top: -1rem;
    display: flex;
    width: 100%;
}
.contactIcons {

    display: inline-flex;
    justify-content: space-around;
    margin: auto;
    width: 20%;
    font-size: 1.52rem;
  }


/* MEDIA QUERIES */

@media only screen and (max-width: 1050px) {

    body,
    .s-l-a {
        width: 100%;
    }

    .color-wheel {
        grid-template: repeat(9, 1fr) / repeat(4, 1fr);
    }
    .colorito .selected-text {
        font-size: 0.8rem;
        font-weight: 900;
    }
    .colorito p {
        font-size: 0.5rem;
        line-height: 0.8rem;
    }

    #try-this-hue {
        margin-top: 3rem;
        width: 90%;
        margin: auto;
    }

    .custom {
        display: grid;
        grid-template: repeat(3, 1fr) / repeat(2, 1fr);
        width: 100%;
    }

    .custom-controls {
        margin-bottom: 3rem;
    }

    #new-hue-slider {
        width: 70%;
    }

    #new-hue-number {
        width: 15%; 
    }

    .contactIcons {
        width: 30%;
      }

}

@media only screen and (max-width: 680px) {

    .color-wheel {
        grid-template: repeat(18, 1fr) / repeat(2, 1fr);
    }

    #try-this-hue {
        margin-top: 3rem;
        width: 100%;
    }

    .custom {
        grid-template: repeat(3, 1fr) / repeat(2, 1fr);
    }
}


/* COLOR SWATCHES */

.color-0 {
    background-color: hsla(0, 100%, 50%, 100%);
}
.color-10 {
    background-color: hsla(10, 100%, 50%, 100%);
}
.color-20 {
    background-color: hsla(20, 100%, 50%, 100%);
}
.color-30 {
    background-color: hsla(30, 100%, 50%, 100%);
}
.color-40 {
    background-color: hsla(40, 100%, 50%, 100%);
}
.color-50 {
    background-color: hsla(50, 100%, 50%, 100%);
}
.color-60 {
    background-color: hsla(60, 100%, 50%, 100%);
}
.color-70 {
    background-color: hsla(70, 100%, 50%, 100%);
}
.color-80 {
    background-color: hsla(80, 100%, 50%, 100%);
}
.color-90 {
    background-color: hsla(90, 100%, 50%, 100%);
}
.color-100 {
    background-color: hsla(100, 100%, 50%, 100%);
}

.color-110 {
    background-color: hsla(110, 100%, 50%, 100%);
}
.color-120 {
    background-color: hsla(120, 100%, 50%, 100%);
}
.color-130 {
    background-color: hsla(130, 100%, 50%, 100%);
}
.color-140 {
    background-color: hsla(140, 100%, 50%, 100%);
}
.color-150 {
    background-color: hsla(150, 100%, 50%, 100%);
}
.color-160 {
    background-color: hsla(160, 100%, 50%, 100%);
}
.color-170 {
    background-color: hsla(170, 100%, 50%, 100%);
}
.color-180 {
    background-color: hsla(180, 100%, 50%, 100%);
}
.color-190 {
    background-color: hsla(190, 100%, 50%, 100%);
}
.color-200 {
    background-color: hsla(200, 100%, 50%, 100%);
}
.color-210 {
    background-color: hsla(210, 100%, 50%, 100%);
}

.color-220 {
    background-color: hsla(220, 100%, 50%, 100%);
}
.color-230 {
    background-color: hsla(230, 100%, 50%, 100%);
}
.color-240 {
    background-color: hsla(240, 100%, 50%, 100%);
}
.color-250 {
    background-color: hsla(250, 100%, 50%, 100%);
}
.color-260 {
    background-color: hsla(260, 100%, 50%, 100%);
}
.color-270 {
    background-color: hsla(270, 100%, 50%, 100%);
}
.color-280 {
    background-color: hsla(280, 100%, 50%, 100%);
}
.color-290 {
    background-color: hsla(290, 100%, 50%, 100%);
}
.color-300 {
    background-color: hsla(300, 100%, 50%, 100%);
}
.color-310 {
    background-color: hsla(310, 100%, 50%, 100%);
}
.color-320 {
    background-color: hsla(320, 100%, 50%, 100%);
}

.color-330 {
    background-color: hsla(330, 100%, 50%, 100%);
}
.color-340 {
    background-color: hsla(340, 100%, 50%, 100%);
}
.color-350 {
    background-color: hsla(350, 100%, 50%, 100%);
}


/* COLOR SATURATION SWATCHES */

.color-sat1 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 100%);
}
.color-sat2 {
    background-color: hsla(var(--try_this_color), 90%, 50%, 100%);
}
.color-sat3 {
    background-color: hsla(var(--try_this_color), 80%, 50%, 100%);
}
.color-sat4 {
    background-color: hsla(var(--try_this_color), 70%, 50%, 100%);
}
.color-sat5 {
    background-color: hsla(var(--try_this_color), 60%, 50%, 100%);
}
.color-sat6 {
    background-color: hsla(var(--try_this_color), 50%, 50%, 100%);
}
.color-sat7 {
    background-color: hsla(var(--try_this_color), 40%, 50%, 100%);
}
.color-sat8 {
    background-color: hsla(var(--try_this_color), 30%, 50%, 100%);
}
.color-sat9 {
    background-color: hsla(var(--try_this_color), 20%, 50%, 100%);
}
.color-sat10 {
    background-color: hsla(var(--try_this_color), 10%, 50%, 100%);
}
.color-sat11 {
    background-color: hsla(var(--try_this_color), 0%, 50%, 100%);
}

/* COLOR LIGHTNESS SWATCHES */

.color-lig1 {
    background-color: hsla(var(--try_this_color), 100%, 100%, 100%);
}
.color-lig2 {
    background-color: hsla(var(--try_this_color), 100%, 90%, 100%);
}
.color-lig3 {
    background-color: hsla(var(--try_this_color), 100%, 80%, 100%);
}
.color-lig4 {
    background-color: hsla(var(--try_this_color), 100%, 70%, 100%);
}
.color-lig5 {
    background-color: hsla(var(--try_this_color), 100%, 60%, 100%);
}
.color-lig6 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 100%);
}
.color-lig7 {
    background-color: hsla(var(--try_this_color), 100%, 40%, 100%);
}
.color-lig8 {
    background-color: hsla(var(--try_this_color), 100%, 30%, 100%);
}
.color-lig9 {
    background-color: hsla(var(--try_this_color), 100%, 20%, 100%);
    color: var(--font-color);
}
.color-lig10 {
    background-color: hsla(var(--try_this_color), 100%, 10%, 100%);
    color: var(--font-color);
}
.color-lig11 {
    background-color: hsla(var(--try_this_color), 100%, 0%, 100%);
    color: var(--font-color);
}

/* ALPHA SWATCHES */

.color-alph1 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 100%);
}
.color-alph2 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 90%);
}
.color-alph3 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 80%);
}
.color-alph4 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 70%);
}
.color-alph5 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 60%);
}
.color-alph6 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 50%);
}
.color-alph7 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 40%);
}
.color-alph8 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 30%);
}
.color-alph9 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 20%);
    color: var(--font-color);
}
.color-alph10 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 10%);
    color: var(--font-color);
}
.color-alph11 {
    background-color: hsla(var(--try_this_color), 100%, 50%, 0%);
    color: var(--font-color);
}



/* CUSTOM COLORS */

/* PRIMER GRUPO */

.color-cust1 {
    background-color: hsla(var(--try_h_1), var(--try_s_1), var(--try_l_1), var(--try_a_1));
}
.color-cust2 {
    background-color: hsla(var(--try_h_2), var(--try_s_2), var(--try_l_2), var(--try_a_2));
}
.color-cust3 {
    background-color: hsla(var(--try_h_3), var(--try_s_3), var(--try_l_3), var(--try_a_3));
}
.color-cust4 {
    background-color: hsla(var(--try_h_4), var(--try_s_4), var(--try_l_4), var(--try_a_4));
}
.color-cust5 {
    background-color: hsla(var(--try_h_5), var(--try_s_5), var(--try_l_5), var(--try_a_5));
}
.color-cust6 {
    background-color: hsla(var(--try_h_6), var(--try_s_6), var(--try_l_6), var(--try_a_6));
}