*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, p, a, button{
    margin: 0;
    padding: 0;
    color: black !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

a{
    color: black !important;
    text-decoration: underline;
    cursor: pointer;
}

h1{font-size: 2.5rem;}
h2{font-size: 2rem;}
h3{font-size: 1.5rem;}
h4, p, a{font-size: 1rem;}

button{
    display: inline-block;
    outline: 0;
    border: none;
    cursor: pointer;
    font-weight: 600;
    border-radius: 4px;
    font-size: 13px;
    height: 30px;
    background-color: #009A17;
    color: white !important;
    padding: 0 20px;
}

button:hover{
    background-color: #00430a;
}

.container{
    background: white;
    background: linear-gradient(to right bottom, rgba(255, 255, 255, .7), rgba(255, 255, 255, .4));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 25px;
    width: 100%;
    height: auto;
}

.space{
    width: 100%;
}

/*#region Background Styles*/

.bg {
    animation:slide 6s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, #009A17 50%, #00430a 50%);
    bottom:0;
    left:-50%;
    opacity:.5;
    position:fixed;
    right:-50%;
    top:0;
    z-index:-1;
}

.bg2 {
    animation-direction:alternate-reverse;
    animation-duration:8s;
}
  
.bg3 {
    animation-duration:9s;
}

@keyframes slide {
    0% {
      transform:translateX(-25%);
    }
    100% {
      transform:translateX(25%);
    }
}

/*#endregion*/

@media screen and (max-width: 768px) {
    /* Small Screens */

    .container{
        padding: 1rem;
    }

    /*Spaces*/
    #DesktopSpace { display: none; }
    #MobileSpace { display: block; }
}
  
@media screen and (min-width: 768px) {
    /* Large Screens */

    .container{
        padding: 2.5rem;
    }

    /*Spaces*/
    #DesktopSpace { display: block; }
    #MobileSpace { display: none; }
}