/*================================================== Main ==================================================*/ body { font-family: Helvetica; background-color: whitesmoke; padding: 0; margin: 0; overflow-x: hidden; 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 ==================================================*/ #gold-rush-icon { width: 150px; position: absolute; bottom: 30px; right: 60px; border-radius: 50%; transition: all .8s; } #gold-rush-icon:hover { box-shadow: 5px 5px 5px whitesmoke, 5px -5px 5px whitesmoke, -5px 5px 5px whitesmoke, -5px -5px 5px whitesmoke; }