*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html { font-size: 110%; }
  html, body {
    height: 100%;
    width: 100%;
  }
  
  .container{
    display: flex;
    flex-direction: column;
  }
  
        body {
            font-family: 'Work Sans', helvetica, sans-serif;
            /*font-size: 1rem;*/
            font-weight: 300;
            line-height: 1.5;
            text-align: center;
            color: rgb(0, 0, 0);
            background-color: lavender;
        
        }
        
  header{
      background-color: rgb(192, 208, 235, .2);
      text-align: left;
      height: 58px;
      width: 100%;
      position: sticky;
      z-index: 1;
  }
  

  
  #nav {
    font-family:Arial, Helvetica, sans-serif;
    float: left;
    
    }
    a:visited {
        color: rgb(227, 156, 236);
    }
    a:hover{
        color: rgb(245, 84, 231);
    }
    a:active {
        color: rgb(161, 8, 161);
    }
    
    
    header ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      
      li {
        float: left;
      } 
      
      header ul li a {
        display: inline-block;
        color: rgb(0, 0, 0);
        text-align: center;
        padding: 25px;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 2px;
      }
      
      header ul li a :hover:not(.active) {
        background-color: rgb(245, 84, 205);
      }
      
      
      li:last-child {
        border-right: none;
      }
  
  
  
  
  
  
  
  
  .bg-shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  
  
  .bg-white {
    background-color: rgba(138, 203, 236, 0.2);;
    position: relative;
    height: 70%;
  
  }
  
  
  
  
  .mb {
    margin-bottom: 30px;
    position: relative;
    right: 15%;
  
  }
  
  
  section.row,
  footer.row {
  padding: 30px 30px 60px;
  }
  

  
  
  .copy{
      text-align: center;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-weight: 200;
      font-size: small;
  }

  
  footer{
    position: relative;
    top: 90%;
  }

  #ufoMania{
    width: 100%;
    margin: auto;
  }

  #stolenThing{
    animation: updown 15s linear infinite;
    z-index: 2;
    position: sticky;
  }
  @keyframes updown {
    0% {
        transform: translateY(30%);
    }

    100% {
        transform: translateY(5%);
    }
}

.chrisAninmation{
    border: 3px rgba(248, 175, 242, 0.404) dashed;
    width: 30%;
    background-color: rgba(94, 2, 112, 0.247);
    position: relative;
    left: 35%;
    top: 20px;
}

.Description1{
  text-decoration: underline;
}

.christmasImage{
    position: absolute;
    width: 10%;
    left: -10%;
    top: 5%;
}

.CRUD{
  border: 3px rgba(248, 175, 242, 0.404) dashed;
  width: 30%;
  background-color: rgba(94, 2, 112, 0.247);
  position: relative;
  left: 40%;
  bottom: -30px;
}

.crudImage{
  position: absolute;
  width: 15%;
  left: -13%;
  top: 5%;
}

.resume{
  position: relative;
  margin: 5%;
}
h3{
  color: rgb(135, 138, 143);
  margin: 1%;
}
  
  
      
                    
                    ::-webkit-scrollbar {
                      width: 5px;
                      height: 10px;
                    }
                    
                    ::-webkit-scrollbar-track {
                      background: plum; 
                    }
                     
                    ::-webkit-scrollbar-thumb {
                      background: rgb(95, 169, 211); 
                    }
                    
                    ::-webkit-scrollbar-thumb:hover {
                      background: rgb(95, 169, 211); 
                    }
                    

                            @media screen and (max-width: 768px) {

                              /* body{
                                  width: 100%;
                              } */
 
                              .row{
                                width: 100%;

                              }
                              .mb{
                                width: 50%;
                                position: relative;
                                left: 23%;
                                top: 10%;

                              }
                              header{
                                width: 100%;
                              }

                              #ufoMania{
                                width: 100%;
                                display: flex;
                                flex-wrap: wrap;
                              }

                              .chrisAninmation{
                                width: 50%;
                              }

                              .CRUD{
                                width: 50%;
                              }

                              .christmasImage{
                                width: 20%;
                                left: -50px;
                              }

                              .crudImage{
                                width: 30%;
                                left: -60px;
                              }

                        

        }