@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* { margin: 0px; padding: 0px; }
body {
    font-size: 82.5%;
    /* background-image: url("{% static 'test.jpg' %}"); */
}
div { 
    font-family: sans-serif; 
}
.left {
    justify-content: left; 
    text-align: center;
    padding-right: 20px;
}
.right { text-align: right;
    text-align: center;
    padding-left: 20px;
}
.menu {
    display: flex; 
    margin-bottom: 14px;
    background-color: black;
    box-shadow: 0px 10px 5px black;
    color: white;
    padding: 0px 25px 0px 25px;
}
.menuitem {
    font-size: 2.4rem;
    line-height: 3.6rem;
}

.menuitem a {
    text-decoration: none;
    color: white;
    text-shadow: 1px 1px 2px black;
}
.menuitem a:hover {
    text-decoration: underline;
}
.box1 .submenu {
    display: none;
}
.mobilemenu { display: none;}

.submenu ul { list-style-type: none;}
.submenu li {
    margin: 4px 10px;
}
.submenu a { color: black;}
.logo_header {
    flex-grow: 1; text-align: center; font-size: 3.6rem;
}

.footer-wrapper {

  position: fixed;
  left: 50%;
  bottom: 0px;
  transform: translate(-50%);
  margin: 0 auto;
  background-color: white;
  border: 1px black solid;
  border-bottom-width: 0px;
  padding: 5px;
  border-radius: 15px 15px 0px 0px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}
.content {
    position: absolute;
    width: 75%;
    font-size: 1.4rem;
    margin: 0px auto;
    padding-bottom: 200px;
}
.content h2 {
    font-size: 2.6rem;
    padding-bottom: 20px;
}
.content p, .content li {
    margin-bottom: 30px;
}
.content-wrapper {
    display: flex;
    justify-content: center;
}
.content ul {
    margin-left: 20px;
}

.song {
    display: flex;
    flex-direction: column; 
    margin-bottom: 20px;
    margin-right: 20px;
}
.song-wrapper {
    display: flex; 
    justify-content: center;
    margin: 30px;
}
.song-description {
    font-size: 1.6rem;
}
h1.songbook {font-family: sans-serif; text-align: center; font-size: 2.4rem;}
.song-content {
    padding-bottom: 150px;
}
@media (max-width: 1466px) { /*  and (max-width: 1920px)  */
    .song-wrapper { flex-direction: column; display: flex;}
    .logo_header { font-size: 1.6rem; height: 60px; margin-left: 50px; }
    .menubar {
        height: 7px;
        width: 46px;
        background-color: white;
        border-radius: 10px;
        margin: 7px;
        transition: 0.7s;
    }

    .box:hover>.menubar1 {
        transform: translate(0, 14px) rotate(90deg);
        background-color: white;
    }

    .box:hover>.menubar2 {
        opacity: 0;
        background-color: white;
    }

    .box:hover>.menubar3 {
        transform: translate(0, -14px) rotate(-90deg);
        background-color: white;
    }

    .box {
        display: block;
        height: 60px;
        width: 60px;
        border: 2px solid white;
        border-radius: 20px;
        padding-top: 5px;
        box-shadow: rgba(74, 62, 62, 0.45) 0px 7px 19px;
        margin: 4px 0px 0px 4px;

    }
    .box:hover {
        border-bottom: 0px;
        border-radius: 20px 20px 0px 0px;
        margin-bottom: 2px;
    }
    .submenu {
        border-radius: 0px 20px 20px 20px;
        padding-left: 10px;
        background-color: white;
        z-index: 999;
    }
    .box1 {
        display: flex;
        align-items: left;
        justify-content: center;
        flex-direction: column;
        font-family: 'Poppins', sans-serif;
        position: absolute;
    }
    .box1 .submenu {
        display: none;
        background-color: white;
        border: 1px black solid;
    }
    .box1:hover {
        border-radius: 20px 20px 0px 0px;
    }
    .box1:hover .submenu, .box1:active .submenu {
        display: block;
    }
    .dropdown {
        position: relative;
        margin-bottom: 1px;
        background-color: white;
    }
    .mainmenu { display: none; }
    .mobilemenu { 
        display: block; 
        color: black;
        background-color: white;
        z-index: 999;
    }
}