html{
    background-image: url("../images/fashion-icon.jpeg");
}
body{
    width: 90%;
    margin: auto;
    display: grid;
    background-color: var(--main-bg-color);
    grid-template-columns: 15% 85%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas:
        "head head"
        "nav main"
        "nav main"
        "nav main"
        "foot foot";
}

:root{
    --main-color:rgb(81, 1, 138);
    --main-bg-color:rgba(255, 192, 235, 0.8);
    --main-text-color:#111111;
    --background-odd:rgb(245, 208, 240);
    --background-even:rgb(255, 128, 192);
}
*{
    font-family:Georgia, 'Times New Roman', Times, serif;
    color: var(--main-text-color);
    padding:1em;
    margin:0;

}

a:hover{
    color:var(--main-color);
}

h1{
    text-transform: uppercase;
}

p{
    text-indent: 2em;
    text-align: left;
}

#detail-paragraph{
    padding-right:22em;
}

cite{
    font-size:xx-small;
}

img{
    max-width: 100%;
}
figure{
    text-align: center;
    margin:2em;
}

nav a:link{
    background-color:rgb(203, 203, 249);
    text-decoration: none;
}

nav a:hover{
    background-color: rgb(190, 157, 220);
    text-decoration: underline;
    color: rgb(19, 26, 160);
    
}

nav a{
    display:inline-block;
    width: 90%;
}


table{
    border: medium solid black;
    max-width: 100%;
    margin: auto;
    border-collapse: collapse;
}
table+p{
    padding-top:1em;
}
td, th{
    border: thin solid rgb(56,55,55);
    padding:0.3em
}
caption{
    font-weight:bold;
    font-size:1.5em;
}
tr:nth-child(even){
    background-color:var(--background-even);
}
tr:nth-child(odd){
    background-color:var(--background-odd);
}
form{
    background-color: var(--main-bg-color);
    border: thin solid black;
    clear: both;
    max-width: 30em;
    margin:auto;
    padding:1%;
}
form p{
    text-indent:0;
}
fieldset{
    padding: 1%
}
legend{
    padding:1%
}

main{
    grid-area:main;
}

header{
    grid-area:head;

}

nav{
    text-align: center;
    grid-area: nav;
}


footer{
    grid-area:foot;

}

#grid-container-nav{
    display: grid;
    grid-template-columns:auto;
    align-content:start;
 }

#nav-a{
    grid-row: 1/2;
    text-align: left;
 }
#nav-b{
    grid-row: 3/4;
    text-align: left;

}

#nav-c{
    grid-row: 4/5;
    text-align: left;

}

#nav-d{
    grid-row: 2/3;
    text-align: left;

}

.two-columns-form{
    display: grid;
    grid-template-columns: 75% 25%;
    grid-template-rows: 5% 85% 10%;

}

#section-1{
    grid-row:1/2;
    grid-column:1/3;
}

#section-2{
    grid-row:2/3;
    grid-column:2/3;
}
#section-3{
    grid-row:2/3;
    grid-column:1/2;
}

#section-4{
    grid-row:3/4;
    grid-column:1/3;

}


.two-columns{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 5% 65% 30%;

}

.two-columns-detail{
    display:grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 20% 20% 60%;

}

#section-one{
    grid-row:1/2;
    grid-column:1/3;
}
#section-two{
    grid-row: 2/3;
    grid-column:1/2;
}

#section-three{
    grid-row:3/4;
    grid-column:1/3;
}

#section-four{
    grid-row:2/3;
    grid-column:2/3;
}

#section-a{
    grid-row:1/2;
    grid-column:1/3;
}

#section-b{
    grid-row:2/4;
    grid-column:1/2;
}

#section-c{
    grid-row:2/3;
    grid-column:2/3;
}

#section-d{
    grid-row:3/4;
    grid-column:1/3;
}

input[type=text], input[type=email], select {
    box-sizing: border-box;
    width: 30em;
    padding: 1em;
    border: 0.1em solid #ff9393;
 }

 input[type=submit] {
    width: 15em;
    background-color: rgb(149, 80, 120);
    color: white;
    padding: 0.5em;
    margin: 0.2em 0;
    border-radius: 1em;
 }

 .radio label,
 .checkbox label {
    display:inline-block;
 }


 input[type=radio] + label,
 input[type=checkbox] + label
  {
    cursor: pointer;
 }
 input[type=radio],
 input[type=checkbox] {
    appearance: none;
    margin: 0;
 }

 input[type=radio] + label::before,
 input[type=checkbox] + label::before
  {
    content: "\00a0";  /* Space */
    border-radius: 0.5em;
    display: inline-block;
    width: 1em;  height: 1em; 
    text-align: center;
    line-height: 1em;
    font-size: 1em;
    background-color: #aaa;
    border: 0.1em solid white;
    margin-right:0.5em;
 }
 input[type=radio]:checked + label::before,
 input[type=checkbox]:checked + label::before {
    content: "\2022";  /* Bullet */
    color: white;
    background: rgb(244, 109, 199);
 }

input[type=radio]:focus + label::before,
input[type=checkbox]:focus + label::before  {
   box-shadow: 0 0 0 0.1em #888;
}

.activePage {
    background-color: rgb(201, 201, 201);
}