/*                                                          
                                                        ,::::                                                        
                                                       ,::::::                                                       
                                                      ,::::::::                                                      
                                                     ,:::::::::,                                                     
                                                    .:::::::::::,                                                    
                                                   .:::::::::::::,                                                   
                                                  .:::::::::::,:;;:`                                                 
                                                 .:::::::: .:,+#########'.                                           
                                                `::::::::   .:::,,:;########`                                        
                                               `::::::::     ,:::::::. ,######`                                      
                                              `::::::::       ,:::::::,   ;####:                                     
                                             `::::::::         ,:::::::.    '###;     This Page was                               
                                            `::::::::           ,:::::::.    ,###.    Designed by                              
                                            ::::::::`            ,:::::::.    '##+    Kris C.                               
                                           ::::::::`              ::::::::`   `###`  /                                
                                          ::::::::`                ::::::::`   ###,                                  
                                         ::::::::`                  ::::::::` `###,                                  
                                        ::::::::`                    :::::::: ;###.                                    
                                       ,:::::::.                      :::::::,####`                                  
                                      ,:::::::.                        :::::,'###+                                   
                                     ,:::::::.          ..`            `:::::####:                                   
                                    ,:::::::.       :@########'`        `:::#####                                    
                                   ,:::::::.     `################:      `:#####',                                   
                                  .:::::::,     #####################.    ######:::                                  
                                 .:::::::,    '########################, ######',::,                                 
                                .:::::::,   `@#################################,::::,                                
                               .:::::::,   .@#################################;,:::::,                               
                              `:,,::::,   :###################################.:::::::,                              
                        ###################################################### ,:::::::,                             
                        :#####################################################  ,:::::::,                            
                         .####################################################.  ,:::::::.                           
                         ,;###################################################:   ,:::::::.                          
                       +######################################################;    ,:::::::.                         
                        .'####################################################,     ::::::::.                        
                        ::;###################################################`      ::::::::`                       
                       ::::###################################################        ::::::::`                      
                      ::::,'#################################################,         ::::::::`                     
                     ::::::,'#################################+ .###########+           ::::::::`                    
                    ,:::::::.:##########'###################@`  `@#########@`            ::::::::`                   
                   ,:::::::. :#######@: `@#################+    `##########@              ::::::::`                  
                  ,:::::::.    ;++;:`    .#################      ##########@.             `::::::::                  
                 ,:::::::,                `###############,      ;##########;              `::::::::                 
     AHHHH      ,:::::::,                  .@############@.      `@##########               `:::::::,                
      \        .:::::::,                    :############@,       ;##########:               `::::::::               
          '###+,::::::,                     `@############;        ;##########                .:::::::,              
         ;#####',:;'+##@`                   `@############'         :#########'                .:::::::,             
         :##############'                   :#############'          :########@`                .:::::::,            
          `+#########+###`                  +######+:#####+          `@########:                 .:::::::,           
          `::#######:`@##'                 .@#####+ .@####+          ,####`@####                  ,:::::::,          
         `:::#########.@@.                 '######   #####+          ####. :###@`                  ,:::::::,         
        `::,:##########;                   #####@    ;####'         :###+   +###:                   ,:::::::.        
       `::,####@.'######`                 '#####`    .####'        `@##@.   `@##+                    ,:::::::.       
       :,'#####` ;######`                `#####,      ####;        ####+     :###                     ::::::::.      
      ::,;##+,` +###+###.                '####;       +###:       +####.     `##@`                     ::::::::.     
     :::::,,:` +###:`@###':.            .####+        ###@.     ,@####'      ###@`                      ::::::::`    
    ::::::::` `@##;  @#######+         ,@####       ,@###@     :#####.      :##@,                        ::::::::`   
   ::::::::,,,.+###.,,'+#####;,,,,,,,+######,,,,,,,@#####+.,,,,:##;.,,,,,,,,,..,,,,,,,,,,,,,,,,,,,,,,,,,,,::::::::`  
  ,:::::::::::,;###:::::::::::::::,;#######:::::::,+#++':::::::::::::::::::::::::::::::::::::::::::::::::::::::::::` 
`,::::::::::::::###',::::::::::::::::;;;;:,:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::`
`,:::::::::::::,;##:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::`
  `,::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::.                                                                                                              
*/

