html {
  font-size: 14px;
}



.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    color: white;
    background-image: url("../images/barbies2_lowres.jpg"
        );
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100%;
    background-color: black;
    /*font-family: Comic Sans MS, Comic Sans, cursive;*/
    /*font-family: 'Foldit', cursive;*/
    font-family: 'Orbitron', sans-serif;
    /*font-family: Arial;*/
    margin-top: 0px;
    background-position-y: 30vh;
}

header {
    position: sticky;
    background-color: black;

}
.testfixed {
    position: fixed;
    top: 30vh;
    left: 20%;
    width: 60%; /* Set the width of your container */
    height: 60vh; /* Set the height of your container */
    overflow: auto; /* Add scrollbars if content overflows the container */
    padding-top: 5%;
}



h1, h2, h3 {
    display: block;
   
    font-size: 1.5em;
}
li {
    font-size: 1.2em;
    padding-bottom: 0.7em;
}
.title {
    font-family: 'Orbitron', sans-serif;
}
.movies-flex-container {
    display: flex;
   flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    
  
    
}
.movies {
 width: 700px;
  max-width: 100%;
}
.formulier{
    display :flex;
    justify-content:center;
}
label, input[type=submit]{
    display: block;
}
.video{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

input {
    margin-bottom: 10px;
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
    color: grey;
    
}
li>a {
    /*color: #518bc9;*/
    color: white;
    background-color: black;
}
a:hover {
    color: white;
}
/* Dropdown Button */
.dropbtn {
    /*background-color: #3498DB;*/
    background-image: linear-gradient(#43a348, #398071, #518bc9, #518bc9, #c91e99);
    border-radius: 0 16px 16px 0;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    aspect-ratio: 1;
    display: block;
}

    /* Dropdown button on hover & focus */
    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
    }

/* The container <div> - needed to position the dropdown content */
.dropdown, header{
    /* position: fixed; */
    top: 0;
    left: 0;
    z-index: 1;
    /* display: inline-block; */
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #ddd;
            font-size: 120%;
        }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}
#menubutton {
    width: 25px;
    display: block;
}


svg {
    display: block;
    font: 12em 'Arial';
    /*width: 1400px;
    height: 300px;*/
    margin: 0 auto;
    /*background-color:black;*/
}



.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 2px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

    .text-copy:nth-child(1) {
        stroke: #43a348;
        animation-delay: -1s;
        /*text-shadow:  0 0 10px #43a348, 0 0 40px #43a348;*/
    }

    .text-copy:nth-child(2) {
        stroke: #398071;
        animation-delay: -2s;
       /* text-shadow:  0 0 80px #398071;*/
        
    }

    .text-copy:nth-child(3) {
        stroke: #518bc9;
        animation-delay: -3s;
       /* text-shadow:  0 0 80px #518bc9;*/
    }

    .text-copy:nth-child(4) {
        stroke: #216fc2;
        animation-delay: -4s;
        /*text-shadow:  0 0 80px #216fc2;*/
    }

    .text-copy:nth-child(5) {
        stroke: #c91e99;
        animation-delay: -5s;
        /*text-shadow: 0 0 80px #c91e99;*/
    }

@keyframes stroke-offset {
    100% {
        stroke-dashoffset: -35%;
    }
}

/* Validation forms styles*/

.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}
 /* css for bootstrap elements*/
.btn {
    margin-bottom: 1em;
}


@media only screen and (max-width: 600px) {
    svg {
        display: block;
        font: 12em 'Arial'; */
        /* width: 460px; */
        /* height: 100px; */
        margin: 0 auto;
    }

    .text-copy {
        stroke-width: 4px;
    }

    #menubutton {
        width: 10px;
        display: block;
    }

    .dropbtn {
        padding: 6px;
    }

    body {
        background-size: 120% 60%;
    }
    /* Styles for mobile devices */
}

@media (orientation: portrait){
    .testfixed {
        position: fixed;
        top: 30vw;
        left: 20%;
        width: 60%; /* Set the width of your container */
        height: 60vh; /* Set the height of your container */
        overflow: auto; /* Add scrollbars if content overflows the container */
        padding-top: 5%;
    }
    body {
      
        background-position-y: 30vw;
    }

}