/* 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;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

    
/* VARIABLES */

:root {
/* main color */
--main-color: SteelBlue;
--font-color:WhiteSmoke;
--icon-color: hsla(32, 0%, 50%, 100%);
--icon-hovercolor: SteelBlue;
--footer-textcolor:hsla(32, 0%, 17%, 100%);
--footer-bckgrndcolor:hsla(30, 29%, 5%, 100%);
--background-color:hsla(32, 0%, 13%, 100%);
/* hex tester 2 */
--try_this_red1:100;
--try_this_green1:220;
--try_this_blue1:30;
/* custom color 1 */
--try_h_1: 30;
--try_s_1: 100;
--try_l_1: 50;
/* custom color 2 */
--try_h_2: 178;
--try_s_2: 65;
--try_l_2: 46;
/* custom color 3 */
--try_h_3: 170;
--try_s_3: 36;
--try_l_3: 50;
/* custom color 4 */
--try_h_4: 250;
--try_s_4: 70;
--try_l_4: 69;
/* custom color 5 */
--try_h_5: 80;
--try_s_5: 60;
--try_l_5: 50;
/* custom color 6 */
--try_h_6: 60;
--try_s_6: 77;
--try_l_6: 60;
}


/* 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: 1.4rem;
    color: var(--font-color);
}

h5 {
    font-size: 1rem;  
    line-height: 1.3rem;
    color: var(--font-color);
}

h6 {
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.2rem;
    color:var(--icon-color);
}

p {
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1rem;
    text-align: left;
    color:var(--footer-bckgrndcolor);
}

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

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

.link_to_hsla {
    margin-top:2rem;
}


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

.intro-text2 h5 {
    font-weight: 400;
    text-align: center;
}

.intro-text2 {
    width:60%;
    margin: auto;
    margin-bottom:3rem;
}

.chapter {
    margin-top: 3rem;
    border-top: var(--footer-bckgrndcolor) 2px solid;
}

.about-txt {
    width:60%;
    margin: auto;
    margin-bottom:3rem;
    text-align: left;
}

.color-wheel {
    display: grid;
    width: 100%;
    margin: auto;
    grid-template: repeat(24, 1fr) / repeat(6, 1fr);
    grid-gap: 5px;
}
    
.color-w {
    width: 100%;
    height: 9rem;
}
    
.color-w p {
    margin: auto;
    padding: 10% 5%;
}
       
.color-18 p, .color-17 p, .color-15 p,
.color-89 p, .color-90 p, .color-16 p,
.color-91 p, .color-92 p, .color-103 p,
.color-93 p, .color-96 p, .color-97 p,
.color-137 p, .color-138 p, .color-25 p,
.color-49 p, .color-59 p, .color-58 p,
.color-57 p, .color-60 p, .color-70 p,
.color-69 p, .color-88 p {
    color:var(--font-color);
}

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

.understanding-text h6 { 
    width:100%;       
    margin: auto;
    margin-bottom:3rem;
    text-align: left;
}

.textblock {
    display: inline-flex;
}

.block {
    top:0;
    width:45.5%;
    margin: auto;
    margin-top:0;
}

.textblock2 {
    display: inline-flex;
}
    
.block3 {
    width:30%;
    margin: auto;
    margin-top: 0;
}

.block4 {
    width:80%;
    margin: auto;
}




/* HEX COLOR TESTER */

#colortester-sample {
    width: 98%;
    height: 200px;
    margin: auto;
    margin-bottom: 2rem;
    border: 2px solid var(--footer-bckgrndcolor);
    background-color: var(--font-color);
}
 
label {
    color: var(--font-color);
}

input {
    width: 60%;
}

#input-color {
    display: block;
    margin: auto;
    width: 60%;
    text-align: center;
}



/* HEX COLOR TESTER 2   */

.colorito {
    width: 98%;
    height: 200px;
    margin: auto;
    margin-bottom: 2rem;
    border: 2px solid var(--footer-bckgrndcolor);
}

