body, html {
    height: 100%;
    margin: 0;
    padding: 0;
        margin: 0 auto;

        background: url(Sources/temp\ 2.png);
        background-size: cover;
        background-color: rgb(27, 0, 35);
}

h1{
    font-size: 72px;
    margin: 0 auto;
}

.MandyIdema{
    font-size: 100px;
    font-family:'Courier New', Courier, monospace;
    text-align:center;
    color:#FFFFFF;
    border-color: transparent;
    margin: 0 auto;
    background-color: transparent;
    text-shadow: 0px 0px 8px rgba(137, 43, 226, 0.623);
}


.button-programmer, .button-3D-Artist, .button-Vocalist{
    display:inline-block;
    padding:0.35em 1.2em;
    border:0.1em solid #FFFFFF;
    margin:1.7%;
    border-radius:12px;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    font-size: 28px;
    color:#FFFFFF;
    text-align:center;
    transition: all 0.2s;
    background-color: transparent;
    transition-duration: 0.4s;
    text-shadow: 0px 0px 8px rgba(137, 43, 226, 0.466);
    box-shadow: 0px 0px 8px rgba(137, 43, 226, 0.466);

    animation:button 5s infinite linear;
    position:relative;
    cursor:pointer;

}

@keyframes button {
    0%{top:0em}
    40%{top:0em}
    43%{top:-0.9em}
    46%{top:0em}
    48%{top:-0.4em}
    50%{top:0em}
    100%{top:0em;}
    }

.button-programmer:hover, .button-3D-Artist:hover, .button-Vocalist:hover{
    color:#ffffff;
    border: blue;
    background-color:blueviolet;
    box-shadow: 0 5px 15px blueviolet;
}


@media all and (max-width:30em){
    .button-programmer{
    display:block;
    margin:0.4em auto;
    }
}

.slider-container {
  font-family: 'Poppins', sans-serif;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.button-left-container{
    font-family: 'Poppins', sans-serif;
    text-align: center;
    position: fixed;
    top: 93%;
    left: 2%;
    color: white;
}

.button-free-code{
    display:inline-block;
    padding:0.35em 1.2em;
    border:0.1em solid #FFFFFF;
    margin:1.7%;
    border-radius:12px;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    font-size: 16px;
    width: 100%;
    color:#FFFFFF;
    text-align:center;
    transition: all 0.2s;
    background-color: transparent;
    transition-duration: 0.4s;
    text-shadow: 0px 0px 8px rgba(137, 43, 226, 0.466);
    box-shadow: 0px 0px 8px rgba(137, 43, 226, 0.466);

    position:relative;
    cursor:pointer;
}

body {
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
 
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

.slider {

    max-height: 1080px;
    max-width: 1920px;
    position: fixed;
    display: block;
    
}


.video-wrapper video{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%; 
    overflow: hidden;
    object-fit: cover
}

.video-wrapper {
 

     /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  }

.slider img{
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.fa {
    padding: 35px;
    font-size: 40px;
    width: 20px;
    text-align: center;
    text-decoration: none;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px rgba(39, 19, 30, 0.582);

  }

  
  /* Add a hover effect if you want */
  .fa:hover {
    opacity: 0.7;
  }