* {
                                            box-sizing: border-box;
                                        }
                                        
                                        .html {
                                            overflow: hidden;
                                        }
                                        
                                        body {
                                            margin: 0%;
                                            padding: 0;
                                            min-height: 100%;
                                            height: fit-content;
                                            overflow: scroll;
                                            background-color: white;
                                        }
                                        
                                        header {
                                            background-color: #111111;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                            overflow: auto;
                                            position: -webkit-sticky;
                                            /* for Safari */
                                            position: sticky;
                                            top: 0;
                                            z-index: 1;
                                        }
                                        
                                        .hover-underline {
    font-size: 2rem;
    color: #ffffff;
    position: relative;
    display: inline-block;
    margin: 15px 10px;
    padding: 5px 0;
  }
  
  .hover-underline::after,
  .hover-underline::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #ffffff, #a0a0a0);
    bottom: -5px;
    left: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
  }
  
  .hover-underline::before {
    top: -5px;
    transform-origin: left;
  }
  
  .hover-underline:hover::after,
  .hover-underline:hover::before {
    transform: scaleX(1);
  }

  #ayy {
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
}
                                        /* Header Logo Fotos */
                                        
                                        .headertext {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 20px;
    padding: 0;
    font-size: 28px;
    color: #ffffff;
    letter-spacing: 20px;
}
                                        
                                        .headerbar {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 10px;
}

.headerbar li {
    height: 30px;
}

.headerbar li:first-child {
    margin-right: auto;
}

