profile-site/styles.css

/*==================================================
Main
==================================================*/

body {
   font-family: Helvetica;
   background-color: whitesmoke;
   padding: 0;
   margin: 0;
   overflow-y: scroll;
   scroll-snap-type: y mandatory;
}

::-webkit-scrollbar {
   display: none;
}

/*==================================================
Scrolling
==================================================*/

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

section {

}

/*==================================================
Navigation Bar
==================================================*/

nav {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   background-color: #262626;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 8px;
   scroll-snap-align: start;
   box-shadow: 0 8px 15px #262626;
}

nav a {
   color: #fff;
   text-decoration: none;
   margin: 8px;
}

/*==================================================
Main Sectors
==================================================*/

.project {
   margin: 0;
   height: 100vh;
   scroll-snap-align: start;
}

#gold-rush {
   height: 100vh;
   width: 100%;
   background-color: #272727;
   position: relative;
}

#incremental {
   height: 100vh;
   width: 100%;
   background-color: whitesmoke;
   position: relative;
}

#style {
   height: 100vh;
   width: 100%;
   background-color: #282828;
   position: relative;
}

#hillside {
   height: 100vh;
   width: 100%;
   background-color: whitesmoke;
   position: relative;
}

#schoolarly-bay {
   height: 100vh;
   width: 100%;
   background-color: #282828;
   position: relative;
}

#squirrel {
   height: 100vh;
   width: 100%;
   background-color: whitesmoke;
   position: relative;
   scroll-snap-align: start;
}

#personal {
   height: 100vh;
   width: 100%;
   background-color: whitesmoke;
   position: relative;
   scroll-snap-align: start;
}

/*==================================================
Project Contents
==================================================*/

.project h2, .project h4, .project p {
   margin: 25px 25px;
}

/*==================================================
Other
==================================================*/

@keyframes heavenly-glow {
   0% {
      box-shadow: none;
   }
   50% {
      box-shadow: 5px 5px 5px whitesmoke,
                  5px -5px 5px whitesmoke,
                  -5px 5px 5px whitesmoke,
                  -5px -5px 5px whitesmoke;
   }
   100% {
      box-shadow: none;
   }
}

@keyframes darkness-grows {
   0% {
      box-shadow: none;
   }
   50% {
      box-shadow: 5px 5px 5px #262626,
                  5px -5px 5px #262626,
                  -5px 5px 5px #262626,
                  -5px -5px 5px #262626;
   }
   100% {
      box-shadow: none;
   }
}

@keyframes rainbow-glow {
   0% {
      box-shadow: none;
   }
   50% {
      box-shadow: 2px 2px 1px red,
                  4px 4px 1px orange,
                  6px 6px 1px yellow,
                  8px 8px 1px lightgreen,
                  10px 10px 1px lightblue,
                  12px 12px 1px purple,

                  2px -2px 1px red,
                  4px -4px 1px orange,
                  6px -6px 1px yellow,
                  8px -8px 1px lightgreen,
                  10px -10px 1px lightblue,
                  12px -12px 1px purple,

                  -2px 2px 1px red,
                  -4px 4px 1px orange,
                  -6px 6px 1px yellow,
                  -8px 8px 1px lightgreen,
                  -10px 10px 1px lightblue,
                  -12px 12px 1px purple,

                  -2px -2px 1px red,
                  -4px -4px 1px orange,
                  -6px -6px 1px yellow,
                  -8px -8px 1px lightgreen,
                  -10px -10px 1px lightblue,
                  -12px -12px 1px purple;
   }
   100% {
      box-shadow: none;
   }
}

/*==================================================
Display Images
==================================================*/

.display-image-dark {
   width: 150px;
   position: absolute;
   bottom: 30px;
   right: 60px;
   border-radius: 50%;
   transition: all .8s;
   animation: darkness-grows 3s infinite;
}

.display-image-dark:hover {
   transform: rotateX(360deg);
}

.display-image-light {
   width: 150px;
   height: 150px;
   position: absolute;
   bottom: 30px;
   right: 60px;
   border-radius: 50%;
   transition: all .8s;
   animation: heavenly-glow 3s infinite;
}

.display-image-light:hover {
   transform: rotateY(360deg);
}

#schoolarly-bay img:nth-child(2) {
   bottom: 20%;
   left: 20%;
   width: 175px;
   height: 175px;
}

#schoolarly-bay img:nth-child(3) {
   bottom: 20%;
   left: 20%;
}

#schoolarly-bay img:nth-child(4) {
   bottom: 20%;
   left: 20%;
   width: 125px;
   height: 125px;
}