* {
  margin: 0;
  padding: 0;
}

body {
    background-color: transparent;
    width: 100%;
    height: auto;
}

h1 {
   font-family: "Roboto", helvetica, sans-serif;
   color: indigo;
   font-weight: 700;
   font-size: 35pt;
   margin-top: 1vw;
}

h2 {
   font-family: "Roboto", helvetica, sans-serif;
   color: rebeccapurple;
   font-weight: 700;
   font-size: 30pt;
   margin-top: 1vw;
}

h3 {
   font-family: "Roboto", helvetica, sans-serif;
   color: rebeccapurple;
   font-weight: 600;
   font-size: 25pt;
   margin-top: 1.5vw;
}

h4 {
   font-family: "Roboto", helvetica, sans-serif;
   color: rebeccapurple;
   font-weight: 500;
   font-size: 20pt;
   margin-top: 0.5vw;
}

ul {list-style-type: none;}

li {
   font-family: "Roboto", helvetica, sans-serif;
   color: black;
   font-weight: 400;
   font-size: 12pt;
   line-height: 150%;
}


a {
  font-family: "Roboto", helvetica, sans-serif;
  font-weight: 500;
  color: goldenrod;
  text-decoration: none;
}

a:hover {
  color:khaki;
}


}
p{
  font-family: "Roboto", helvetica, sans-serif;
  color: black;
  font-weight: 400;
  font-size: 12pt;
}

header{
  width: 100%;
  height: auto;
  position: fixed;
  background-color: snow;
  border-bottom: 1px solid crimson;
}

main {
  width: 100%
  height: auto;
  padding: 0vw 0 2vw 0;
  background-color: white;
  font-family: "Roboto", helvetica, sans-serif;
  text-align: center;
}

figure {
  clear: both;
  width: 40%;
  height: auto;
  margin: 0vw 2vw 0 2vw;
  padding-top: 7vw;
  float: left;
}

section {
  width: 50%;
  height: auto;
  margin: 0vw 3vw 0 0;
  padding-top: 7vw;
  float: right;
  font-family: "Roboto", helvetica, sans-serif;
  text-align: justify;
  font-size: 3vw;
  color: rebeccapurple;
  font-weight: 700;
}

article { 
  width: 80%;
  height: auto;
  margin: 0 10vw 0 10vw;
  padding-top: 6vw;
  text-align: center;
 }

.responsive {
  width: 100%;
  height: auto; 
}


/* index page */

div#home {
  width: 15%;
  height: auto;
  display: inline-block;
  float: left;
  padding: 20px;
  font-size: 2vw;
}

nav {
  width: 100%;
  height: auto;
  display: inline-block;
  float: left;
}

ul#nav{
  list-style-type: none;
  padding: 1.6vw 0 1.6vw 0;
  float: left;
  background-color: snow;
}

li#nav {
   display: inline-block;
 }

li a#nav {
  color: black;
  font-size: 1vw;
  padding: 2vw 1vw 2vw 1vw;
 }

li a#name {
  color: goldenrod;
  font-size: 1.3vw;
  padding: 2vw 1vw 2vw 1vw;
 }

 li a#name:hover {
  color: khaki;
 }

li a#nav:hover {
    color:snow;
    background-color: gold;
 }

li a#nav:active {
  color:snow;
  background-color: indigo;
 }


ul#donuts {
  list-style-type: none;
}

nav#donuts {
  position: fixed;
  top: 13vh;
  left: 41vw;
}

figure#donuts {
  width: 1vw;
  height: 1vw;
  background-color: gold;
  border-radius: 50%;
  margin: 0 2vw 2vw 2vw;
  padding: 0.5vw;
}

figure#donuts:hover{
  background-color: khaki;
}