:root {
     --blue:#455ca6; 
     --cyan:#337b9b;
     --purple:#3a1c40;
     --pink:#ecac9f; 
     --regblue:#79beff;  
     --head:"Kablammo", system-ui;
       font-optical-sizing: auto;
       font-weight: 400;
       font-style: normal;
       font-variation-settings:
         "MORF" 0;
    --body:"Red Hat Display", sans-serif;
      font-optical-sizing: auto;
      font-style: normal;
    }


 html,body {
     scroll-behavior: smooth;
 }
 body {
     font-family: var(--body);
     color: #ffffff;
     font-size: 1.5em;
     text-align: center;
 }
 .section-1{
    padding-top: 5vw;
 }
 .section-2, .section-3, .section-4, .section-5, .section-6{
     height: 80vh;
     margin-left: 0;
     padding-left: 5vw;
     padding-bottom: 10vw;
     padding-top: 5vw;
     position: relative;
 }
 .section :first-child {
     margin-top: 0;
     margin-right: 0;
 }
 .section > h2 {
    font-family: var(--head);
     font-size: 3rem;
     font-weight: normal;
     color: #ffffff;
 }
 .section > h1{
    font-family: var(--head);
    font-size: 8rem;
     font-weight:bold;
     padding-left: 5vw;
 }
 .section-1 {
     background-color: #ffffff;
     color: var(--blue);
 }
 .section-2 {
     background-color: var(--blue);
     color: var(--pink)
 }
 .section-3 {
     background-color: var(--purple);
     color: var(--blue);
 }
 .section-4 {
     background-color: var(--cyan);
     color: var(--purple);
 }
 .section-5 {
    background-color: var(--pink);
    color: var(--cyan);
}
.section-6 {
    background-color: var(--regblue);
    color: var(--pink);
}
 .sidebar-1 {
     width: 30vw;
     height: 20vh;
     background-color: #ffffff;
     padding: 2vw;
     border-radius: 20em;
 }
 .sidebar-2 {
     width: 25vw;
     height: 25vh;
     background-color: #ffffff;
     padding: 2vw;
     border-radius: 3em;
     margin-bottom: 5em;
 }
 .fade-in {
     opacity: 0;
     transform: translateX(-75px);
     transition: all 750ms; 
     &.in-view {
         opacity: 1;
         transform: translateX(0);
     }
 }
 .wrapper {
    display: flex;
 }
 .sidebars {
    flex-basis: 45%;
    flex-shrink: 0;
 }
 .photo0{
    align-content: left;
    position: relative;
    margin-top: -70vh;

 }
 .photo1{
    flex-basis: 55%;
    padding-left: 5vh;  
 }
 .photo2{
    flex-basis: 55%;
    padding-left: 5vh;
 }
 .photo3{
    flex-basis: 55%;
    padding-left: 5vh;
 }
 .photo4{
    flex-basis: 55%;
    padding-left: 5vh;
 }
 .photo5{
    flex-basis: 55%;
    padding-left: 5vh;
 }
 nav {
     position: fixed;
     right: 30px;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     ul {
         list-style: none;
     }
     li {
         margin-bottom: 1em;
     }
     a {
         display: block;
         height: 1em;
         width: 1em;
         border-radius: 1em;
         background-color: rgba(255,255,255,0.5);
         transition: all 200ms;
         &:hover, &.active {
             background-color: rgb(255, 255, 255);
         }
 
     }
 }