:root {
    --green: #821380;
    --dark: #1b1b1b;
}


*{
    margin: 0;
    padding: 0;
   box-sizing: border-box; 
}
body {
    width: 100vw;
    height: 100vh;
    display: flex;
     justify-content: center;
    align-items: center;
    justify-content: center;
    align-items: center;
    background: var(--green);
    background: linear-gradient(to right top, var(--dark), var(--green));
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
      font-family: "Oswald";
        text-decoration: none;
}






/*.container {
    max-width: 1200px;
    max-height: 80vh;
    display: flex;
    flex-wrap: wrap;
    background: rgba(0, 0, 0, 0.75);
    background: linear-gradient(to right top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25));
    padding: 32px 92px;
    border-radius: 20px;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    overflow: auto;
}



/*.container {
    width: 66%;
height: 66%;
background: rgba(0, 0, 0, 0.75);
background: linear-gradient(to right top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25));
border-radius: 20px;
position: relative;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);

} */

.bg__img {
    position: absolute;
   
}


.bg__img--button {
     top: 0;
    right: 60%;
    height: 30vh;
    animation:  slideDown 10s linear infinite ;

 }

.bg__img--dots {
    top: 0;
    left: 60%;
    height: 75vh;
    animation: rotate 15s linear infinite ;

}

.bg__img--logo {
    left: 0;
    top: 50%;
    transform: translateX(0, -50%);
    width: 20%;
}




section:first-child {
    margin-right: 100px;
}


.a {
    text-decoration: none;
    font-family: "Playfair Display"
}

button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 700px;
    height: 100px;
    margin-top: 32px;
    padding: 16px 0;
    font-size: 60px;
    font-weight: 700;
    color: #fff;
    background: var(--green);
    background: linear-gradient(to right top, var(--green), rgba(255, 255, 255, 0.6));
    border: none;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
}

button:focus {
    outline-color: #fff;
}

button:after {
    width: 50px;
    height: 150%;
    position: absolute;
right: -1000;
    left: -70px;
    top: -25px;
    content: "";
    background-color: rgba(255, 255, 255, 0.4);
    transform: rotate(20deg);
    transition: transform 0.4s;
}

button:hover:after {
    transform: translateX(1000px) rotate(30deg);
}



@keyframes slideDown {
    from {transform: translateY(-30vh)}
    to {transform: translateY(100VH)}

}


@keyframes rotate {
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
    
}