.headerbar a {
    text-decoration: none;
    width: 100%;
    height: 100%;
    padding: 0 30px;
    display: flex;
    align-items: center;
    color: white;
}
                                        
                                        .socials {
                                            width: 38px;
                                            height: 38px;
                                            transition: transform .5s;
                                        }
                                        
                                        .socials:hover {
                                            transform: rotate(12deg);
                                        }
                                        
                                        .sidebar {
                                            position: fixed;
                                            top: 0;
                                            right: 0;
                                            height: 100%;
                                            width: 0%;
                                            z-index: 999;
                                            background-color: rgba(0, 0, 0, 0.9);
                                            backdrop-filter: blur(10px);
                                            box-shadow: -8px 0 8px rgba(10, 10, 10, 0.2);
                                            display: none;
                                            flex-direction: column;
                                            align-items: center;
                                            margin-top: 0;
                                            padding-top: 5%;
                                            /*animation-name: Slide-right;
                                            animation-duration: 1s;*/
                                        }
                                        
                                        #smallicons {
    width: 40px;
    height: 40px;
    margin-right: 13%;
}
                                        
                                        @keyframes Slide-right {
                                            from {
                                                width: 0%;
                                            }
                                            to {
                                                width: 100%;
                                            }
                                        }
                                        
                                        @keyframes Slide-right-OUT {
                                            from {
                                                width: 100%;
                                            }
                                            to {
                                                width: 0%;
                                            }
                                        }
                                        
                                        .sidebar li {
                                            width: 100%;
                                            padding: 10%;
                                            display: flex;
                                            align-items: center;
                                            font-size: 30px;
                                            font-weight: bold;
                                        }
                                        
                                        .sidebar a {
                                            width: 100%;
                                            color: rgb(238, 238, 238);
                                            text-decoration: none;
                                        }
                                        
                                        .sidebar a:hover {
                                            background-color: #f0f0f0;
                                        }
                                        
                                        .sidebar li:first-child {
                                            padding-top: 20%;
                                        }
                                        
                                        .Menu {
                                            display: none;
                                        }
                                        
                                        #menulist:visited, #menulist:active, #menulist:focus, #menulist:hover {
    background-color: #0e0e0e;

}
                                        
                                        /* Der erste Teil des Bodys */
                                        
                                        .Title {
                                            background-image: url("Davidtran3-1.jpg");
                                            opacity: 1;
                                            background-color: black;
                                            background-repeat: no-repeat;
                                            background-size: cover;
                                            background-position: top;
                                            margin-top: 0%;
                                            box-sizing: border-box;
                                            padding: 1%;
                                        }
                                        
                                        h1 {
                                            text-align: center;
                                            font-size: 6vw;
                                            padding-top: 100px;
                                            padding-bottom: 70px;
                                            margin: 0%;
                                            color: transparent;
                                            text-shadow: 3px 2px 2px rgb(255, 255, 255);
                                            letter-spacing: 20px;
                                            text-transform: uppercase;
                                            margin: 10px 0 24px;
                                            text-align: center;
                                        }
                                        
                                        .h1:hover {
                                            transition: 0.5 ease;
                                            text-shadow: red;
                                        }
                                        
                                        .Texttype1 {
                                            text-align: center;
                                            font-size: 1.2vw;
                                            margin-right: 290px;
                                            margin-left: 290px;
                                            margin-bottom: 95px;
                                            letter-spacing: 1px;
                                            line-height: 140%;
                                            font-family: Georgia, 'Times New Roman', Times, serif;
                                            color: whitesmoke;
                                            text-shadow: 3px 1px 6px #000;
                                        }
                                        /* VIDEOS wie Nightmare und text und blabla */
                                        
                                        .SongsBOX {
                                            position: relative;
                                            display: block;
                                            height: fit-content;
                                            background-color: white;
                                            margin-bottom: 0%;
                                        }
                                        
                                        #ytbox {
                                            box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
                                        }
                                        
                                        .hovereffectimg,
                                        .instagrambox1,
                                        .instagrambox2 {
                                            transition: 0.5s ease;
                                        }
                                        
                                        .hovereffectimg:hover {
                                            z-index: 1;
                                            transform: scale(1.02);
                                            box-shadow: 0 25px 80px rgba(0, 0, 0, .6);
                                        }
                                        
                                        .instagrambox1:hover,
                                        .instagrambox2:hover {
                                            transform: scale(1.02);
                                            box-shadow: 0 25px 80px rgba(0, 0, 0, .3);
                                        }
                                        /*NIGHTMARE*/
                                        
                                        .s1,
                                        .s2,
                                        .s3 {
                                            width: auto;
                                            height: auto;
                                            display: block;
                                            margin: 9% 0%;
                                        }
                                        
                                        #ytvideo {
                                            aspect-ratio: 16/9;
                                            width: 100%;
                                            height: 100%;
                                            box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
                                        }
                                        
                                        .Nightmarebox {
                                            display: inline-block;
                                            position: relative;
                                            left: -30%;
                                            aspect-ratio: 16/9;
                                            width: 50%;
                                        }
                                        
                                        .Nightmaretext {
                                            vertical-align: top;
                                            display: inline-block;
                                            position: relative;
                                            left: 62%;
                                            right: 6%;
                                            width: 35%;
                                            height: 82%;
                                            font-family: Georgia, 'Times New Roman', Times, serif;
                                        }
                                        /* Stuck in The Paradise */
                                        
                                        .SITPbox {
                                            display: inline-block;
                                            position: relative;
                                            margin: auto;
                                            left: 10%;
                                            aspect-ratio: 16/9;
                                            width: 50%;
                                        }
                                        
                                        .SITPtext {
                                            vertical-align: top;
                                            display: inline-block;
                                            position: relative;
                                            width: 35%;
                                            left: 3%;
                                            height: 82%;
                                            font-family: Georgia, 'Times New Roman', Times, serif;
                                        }
                                        /*Daydream*/
                                        
                                        .Daydreambox {
                                            display: inline-block;
                                            position: relative;
                                            top: 0%;
                                            left: -30%;
                                            aspect-ratio: 16/9;
                                            width: 50%;
                                        }
                                        
                                        .Daydreamtext {
                                            vertical-align: top;
                                            display: inline-block;
                                            position: relative;
                                            left: 62%;
                                            right: 6%;
                                            width: 35%;
                                            height: 82%;
                                            font-family: Georgia, 'Times New Roman', Times, serif;
                                        }
                                        
                                        .spotifycontainer {
                                            width: 50%;
                                            margin: auto;
                                        }
                                        
                                        h2 {
                                            text-align: right;
                                            margin: 0;
                                            font-size: 4vw;
                                        }
                                        
                                        h3 {
                                            text-align: left;
                                            font-size: 4vw;
                                            margin: 0;
                                        }
                                        
                                        .Texttype2 {
                                            text-align: right;
                                            font-size: 1.2vw;
                                            padding: 10px 20px;
                                            line-height: 140%;
                                        }
                                        
                                        .Texttype3 {
                                            text-align: left;
                                            font-size: 1.2vw;
                                            padding: 10px 20px;
                                            line-height: 140%;
                                        }
                                        /*****************************************************************************ANIMATION********************************************************************/
                                        
                                        #ay {
                                            color: black;
                                            text-transform: uppercase;
                                            text-decoration: none;
                                            position: relative;
                                        }
                                        
                                        #ay:after {
                                            background: none repeat scroll 0 0 transparent;
                                            bottom: 0;
                                            content: "";
                                            display: block;
                                            height: 2px;
                                            left: 50%;
                                            position: absolute;
                                            background: black;
                                            transition: width 0.3s ease 0s, left 0.3s ease 0s;
                                            width: 0;
                                        }
                                        
                                        #ay:hover::after {
                                            width: 100%;
                                            left: 0;
                                        }
                                        #a1 {
                                            color: #dbdbdb;
                                            text-decoration: none;
                                            
                                        }
                                        #a1:visited {
                                            color:#dbdbdb;
                                        }
                                        #a1:hover{
                                            color:#dbdbdb;
                                        }
                                        
                                        .a2 {
                                            display: block;
                                            font-size: 0px;
                                        }
                                        /*****************************************************************************ANIMATION********************************************************************/
                                        /****************************************************************************EXTRAS************************************************************************/
                                        
                                        .ExtrasBOXTOP {
                                            display: flex;
                                            background-repeat: no-repeat;
                                            background-size: contain;
                                            background-position: bottom;
                                            top: 0%;
                                            width: 100%;
                                            height: 170px;
                                            margin-bottom: -1px;
                                            background-image: url("Papertop3.png");
                                            margin-top: 0%;
                                        }
                                        
                                        .ExtrasBOXBOTTOM {
                                            display: flex;
                                            background-repeat: no-repeat;
                                            background-size: contain;
                                            background-position: top;
                                            top: 0%;
                                            width: 100%;
                                            height: 170px;
                                            margin-bottom: -1px;
                                            background-image: url("Paperbottom.png");
                                            margin-top: 0%;
                                        }
                                        
                                        .ExtrasBOX {
                                            display: flex;
                                            flex-direction: row;
                                            background-image: url("Paperbottom3.png");
                                            background-repeat: no-repeat;
                                            background-size: cover;
                                            background-position: top;
                                            width: 100%;
                                            height: auto;
                                            justify-content: space-around;
                                        }
                                        
                                        .instagramcontainer {
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            width: auto;
                                            height: auto;
                                            margin: auto;
                                        }
                                        
                                        .instagrambox1,
                                        .instagrambox2 {
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            height: fit-content;
                                            margin-bottom: 20%;
                                            box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
                                        }
                                        
                                        .instagrambox1 {
                                            margin-top: 20%
                                        }
                                        
                                        .spotifycontainer {
                                            display: flex;
                                            flex-direction: column;
                                            justify-content: center;
                                            align-items: center;
                                            width: 650px;
                                            margin-left: 0%;
                                            margin-right: 0%;
                                            padding: 5% 0%;
                                        }
                                        
                                        .SP {
                                            box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
                                        }
                                        
                                        .instagrammedia {
                                            width: 100%;
                                            height: 100%;
                                        }
                                        
                                        img {
                                            width: 100%;
                                            height: 100%;
                                        }
                                        
                                        #numerojeden {
                                            margin-bottom: -8%;
                                        }
                                        
                                        #numerodwa {
                                            margin-top: -8%;
                                        }
                                        /****************************************************************************EXTRAS************************************************************************/
                                        /***************************************************************************Other songs********************************************************************/
                                        
                                        .OTHERSONGS {
                                            background-color: red;
                                            display: flex;
                                            justify-content: center;
                                            align-items: center;
                                        }
                                        
                                        .OSbox1 {
                                            background-color: blue;
                                            display: flex;
                                            justify-content: center;
                                            flex-direction: row;
                                            height: 800px;
                                            width: 100%;
                                        }
                                        
                                        .OSbox2 {
                                            background-color: green;
                                            display: flex;
                                            flex-direction: column;
                                            gap: 2%;
                                            width: 100%;
                                            height: 100%
                                        }
                                        
                                        .OSbox3top {
                                            background-color: blue;
                                            width: 100%;
                                            height: 30%;
                                        }
                                        /****************************************************************************FOOTER************************************************************************/
                                        
                                        footer {
                                            background-color: black;
                                            height: 100px;
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            flex-direction:column;
                                            padding: 0%;
                                        }
                                        
                                        .footertext {
                                            color: whitesmoke;
                                            text-decoration: none;
                                            font-size: 15px;
                                            letter-spacing: 5px;
                                        }
                                        
                                        .footer2{
                                            margin-top: -1.5%;
                            display:flex;
                            align-items:center;
                            color: whitesmoke;
                            letter-spacing:2px;
                                        }
                                        /****************************************************************************FOOTER************************************************************************/
                                        /************************************************************CSS HOVER EFFECT TEST ******** https://youtu.be/CJ26NLtdzPA?si=Rw1OdrpVtDU9969-******************/
                                        /* Media quieres */
                                        
                                        @media only screen and (max-width: 1400px) {
                                            * {
                                                box-sizing: border-box;
                                            }
                                            /*Nightmare*/
                                            #ytvideo {
                                                width: 100%;
                                            }
                                            .s1 {
                                                margin-top: 3%;
                                            }
                                            .s2,
                                            .s3 {
                                                padding: 0;
                                                margin-top: 12%;
                                            }
                                            .Nightmarebox,
                                            .Daydreambox,
                                            .SITPbox {
                                                display: block;
                                                position: relative;
                                                margin-left: auto;
                                                margin-right: auto;
                                                margin-top: 5%;
                                                top: 0%;
                                                left: 0%;
                                                width: 60%;
                                            }
                                            .Nightmaretext,
                                            .Daydreamtext,
                                            .SITPtext {
                                                display: block;
                                                margin: auto;
                                                position: relative;
                                                top: 0%;
                                                left: 0%;
                                                right: 0%;
                                                margin-top: 7%;
                                                width: fit-content;
                                                height: fit-content;
                                            }
                                            h1 {
                                                font-size: 80px;
                                            }
                                            h2,
                                            h3 {
                                                text-align: center;
                                                font-size: 400%;
                                            }
                                            .Texttype1 {
                                                text-align: center;
                                                font-size: 20px;
                                                margin-right: 10%;
                                                margin-left: 10%;
                                                margin-bottom: 95px;
                                            }
                                            .Texttype2,
                                            .Texttype3 {
                                                text-align: center;
                                                font-size: 19px;
                                                padding: 10px 20px;
                                                margin-left: 5%;
                                                margin-right: 5%;
                                            }
                                            h2:hover:after,
                                            h3:hover::after {
                                                width: 0%;
                                                left: 0;
                                            }
                                            .ExtrasBOX {
                                                flex-direction: column;
                                            }
                                            .ExtrasBOX :nth-child(1) {
                                                order: 2
                                            }
                                            .ExtrasBOX :nth-child(2) {
                                                order: 1
                                            }
                                            .ExtrasBOX :nth-child(3) {
                                                order: 3
                                            }
                                            .instagramcontainer {
                                                align-items: center;
                                                flex-direction: row;
                                                justify-content: center;
                                                margin-left: 6%;
                                                margin-right: 6%;
                                                height: 100%;
                                                gap: 0%;
                                            }
                                            .instagrambox1,
                                            .instagrambox2 {
                                                height: 100%;
                                                width: 80%;
                                                margin: auto;
                                                margin-bottom: 6%;
                                            }
                                            .instagrambox1 {
                                                margin-top: 0%;
                                            }
                                            .spotifycontainer {
                                                margin: 6% auto;
                                                margin-bottom: 4%;
                                                width: 80%;
                                            }
                                            .ExtrasBOXTOP,
                                            .ExtrasBOXBOTTOM {
                                                height: 120px;
                                            }
                                            .test {
                                                width: 100%;
                                            }
                                        }
                                        
                                        @media only screen and (max-width: 850px) {
                                            .headerbar {
                                                padding: 10px;
                                            }
                                            .headertext {
                                                padding: 20px;
                                                padding-left: 25px;
                                                font-size: 25px;
                                                letter-spacing: 16px;
                                            }
                                            .headerbar a {
                                                padding: 0 20px;
                                            }
                                            .instagramcontainer {
                                                margin-left: 6%;
                                                margin-right: 6%;
                                                gap: 0%;
                                                height: 100%;
                                            }
                                            #ytbox {
                                                width: 80%;
                                            }
                                        }
                                        
                                        @media only screen and (max-width: 725px) {
                                            .headertext {
                                                letter-spacing: 14px;
                                            }
                                            .headerbar a {
                                                padding: 0 14px;
                                            }
                                            #numerodwa {
                                                margin-top: -20%;
                                            }
                                            .spotifycontainer {
                                                margin-bottom: 0%;
                                            }
                                        }
                                        
                                        @media only screen and (max-width: 500px) {
                                            .HIDE {
        display: none;
    }
    .Menu {
        display: flex;
    }
    .headerbar {
        margin-left: 4%;
    }
    .headertext {
        font-size: 15px;
        letter-spacing: 16px;
        padding-left: 4%;
        padding-right: 0%;
        display: flex;
    }
    
     .footertext {
        font-size: 12px;
    }
                                            .Title {
                                            background-image: url("Davidtran3.jpg");
                                      
                                        }
                                            h1 {
                                                font-size: 40px;
                                                padding-top: 40px;
                                                padding-bottom: 10px;
                                                letter-spacing: 2px;
                                            }
                                            h2,
                                            h3 {
                                                text-align: center;
                                                font-size: 40px;
                                                margin-bottom: 0;
                                                margin-top: 25px;
                                            }
                                            .Texttype1 {
                                                text-align: center;
                                                font-size: 15px;
                                                margin-right: 10%;
                                                margin-left: 10%;
                                                margin-bottom: 40px;
                                            }
                                            .Texttype2,
                                            .Texttype3 {
                                                text-align: center;
                                                font-size: 15px;
                                                padding: 10px 20px;
                                                line-height: 140%;
                                                margin-left: 5%;
                                                margin-right: 5%;
                                                margin-top: 0;
                                            }
                                            .Nightmarebox,
                                            .Daydreambox,
                                            .SITPbox {
                                                margin-left: auto;
                                                margin-right: auto;
                                                margin-top: 5%;
                                                width: 90%;
                                            }
                                            .s1 {
                                                margin-top: 13%;
                                            }
                                            .s2,
                                            .s3 {
                                                margin-top: 15%;
                                            }
                                            .hovereffectimg:hover {
                                                z-index: 1;
                                                transform: scale(1.02);
                                                box-shadow: 0 25px 80px rgba(0, 0, 0, .3);
                                            }
                                            .headerbar {
                                                margin-left: 4%;
                                            }
                                            .headertext {
                                                font-size: 15px;
                                                letter-spacing: 16px;
                                                padding-left: 4%;
                                                padding-right: 0%;
                                                display: flex;
                                            }
                                            .socials {
                                                align-items: center;
                                                justify-content: center;
                                                margin-bottom: 0%;
                                                margin-left: 20px;
                                            }
                                            #ay:after {
                                                background: white;
                                            }
                                            .ExtrasBOXTOP,
                                            .ExtrasBOXBOTTOM {
                                                height: 100px;
                                            }
                                            .spotifycontainer {
                                                margin: 16% auto;
                                                margin-bottom: 8%;
                                                width: 80%;
                                            }
                                            .SP {
                                                height: 450px;
                                            }
                                            .footer2{
                                            margin-top: -6%;
                           
                                        }
                                        }
                                        
                                        @media only screen and (max-width: 300px) {
                                            header {
                                                position: relative;
                                            }
                                            h2,
                                            h3 {
                                                font-size: 30px;
                                            }
                                            .s1 {
                                                margin-top: 22%;
                                            }
                                            .s2,
                                            .s3 {
                                                margin-top: 19%;
                                            }
                                        }