:root {
     --bg:#3C3C3C;
     --box:#1F1F1F;
     --textcol:#FFFFFF;
     --bigtext: 66px;
     --smalltext: 44px;
}

body {
     margin: 0;
     font-family: 'Amaranth';
     color: var(--textcol);
     background-color: var(--bg);
     overflow-x: hidden;
}

h2 {
     font-size: var(--bigtext);
}

p {
     font-size: var(--smalltext);
}

.navbar {
     margin: 0;
     background-color: var(--box);
     padding-top: 15px;
     padding-bottom: 20px;  
     h2 {
          margin-top: 0;
          margin-bottom: 0;
          text-align: center;
     }
}

.logo {
     position: fixed;
     right: 30px;
     top: 90%;
     z-index: 10;
}

.hero {
     margin-top: 0;
     img{
          width: 100vw;
     }
}

.section {
     display: flex;
     flex-basis: auto;
     padding: 5vh;
     .leftdiv {
          padding-right: 2.5vw;
          .slidingbox{
               h2 {
                    margin-top: 0;
                    margin-bottom: 0;
                    text-align: center;
               }
               background-color: var(--box);
               padding: 1vw;
          }
     }
     .rightdiv {
          padding-left: 2.5vw;
          .fade-in {
               opacity: 0;
               transform: translateX(-75px);
               transition: all 750ms; 
               &.in-view {
                   opacity: 1;
                   transform: translateX(0);
               }
          }     
          .slidingimg{   
               img {
                    width: 40vw;
               }
          }
          .dropdown {
               h2 {
                    margin-top: 0;
                    margin-bottom: 0;
                    text-align: center;
               }
               background-color: var(--box);
               padding: 1vw;
          }
     }
}

/* This is mostly the same but the sliding is inversed */
.section2 {
     display: flex;
     flex-basis: auto;
     padding: 5vh;
     .leftdiv {
          padding-right: 2.5vw;
          .slidingbox{
               h2 {
                    margin-top: 0;
                    margin-bottom: 0;
                    text-align: center;
               }
               background-color: var(--box);
               padding: 1vw;
          }
     }
     .rightdiv {
          padding-left: 2.5vw;
          .slidingimg{        
               img {
                    width: 40vw;
               }
          }
          .dropdown {
               h2 {
                    margin-top: 0;
                    margin-bottom: 0;
                    text-align: center;
               }
               background-color: var(--box);
               padding: 1vw;
          }
     }
}

.fade-in {
     opacity: 0;
     transform: translateX(-75px);
     transition: all 750ms; 
     &.in-view {
         opacity: 1;
         transform: translateX(0);
     }
}

.bluring {
     filter: blur();
}