@charset "utf-8";
/********************************************************* TABLE OF CONTENTS */
/******************************************************************** RESETS */
/********************************************************************** GRID */
/******************************************************** PRIMARY NAVIGATION */
/******************************************************************* HEADING */
/********************************************************** ASIDE NAVIGATION */
/************************************************************** MAIN SECTION */
/******************************************************************** FOOTER */

/*                                                                     RESETS*/
body{
        background: black ;
        font-family: 'Rosario', sans-serif ;
        font-size: 100% ;
        margin: 0 auto ;
        padding: 1.5rem ;
        width: 96% ;
}
.hi {
  color: hsl(51, 98%, 53%) ;
  font-size: 1.1rem ;
  font-weight: bold ;
}
.blue {
  color: blue ;
}
.green {
  color: green ;
}
.orange {
  color: orange ;
}
.purple {
  color: purple ;
}
.red {
  color: red ;
}
.yellow {
  color: yellow ;
}
p {
    line-height: 150% ;
}
/*                                                               link resets */
    a {
        transition: 1s ;
    }
        a:link {
                color: darkred ;
        }
        a:visited {
                color: red ;
        }
        a:hover, a:focus {
                color: white ;
        }
        a:active {
                color: yellow ;
        }
/********************************************************************** GRID */

.wrapper {
        background-color: black;
        background-color: hsla(0, 1%, 0%, 0.79) ;
        display: grid ;
        grid-gap: 0.2rem ;
        grid-template-columns: [col] 4rem [col] 4rem [col] 4rem [col] 4rem [col] 4rem [col] 4rem [col] 4rem [col] 4rem [col] 4rem [col] 4rem [col] 4rem [col] 4rem ;
        grid-template-rows: [row] 1rem [row] auto [row] ;
        min-width: 100% ;
        max-width: 100% ;
    }

    .box {
            background-color: black ;
            color: white;
            border-radius: 0.25rem ;
            padding: 0 2rem ;
            font-size: 150% ;
    }
/*                                                        PRIMARY NAVIGATION */
    .a {
            background-color: black ;
            grid-column: col / span 5 ;
            grid-row: row ;
            margin-top: -3rem ;
    }

/*                                                     navigation animations */
            .material-icons {
            		font-size: 1.5rem ;
            		color: hsl(4, 33%, 84%) ;
            		position: relative ;
            		border-radius: 50% ;
            		padding: 0.4rem ;
            		margin: 0.2rem ;
            		transition: color 1s ease, background-color 1s ease, transform 1s ease ;
            }
                .active .material-icons {
                            color: red ;
                        }
            .material-icons:after {
            		content: "" ;
            		width: 100% ;
            		height: 100% ;
            		border: solid 0.15rem hsla(0, 94%, 43%, 0.93) ;
            		transform: scale(0.7) ;
            		position: absolute ;
            		top: -0.15rem ;
            		left: -0.15rem ;
            		border-radius: 50% ;
            		transition: all 1s ease ;
            }
            .material-icons:hover:after {
            		transform: scale(1) ;
            		box-shadow: 0 0 2rem hsla(4, 37%, 93%, 0.85), 0 0 0.5rem hsla(0, 6%, 2%, 0.23) ;
            }
            .material-icons:hover {
            		background-color: transparent ;
            		transform: rotate(360deg) ;
            		cursor: pointer ;
            		box-shadow: none ;
            }
        .a li {
                display: inline-block ;
                padding: 0;
        }

/*                                                                   HEADING */
    .b {
            background-color: hsla(0, 94%, 13%, 0.93) ;
            background: linear-gradient(to right, black, hsla(0, 94%, 13%, 0.93), hsla(0, 94%, 23%, 0.93)) ;
            color: black ;
            font-size: 2rem ;
            grid-column: col 6 / span 12 ;
            grid-row: row ;
            margin-top: -3.7rem ;
            text-align: right ;
            text-shadow: 0 0 3rem hsl(0, 100%, 67%) ;
    }

