.mediaViewInfo {
    --web-view-name: muziek;
    --web-view-id: muziek;
    --web-scale-to-fit: true;
    --web-scale-to-fit-type: fit;
    --web-scale-on-resize: true;
    --web-enable-deep-linking: true;
    --web-page-font: "Roboto Mono", monospace;
}
:root {
    --web-view-ids: muziek;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
}

body{
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;
}

body.open {
    background-color: rgba(72, 180, 72, 0.747);
	transition: background-color 1s;
}

#hfmuziek {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: "Roboto Mono" ,monospace;
    background-color: white;
    overflow: hidden;
    --web-view-name: hfmuziek;
    --web-view-id: hfmuziek;
    --web-scale-to-fit-type: fit;
    --web-scale-on-resize: true;
    --web-enable-deep-linking: true;
    --web-page-font: monospace;

}

.header {
  position: absolute;
  top: 0%;
  left: 0;
  right: 0;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  padding: 30px 50px;  
}


.menu-items {
    position: absolute;
    outline: none;
    box-shadow: none;
    list-style: none;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    transform: translateY(-20vw);
    transition: transform .2s ease-in-out;
    -webkit-tap-highlight-color: transparent;
}


.menu-items.open {
    transform: translateY(0);
}


.menu-items li a {
    text-decoration: none;
    color: #762ad4;
    font-size: 1rem;
    padding-top: 0.5em;
    padding-right:.5cm;
    transition: color 0.3s ease-in-out;
}

.menu-items li a:hover {
    color: white;
}

.insta_logo.open {
    display: none;
    transition: .2s;
}


.menubutton {
    -webkit-outline: none;
    outline: none;
    box-shadow: none;
    position: absolute;
    right: 10px;
    height: 80px;
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .5s ease-in-out;
    animation: plusjelr 2s;
    -webkit-tap-highlight-color: transparent;
 }



 .menubuttonburger {
     width: 30px;
     height: 3px;
     outline: none;
     margin: 0;
     background: black;
     border-radius: 2px;
     box-shadow: none;
     animation: plusjex 2s;
     transition: all .2s ease-in-out;
 }
 .menubuttonburger::before {
     content: '';
     position: absolute;
     width: 30px;
     outline: none;
     height: 3px;
     background: black;
     border-radius: 2px;
     box-shadow: none;
     transition: all .5s ease-in-out;
     animation: plusjerot 1s reverse;
     animation-delay: .2s;
 }

    .menubuttonburger::before {
     transform: rotate(90deg);
    }
    /* ANIMATION */
    .menubutton.open .menubuttonburger {
     transform: rotate(-45deg);
 }
    
 @keyframes bintro {
	from {transform: rotate(45deg);}
	to {transform: rotate(0deg);}
}

@keyframes insta {
    from {opacity: 0;}
    to {opacity: 1;}
}