:root {
   --gold: rgba(255, 215, 0);
   --green: green;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   overflow-y: scroll;
   overflow-x: hidden;
}

body {
   overflow: hidden;
   background: black;
   color: #D5D5D5;
   padding: 5%;
   font-family: sans-serif;
}

header {
   top: 0;
   position: relative;
   margin: auto;
   width: 100%;
   max-height: 300px;
}

/* banner canves */
/* TODO: center banner text */ 
#canvas1 {
   bottom: 0;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;
   text-align: center;
   align-items: center;
   z-index: -1;
   width: 100%;
}

nav > ul {
   display: flex;
   justify-content: space-evenly;
   flex-wrap: wrap;
   align-items: center;
   padding-inline-start: 0;
   margin-block: 0;
   height: 100%;
}

.buttons {
   position: absolute;
   top: 0;
   width: 90vw;
   text-align: center;
   margin: 0em auto 1em auto;
}

.button {
   position: relative;
   width: 8%;
   height: 40px;
   margin: 10px;
   display: inline-block;
   border-radius: 999px;
   border: 4px solid green;
   background-color: rgba(5, 5, 5, 0.80);
   transition: 0.5s;
   font-size: 1.2em;
   font-weight: 100;
   color: green;
   line-height: 20px;
   min-width: 90px;
   text-decoration: none;
}

.button a {
   display: inline-block;
   position: relative;
   text-decoration: none;
   color: green;
   padding: 0.5em 2.5em;
   margin: 0 -2em;
}

.button:hover {
   color: rgba(255, 215, 0);
   box-shadow: inset 2px 2px 3px rgba(255, 215, 0), inset -2px -2px 3px rgba(255, 215, 0), 
   inset 2px -2px 3px rgba(255, 215, 0);
   border: 4px solid rgba(255, 215, 0);
   background-color: rgba(5, 5, 5, 0.80);
}

.button a:hover {
   color: rgba(255, 215, 0);
}

.button:visited {
   color: green;
   text-decoration: none;
}

.button-resume {
   min-width: 12%;
}

.buttons-resume-box {
   width: 90vw;
   text-align: center;
   margin: 0em auto 1em auto;
}

/* constellations canvas */
#canvas2 {
   position: fixed;
   top: 0; 
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -2;
}

h1 {
   color: rgba(255, 215, 0);
   position: relative;
   padding: 10px 0px 2px 8px;
}

h2 {
   padding: 8px 0px 2px 15px;
}

h3 {
   padding: 5px 0px 3px 40px;
}

#middle {
   margin: 1em auto;
   text-align: center;
}

.resume {
   position: relative;
   width: 80%;
   background-color: rgba(40, 40, 40, 0.85);
   border: rgba(255, 215, 0);
   border-radius: 30px;
   padding: 2% 5%;
   margin: 0em auto 2em auto;
}

.resume > ul {
   padding: 8px 0px 8px 8%;
}

.bullets {
   font-size: 1.27em;
}

.line-divider {
   border-bottom: 2px solid rgba(255, 215, 0);
   margin: 2px 0;
   padding: 0px 0px 5px 0px;
   clear: right;
 }

#summary-and-pfp {
   position: relative;
   top: -80px;
   width: 80%;
   display: flex;
   justify-content: space-evenly;
   flex-wrap: wrap;
   align-items: center;
   padding-inline-start: 0;
   margin-block: 0;
   height: 100%;
   margin: 0em auto 0em auto;
}

.summary {
   left: 3%;
   font-size: 18px;
   margin: 2em 2em 0em 2em;
   max-width: 36rem;
   line-height: 1.65em;
   background-color: rgba(0, 0, 0, 0.7);
}

.pfp {
   margin: 1em 1em 0em 1em;
   max-width: 27%;
   float: right;
   z-index: 1;
}

::-webkit-scrollbar {
   width: .85em;
}

::-webkit-scrollbar-track {
   background: hsl(120 100% 25% / 1);     
   border-radius: 100vw;
   margin-block: .5em;
   margin-inline: 1em;
}

/* moving inner portion aka thumb*/
::-webkit-scrollbar-thumb {
   background: hsl(51 100% 40% / 1);     
   border: .25em solid hsl(51 75% 50% / 1);
   border-radius: 100vw;
}

/* thumb optional hover darkened */
::-webkit-scrollbar-thumb:hover {
   background: hsl(51 100% 10% / 1);     
}

/* For Firefox */
@supports (scrollbar-color: rgba(255, 215, 0) green) {
   * {
       scrollbar-color: rgba(255, 215, 0) green;     /* can use hsl or rgb… thumb track*/ 
       scrollbar-width: auto;   /* only have none, auto, or thin option */
   }
}

/* TODO fix margin top  */
footer {
   position: relative;
   bottom: 0;
   top: 100%;
   width: 12%;
   text-align: center;
   margin: 3em auto 0 auto;
   color: green;
   background-color: rgba(5, 5, 5, 0.80);
   border-radius: 999px;
   min-width: 440px;
   padding: 0px 0px;
}

/* TODO mobile */
@media only screen and (max-width: 1000px) {
   body {
      font-size: 16px;
   }   
}

/* TODO larger screens  */
@media only screen and (min-width: 1000px) {
   body {
      font-size: 12px;
   }  
}

@media print {
   body {
      font-size: 12px;
      background-color: white;
      color: black;
   }  
}

@media screen and (orientation: landscape) {
   
}

.flex-center {
   text-align: center;
   margin: 4em auto 4em auto;
   width: 11%;
   min-height: 5em;
   max-height: 6em;
   background-color: rgba(0, 0, 0, 0.6); 
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   border-radius: 30px;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
   -webkit-box-align: center;
   -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.social {
  padding: 1px;
  -webkit-animation: icon3d 200ms 10;
  animation: icon3d 200ms 10;
  color: #fff;
  border-radius: 30px;
}

.social:hover {
   -webkit-animation: icon3d 200ms infinite;
         animation: icon3d 200ms infinite;
 }

@keyframes social {
  0% {
    text-shadow: 5px 4px  var(--gold), -5px -6px var(--green);
  }
  25% {
    text-shadow: -5px -6px var(--gold), 5px 4px var(--green);
  }
  50% {
    text-shadow: 5px -4px var(--gold), -8px 4px var(--green);
  }
  75% {
    text-shadow: -8px -4px var(--gold), -5px -4px var(--green);
  }
  100% {
    text-shadow: -5px 0 var(--gold), 5px -4px var(--green);
  }
}