/*                                                          ASIDE NAVIGATION */
    .c {
            background-color: hsla(0, 0%, 10%, 0.91) ;
            font-size: 0.8rem ;
            grid-column: col / span 4 ;
            grid-row: row 2 ;
    }
        .c .active li {
            border: 0.05rem solid gray ;
            border-radius: 0.2rem ;
                }
        .c a h2 {
          color: white ;
        }
    a {
            list-style-type: none ;
            text-decoration: none ;
    }
    i {
            font-size: 2rem ;
    }
    aside ul {
        margin-left: -1.5rem ;
    }
        aside li {
            font-size: 1rem ;
            font-weight: bold ;
        }
        aside ul ul li {
            font-size: 0.8rem ;
            font-weight: normal ;
        }

/*                                                              MAIN CONTENT */
    .d {
            background-color: hsla(0, 0%, 20%, 0.91) ;
            grid-column: col 5 / span 13 ;
            grid-row: row 2 ;
            max-width: 50rem ;
            overflow: auto ;
        }
        .d a {
            color: red ;
            font-weight: bold ;
        }
        .d h4 {
          font-size: 1.2rem ;
          font-style: italic ;
          margin-left: 4rem ;
          margin-top: -2rem ;
        }
        .dh4 {
            color: darkgreen ;
            margin: 0;
            padding-top: 2rem ;
        }
        .d p {
            font-size: 1rem ;
        }
        h3 {
                color: yellow ;
        }
        .code{
                background-color: gray ;
                background-color: hsla(359, 10%, 8%, 0.95) ;
                border-radius: 0.25rem ;
                color: lime ;
                color: hsl(133, 89%, 48%) ;
                font-family: 'Source Code Pro', monospace ;
                font-size: 0.9rem ;
                font-weight: bold ;
        }
/*                                                                    FOOTER */
    .e {
            font-size: 0.5rem ;
            grid-column: col / span 17 ;
            grid-row: row 3 ;
    }
    .e a {
        color: gray ;
        transition: 1s ;
    }
    .e a:hover {
        color: red ;
    }
    dl {
      background-color: hsl(0, 1%, 15%) ;
      border-radius: 1.5rem ;
      padding: 2rem ;
    }
    dd {
      font-size: 0.8rem ;
    }
    dt {
      color: lime ;
      font-family: "source code pro" ;
      font-size: 1.5rem ;
      font-weight: bold ;
    }
    .float_right {
      float: right ;
    }
/* MISCELLANEOUS STYLING */
    /*The hue_rotate class name below only applies to c_intermediate_D09.html*/
.hue_rotate:hover {
    filter: hue-rotate(2700deg);
    transition: 50s ;
}
/* Interior grid for Web D&D */
.grid {
    display: grid ;
    grid-gap: 0.5rem ;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)) ;
}
    .cell {
        background-color: black ;
        border: 0.2rem solid black ;
        border-radius: 0.5rem ;
        overflow: hidden ;
        transition: 1s ;
    }
        .cell:hover {
            border: 0.2rem solid yellow ;
            transition: 1s ;
        }


.middle {vertical-align: middle;}
.sub {vertical-align: sub;}
.super {vertical-align: super;}
.top {vertical-align: top;}
        /*.w01 {grid-area: 1 / 1 / 1 / 1 ; }
        .w02 {grid-area: 1 / 2 / 1 / 2 ; }
        .w03 {grid-area: 1 / 3 / 1 / 3 ; }
        .w04 {grid-area: 1 / 4 / 1 / 4 ; }
        .w05 {grid-area: 1 / 5 / 1 / 5 ; }

        .w06 {grid-area: 2 / 1 / 2 / 1 ; }
        .w07 {grid-area: 2 / 2 / 2 / 2 ; }
        .w08 {grid-area: 2 / 3 / 2 / 3 ; }
        .w09 {grid-area: 2 / 4 / 2 / 4 ; }
        .w10 {grid-area: 2 / 5 / 2 / 5 ; }

        .w11 {grid-area: 3 / 1 / 3 / 1 ; }
        .w12 {grid-area: 3 / 2 / 3 / 2 ; }
        .w13 {grid-area: 3 / 3 / 3 / 3 ; }
        .w14 {grid-area: 3 / 4 / 3 / 4 ; }
        .w15 {grid-area: 3 / 5 / 3 / 5 ; }

        .w16 {grid-area: 4 / 1 / 4 / 1 ; }
        .w17 {grid-area: 4 / 2 / 4 / 2 ; }
        .w18 {grid-area: 4 / 3 / 4 / 3 ; }
        .w19 {grid-area: 4 / 4 / 4 / 4 ; }
        .w20 {grid-area: 4 / 5 / 4 / 5 ; }