body {
       font-family: Fantasy, copperplate;
       background-attachment: fixed;
       margin: 0px;
       background: linear-gradient(to right , white, #61605d);
       }



 /*                                ----   Header CSS   -----                   */

   header {
      background: linear-gradient(to left , white, #61605d);
      grid-row: 1/2;
      grid-column: 1/9;
      }

   header a {

      color: Black;
      height: 100px;
      font-size: 50px;
      text-decoration: none;
      z-index: 100;
      }

   header h1 {
      line-height: 140%;
      padding: 1rem;
      margin-bottom: 0px;
      margin-top: 20px;
      z-index: 100;
      }

  .footer {
    font-family: "Fantasy", copperplate;
    font-size: 50px;
    color: #1f1e1c;
    border-bottom: 2px solid red;
    z-index: 3;
    text-align: center;
    }

   .navbar {
       overflow: hidden;
       background-color: #333;
       color: black;
       font-family: Arial, Helvetica, sans-serif;
       padding-left: 1500px;
       }

  .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: red;

      }

 /*                                ----   Body  CSS   -----                   */

    nav {
      font-weight: bold;
      grid-row: 2/3;
      grid-column: 1/-1;
      position: sticky;
      top: 0;
      background-color: #424242;
      z-index: 100;
      }

    .body-title {
       position: absolute;
       top: 250px;
       color: white;
       border-width: 1px;
       padding-left: 100px;
       font-size: 30px;
       font-family: Fantasy, copperplate;
       z-index: 100;
       }

 /*                                ----   Wrapper Method   -----                   */
    .Arial {font-family: "Arial", sans-serif;}
    .Helvetica {font-family: "Helvetica", sans-serif;}
    .Verdana {font-family: "Verdana", sans-serif;}
    .Trebuchet MS {font-family: "Trebuchet MS", sans-serif;}
    .Gill Sans {font-family: "Gill Sans", sans-serif;}
    .Noto Sans {font-family: "Noto Sans", sans-serif;}
    .Tahoma {font-family: "Tahoma", sans-serif;}
    .Lucida {font-family: "Lucida", sans-serif;}

    .Times New Roman {font-family: "Times New Roman", Serif;}
    .Optima {font-family: "Optima", serif;}
    .Didot {font-family: "Didot", serif;}
    .Georgia {font-family: "Georgia", Serif;}
    .Garamond {font-family: "Garamond", Serif;}
    .Typewriter {font-family: "American Typewriter", Serif;}

    .Andale Mono {font-family: "Monospace",	Andale Mono;}
    .Courier_New {font-family: "Monospace",	Courier New;}
    .Lucida_Console {font-family: "Monospace",	Lucida Console;}
    .Monaco {font-family: "Monospace",	Monaco;}
    .OCR A Std {font-family: "Monospace",	OCR A Std;}

    .Brush_Script_MT {font-family: "Cursive",Brush Script MT;}
    .Snell_Roundhand {font-family: "Cursive",Snell Roundhand;}
    .cursive {font-family: "Cursive",cursive;}
    .Lucida_Handwriting {font-family: "Lucida Console", "Courier New", monospace;}
    .Copperplate {font-family: "Fantasy",Copperplate;}
    .Copperplate2 {font-family: Fantasy ,Copperplate;}
    .Impact {font-family: "Fantasy",Impact;}
    .Luminari {font-family: "fantasy",Luminari;}
    .Chalkduster {font-family: "fantasy",Chalkduster;}
    .Trattatello {font-family: "Fantasy",Trattatello;}
    .Papyrus {font-family: "Fantasy",Papyrus;}
    .Apple Chancery {font-family: "cursive",Apple Chancery;}
    .Bradley Hand {font-family: "cursive",Bradley Hand;}

    .grid-layout-1 {
       border-bottom: 2px solid red;
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
       grid-template-rows: 70px 70px 70px 70px 70px 70px;
       z-index: 2;
       font-size: 30px;
       border-bottom: 2px solid  #363837;
       }

 /*                                ----   Font Colors   -----                   */

   .grid-layout-2 {
   background: linear-gradient(to right , #aba9a9, #61605d);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    10px 150px;
    border-width: 3px;
    Border-style: solid;
    border-color: #bdadac;
    border-radius: 20px;
    box-shadow: 10px 10px 30px white;
    font-weight: 900;
    font-size: 35px;
    grid-template-rows: 50px 50px 50px 50px 50px 50px 50px 50px
                        50px 50px 50px 50px 50px 50px 50px 50px
                        50px 50px 50px 50px 50px 50px 50px 50px
                        50px 50px 50px 50px 50px 50px 50px 50px
                        50px 50px 50px 50px 50px 50px 50px 50px
                        50px 50px 50px 50px 50px 50px 50px 50px
                        50px 50px 50px 50px 50px 50px 50px 50px;
    }

   .Example_1 {color: AliceBlue;}
   .Example_2 {color:  AntiqueWhite;}
   .Example_3 {color:  Aqua;}
   .Example_4 {color:  Aquamarine;}
   .Example_5 {color:  Azure;}
   .Example_6 {color:  beige;}
   .Example_7 {color:  Bisque;}
   .Example_8 {color:  Black;}
   .Example_9 {color:  BlanchedAlmond;}

   .Example_10 {color:  Blue;}
   .Example_11 {color: BlueViolet;}
   .Example_12 {color:  Brown;}
   .Example_13 {color:  BurlyWood;}
   .Example_14 {color:  CadetBlue;}
   .Example_15 {color:  Chartreuse;}
   .Example_16 {color:  Chocolate;}
   .Example_17 {color:  Coral; }
   .Example_18 {color:  CornflowerBlue;}
   .Example_19 {color:  cornsilk;}

   .Example_20 {color: Crimson;}
   .Example_21 {color: Cyant;}
   .Example_22 {color:  DarkBlue; }
   .Example_23 {color:  DarkCyan;}
   .Example_24 {color:  DarkGoldenRod;}
   .Example_25 {color:  DarkGray;}
   .Example_26 {color:  DarkGreen; }
   .Example_27 {color:  DarkKhaki;}
   .Example_28 {color:  DarkMagenta;}
   .Example_29 {color:  DarkOliveGreen;}

   .Example_30 {color: DarkOrange}
   .Example_31 {color: DarkOrchid;}
   .Example_32 {color:  DarkRed;}
   .Example_33 {color:  DarkCyan;}
   .Example_34 {color:  DarkSalmon;}

   .Example_35 {color: DarkSeaGreen;}
   .Example_36 {color:  DarkSlateBlue;}
   .Example_37 {color:  DarkSlateGray;}
   .Example_38 {color:  DarkTurquoise;}
   .Example_39 {color:  DarkViolet;}
   .Example_40 {color:  DeepPink;}

   .Example_41 {color:  DeepSkyBlue;}
   .Example_42 {color:  DimGray;}
   .Example_43 {color:  DodgerBlue;}
   .Example_44 {color:  FireBrick;}
   .Example_45 {color:  FloralWhite;}

   .Example_46 {color:  ForestGreen;}
   .Example_47 {color:  Fuchsia;}
   .Example_48 {color:  Gainsboro;}
   .Example_49 {color:  GhostWhite;}
   .Example_50 {color:  Gold;}

   .Example_51 {color:  GoldenRod;}
   .Example_52 {color:  Gray;}
   .Example_53 {color:  Green;}
   .Example_54 {color:  GreenYellow;}
   .Example_55 {color:  HoneyDew;}

   .Example_56 {color: HotPink;}
   .Example_57 {color: IndianRed;}
   .Example_58 {color:  Indigo;}
   .Example_59 {color:  Ivory;}
   .Example_60 {color:  Khaki;}

   .Example_61 {color: Lavender;}
   .Example_62 {color:  LavenderBlush;}
   .Example_63 {color: LawnGreen;}
   .Example_64 {color:  LemonChiffon;}
   .Example_65 {color:  LightBlue;}

   .Example_66 {color:  LightCoral;}
   .Example_67 {color:  LightCyan;}
   .Example_68 {color:  LightGoldenRodYellow;}
   .Example_69 {color:  LightGray;}
   .Example_70 {color:  LightGreen;}

   .Example_71 {color:  LightPink;}
   .Example_72 {color:  LightSalmon;}
   .Example_73 {color:  LightSeaGreen;}
   .Example_74 {color:  LightSkyBlue;}
   .Example_75 {color:  LightBlue;}

   .Example_76 {color: LightSteelBlue;}
   .Example_77 {color:  LightYellow;}
   .Example_78 {color:  Lime;}
   .Example_79 {color:  LimeGreen;}
   .Example_80 {color:  Linen;}

   .Example_81 {color:  Magenta;}
   .Example_82 {color:  Maroon;}
   .Example_83 {color:  MediumAquaMarine;}
   .Example_84 {color:  MediumBlue;}
   .Example_85 {color:  MediumOrchid;}

   .Example_86 {color:  MediumPurple;}
   .Example_87 {color:  MediumSeaGreen;}
   .Example_88 {color:  MediumSlateBlue;}
   .Example_89 {color:  MediumSpringGreen;}
   .Example_90 {color:  MediumTurquoise;}

   .Example_91 {color:  MediumVioletRed;}
   .Example_92 {color:  MidnightBlue;}
   .Example_93 {color:  MintCream;}
   .Example_94 {color:  MistyRose;}
   .Example_95 {color:  Moccasin;}

   .Example_96 {color:  NavajoWhite;}
   .Example_97 {color:  Navy;}
   .Example_98 {color:  OldLace;}
   .Example_99 {color:  Olive;}
   .Example_100 {color:  OliveDrab;}

   .Example_101 {color:  Orange;}
   .Example_102 {color:  OrangeRed;}
   .Example_103 {color:  Orchid;}
   .Example_104 {color:  PaleGoldenRod;}
   .Example_105 {color:  PaleGreen;}

   .Example_106 {color:  PaleTurquoise;}
   .Example_107 {color:  PaleVioletRed; }
   .Example_108 {color:  PapayaWhip;}
   .Example_109 {color:  PeachPuff;}
   .Example_110 {color:  Peru}

   .Example_111 {color:  Pink;}
   .Example_112 {color:  Plum;}
   .Example_113 {color:  Purple;}
   .Example_114 {color:  RebeccaPurple;}
   .Example_115 {color:  Red;}

   .Example_116 {color:  RosyBrown;}
   .Example_117 {color:  RoyalBlue; }
   .Example_118 {color:  SaddleBrown;}
   .Example_119 {color:  Salmon;}
   .Example_120 {color:  SandyBrown;}

   .Example_121 {color:  SeaGreen;}
   .Example_122 {color:  SeaShell;}
   .Example_123 {color:  Sienna;}
   .Example_124 {color:  Silver;}
   .Example_125 {color:  SkyBlue;}

   .Example_126 {color:  SlateBlue;}
   .Example_127 {color:  SlateGray;}
   .Example_128 {color:  Snow;}
   .Example_129 {color:  SpringGreen;}
   .Example_130 {color:  SteelBlue;}

   .Example_131 {color:  Tan;}
   .Example_132 {color:  Teal;}
   .Example_133 {color:  Thistle;}
   .Example_134 {color:  Tomato;}
   .Example_135 {color:  Turquoise;}

   .Example_136 {color:  Violet;}
   .Example_137 {color:  Wheat;}
   .Example_138 {color:  White;}
   .Example_139 {color:  WhiteSmoke;}
   .Example_140 {color:  Yellow;}

   /*                                ----   Font Size   -----                   */
       .grid-layout-3 {
       display: grid;
       grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr
       grid-template-rows: 130px 150px 130px;
       z-index: 2;
       padding: 30px;
       border-bottom: 2px solid  #363837;
       }

       .Apx {font-size: 10px;}
    .Bpx {font-size: 15px;}
    .Cpx {font-size: 20px;}
    .Dpx {font-size: 25px;}
    .Epx {font-size: 30px;}
    .Fpx {font-size: 35px;}
    .Gpx {font-size: 40px;}
    .Hpx {font-size: 45px;}
    .Ipx {font-size: 50px;}
    .Jpx {font-size: 55px;}
    .Kpx {font-size: 60px;}
    .Lpx {font-size: 65px;}
    .Mpx {font-size: 70px;}
    .Npx {font-size: 75px;}

 /*                                ----   Wrapper Method   -----                   */
#wrapper {
    box-shadow: 0px 3px 3px rgba(66, 66, 66, 0.3);
    display: grid;
    grid-auto-rows: minmax(0px, auto);
    z-index: 3;
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
}

main {
    padding-left: 2rem;
    padding-right: 2rem;
    grid-row: 4 / 5;
    grid-column: 2 / 8;
    background-color: #ffffff;
    z-index: 3;
}


* {box-sizing: border-box;}

nav ul{
    list-style-type: none;
}
nav ul li{display: inline;
}


nav ul {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-flow: row nowrap;
    list-style-type: none;
    z-index: 1;
}

nav ul li {width: 100%;}

nav a:hover {background-color: #ba1c21;}



/*                   -----------    Buttons   --------------------*/



 .dropbtn {
    width: 100%;
    background-color: #424242;
    font-size: 16px;
    border: none;
    font-family: "Fantasy", copperplate;
    color: white;
    opacity: .5;
          }

 .dropdown {
    position: relative;
    display: inline-block;
    font-size: 15px;
    text-decoration: none;
   z-index: 3;
    }

 .dropdown-content {
   background: white;
   text-align: left;
   display: none;
   font-family: "Fantasy", copperplate;
   position: absolute;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 3;
   }

 .dropdown-content a {
   text-align: left;
   color: black;
   width: 350px;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   z-index: 3;
   }

 .dropbtn:hover {background-color: red;cursor: pointer;}

 .dropdown:hover .dropdown-content {display: block; }



/*                                     Media Queries                             */


@media only screen and (max-width: 1100px){
    .wrapper{
        grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);
    }
}
    ::selection{
        float: none;
        width: 100%;
        padding-right: 0px;
        }
        }

@media screen and (max-width: 600px) {
    header h1{
        background-image: none;
        text-align: center;
        z-index: 3;
        }
    nav{
        grid-row: 2 / 3;
        grid-column: 1 / 9;
        }
    }