.color-hex {
    background-color: rgb(var(--try_this_red1), var(--try_this_green1),var(--try_this_blue1));
}

#hex-form {
    margin-top: 2rem;
    margin: auto;
    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;
}

#red1-slider, #green1-slider, #blue1-slider {
    display: inline;
    width: 40%;
    margin: auto;
    text-align: center;
    cursor: pointer;
}

#red1-number, #green1-number, #blue1-number {
    width: 20%;
    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:  var(--font-color);
    background-color: var(--footer-textcolor);
    margin: none;
    border: none;
    text-align: left;
    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;
}

/* CUSTOM COLOR PRIMER GRUPO */

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




/* FOOTER contact data */

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 {
        width: 98%;
    }

    .intro-text2,
    .about-txt {
     width: 80%;
    }

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

    .contactIcons {
        width: 30%;
    }

    .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%; 
    }
}

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

    body {
        width: 98%;
    }

    .intro-text2,
    .about-txt {
        width: 80%;
    }

    .textblock,
    .textblock2 {
        display: block;
        margin: auto;
        width: 80%;
    }

    .block,
    .block3,
    .block4 {
        margin: auto;
        width: 100%;
    }

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

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




/* COLOR SWATCHES */

/* PINK RED ORANGE BROWN YELLOW */
.color-00 {background-color: RosyBrown;}
.color-01 {background-color: Pink;}
.color-02 {background-color: LightPink;}
.color-03 {background-color: HotPink;}
.color-04 {background-color: MediumVioletRed;}
.color-05 {background-color: DeepPink;}
.color-06 {background-color: PaleVioletRed;}
.color-07 {background-color: IndianRed;}
.color-08 {background-color: Salmon;}
.color-09 {background-color: DarkSalmon;}
.color-10 {background-color: LightSalmon;}
.color-11 {background-color: LightCoral;}
.color-12 {background-color: Coral;}
.color-13 {background-color: Tomato;}
.color-14 {background-color: Crimson;}
.color-15 {background-color: FireBrick;}
.color-16 {background-color: Brown;}
.color-17 {background-color: Maroon;}
.color-18 {background-color: DarkRed;}
.color-19 {background-color: Red;}
.color-20 {background-color: OrangeRed;}
.color-21 {background-color: DarkOrange;}
.color-22 {background-color: Orange;}
.color-23 {background-color: Chocolate;}
.color-24 {background-color: Sienna;}
.color-25 {background-color: SaddleBrown;}
.color-26 {background-color: Peru;}
.color-27 {background-color: SandyBrown;}
.color-28 {background-color: BurlyWood;}
.color-29 {background-color: Tan;}
.color-30 {background-color: Wheat;}
.color-31 {background-color: Moccasin;}
.color-32 {background-color: NavajoWhite;}
.color-33 {background-color: PeachPuff;}
.color-34 {background-color: Bisque;}
.color-35 {background-color: BlanchedAlmond;}
.color-36 {background-color: PapayaWhip;}
.color-37 {background-color: Cornsilk;}
.color-38 {background-color: LightYellow;}
.color-39 {background-color: LightGoldenrodYellow;}
.color-40 {background-color: LemonChiffon;}
.color-41 {background-color: PaleGoldenrod;}
.color-42 {background-color: DarkKhaki;}
.color-43 {background-color: Khaki;}
.color-44 {background-color: Yellow;}
.color-45 {background-color: Gold;}
.color-46 {background-color: Goldenrod;}
.color-47 {background-color: DarkGoldenrod;}
/* GREEN */
.color-48 {background-color: Olive;}
.color-49 {background-color: DarkOliveGreen;}
.color-50 {background-color: OliveDrab;}
.color-51 {background-color: YellowGreen;}
.color-52 {background-color: GreenYellow;}
.color-53 {background-color: Chartreuse;}
.color-54 {background-color: LawnGreen;}
.color-55 {background-color: Lime;}
.color-56 {background-color: LimeGreen;}
.color-57 {background-color: ForestGreen;}
.color-58 {background-color: Green;}
.color-59 {background-color: DarkGreen;}
.color-60 {background-color: SeaGreen;}
.color-61 {background-color: MediumSeaGreen;}
.color-62 {background-color: SpringGreen;}
.color-63 {background-color: MediumSpringGreen;}
.color-64 {background-color: LightGreen;}
.color-65 {background-color: PaleGreen;}
.color-66 {background-color: DarkSeaGreen;}
.color-67 {background-color: MediumAquamarine;}
.color-68 {background-color: LightSeaGreen;}
.color-69 {background-color: DarkCyan;}
.color-70 {background-color: Teal;}
/* BLUE */
.color-71 {background-color: Cyan;}
.color-72 {background-color: LightCyan;}
.color-73 {background-color: PaleTurquoise;}
.color-74 {background-color: Aquamarine;}
.color-75 {background-color: Turquoise;}
.color-76 {background-color: MediumTurquoise;}
.color-77 {background-color: DarkTurquoise;}
.color-78 {background-color: CadetBlue;}
.color-79 {background-color: SteelBlue;}
.color-80 {background-color: LightSteelBlue;}
.color-81 {background-color: LightBlue;}
.color-82 {background-color: PowderBlue;}
.color-83 {background-color: SkyBlue;}
.color-84 {background-color: LightSkyBlue;}
.color-85 {background-color: DeepSkyBlue;}
.color-86 {background-color: DodgerBlue;}
.color-87 {background-color: CornflowerBlue;}
.color-88 {background-color: RoyalBlue;}
.color-89 {background-color: Blue;}
.color-90 {background-color: MediumBlue;}
.color-91 {background-color: DarkBlue;}
.color-92 {background-color: Navy;}
.color-93 {background-color: MidnightBlue;}
.color-94 {background-color: MediumSlateBlue;}
/* PURPLE */
.color-95 {background-color: SlateBlue;}
.color-96 {background-color: DarkSlateBlue;}
.color-97 {background-color: Indigo;}
.color-98 {background-color: Purple;}
.color-99 {background-color: DarkMagenta;}
.color-100 {background-color: DarkOrchid;}
.color-101 {background-color: DarkViolet;}
.color-102 {background-color: BlueViolet;}
.color-103 {background-color: RebeccaPurple;}
.color-104 {background-color: MediumPurple;}
.color-105 {background-color: MediumOrchid;}
.color-106 {background-color: Magenta;}
.color-107 {background-color: Orchid;}
.color-108 {background-color: Violet;}
.color-109 {background-color: Plum;}
.color-110 {background-color: Thistle;}
.color-111 {background-color: Lavender;}
/* WHITE */
.color-112 {background-color: MistyRose;}
.color-113 {background-color: LavenderBlush;}
.color-114 {background-color: Linen;}
.color-115 {background-color: AntiqueWhite;}
.color-116 {background-color: Ivory;}
.color-117 {background-color: FloralWhite;}
.color-118 {background-color: OldLace;}
.color-119 {background-color: Beige;}
.color-120 {background-color: SeaShell;}
.color-121 {background-color: WhiteSmoke;}
.color-122 {background-color: GhostWhite;}
.color-123 {background-color: AliceBlue;}
.color-124 {background-color: Azure;}
.color-125 {background-color: MintCream;}
.color-126 {background-color: HoneyDew;}
.color-127 {background-color: Snow;}
.color-128 {background-color: White;}
/* GRIS */
.color-129 {background-color: Gainsboro;}
.color-130 {background-color: LightGray;}
.color-131 {background-color: Silver;}
.color-132 {background-color: DarkGray;}
.color-133 {background-color: Gray;}
.color-134 {background-color: DimGray;}
.color-135 {background-color: LightSlateGray;}
.color-136 {background-color: SlateGray;}
.color-137 {background-color: DarkSlateGray;}
.color-138 {background-color: Black;}