@font-face {
    font-family: HelloHandMeDown;
    src: url(font/HelloHandMeDown.ttf);
}

body {
        background-color:#160500;
}

#cvLinkMobile {
        text-align: center;
    }

#cvLinkMobile a {
        color:#ffff99;
    }
.headerMobile {
        text-align:center;
        font-size: 200%;
        color:#cca300;
    }

#EmailLink {
    color : #fff;
    
}

#EmailLink:hover {
    color:#ccc;
}



/*index.html*/

.indexDesktop {
    display : none;
}

.indexMobile {
    display: flex;
    flex-direction: column;

}

.indexHeaderDivMobile {
    display:flex;
    flex-direction: row;
}

.personal_infoMobile {
    color : #fff;
    padding: 5%;
    padding-top: 15%;
    margin-right: 3vw;
    margin-left:3vw;
    width : 60vw;
    font-family:  HelloHandMeDown;
    font-size : 2.7vw;
    display : flex;
    flex-direction: column;
    background-color : #444;
    border-radius: 20%;


}

.personal_infoMobile>div{
    margin-top:20%;
}




.personal_infoMobile a {
    color : #32cd32;
}



#ImageBackGroundMobile {
    border-radius: 20%;
    background-color: #327a32;
    margin-left : 3vw;
    text-align:center;
    width : 60vw;
}

#ImageBackGroundMobile img{
    border-radius: 20%;
    margin-top: 5%;
    margin-bottom: 5%;
    width : 80%;
    object-fit: contain;
}

.indexMainBarMobile {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
}

.indexMainBarMobile a {
    display: inline-grid;
    color: #ffffff;
    padding: 1vh 1vw;
    width:45vw;
    height:10vh;
    text-decoration: none;
    background-color: #a41034;
    font-family:  HelloHandMeDown;
    font-size : 4vw;
    border-left:2px solid white;
}
.indexMainBarMobile a:hover {
    background-color: #d41034;
}

.indexMainBarContainerMobile {
    display:flex;
    display:row;

}
.dropdownMobile {
    display:flex;
    flex-direction: row;
}

.dropdown-contentMobile {
    display : none;
}

.dropdown-contentMobile a {
        display:block;
        position:center;
}


/*Music.html*/
/* for phones vertical position */
.container {
    display: none;
}
.containerMobile {
    display:flex;
    flex-direction:column;
    width:100%;
}
.containerPhotoMobile {
    display:flex;
    flex-direction:row;
    height:40vw;
}

.containerPhotoMobile img {
    width:50%;
    object-fit: contain;
    margin-left: 2%
}

.containerTextMobile {
    display:flex;
    flex-direction: column;
    padding : 5%;
    font-family: HelloHandMeDown;
    
}

.containerTextMobile p {
    display:block;
    color : #ccc;
    overflow: auto;
    font-family:HelloHandMeDown;
    font-size:4vw;
    width : 100%;

}

.youtubeChannelMobile {
    display: inline-grid;
    color: #ffffff;
    padding: 5%;
    text-align:center;
    text-decoration: none;
    background-color: #a41034;
    font-family:  HelloHandMeDown;
    font-size : 4vw;

}

.youtubeChannelMobile:hover {
    background-color: #d41034;
}


/* for desktops and tablets */
@media only screen and (min-width: 480px){
    .headerDesktop {
        text-align:center;
        font-size: 200%;
        color:#cca300;
    }
    .containerMobile {
        display:none;
    }
    .container {
        display: flex;
        flex-direction: row;
        width : 100%;
    }

    .containerPhoto {
        display : flex ;
        flex-direction: column ;
        background-color: #160500;
        padding : 0 2% 10% 2%;
        flex-grow:3;
    }

    .containerPhoto img {
        width : 100%;
        max-height: auto;
        margin-top: 5%;
        object-fit: contain;


    }

    .containerText {
        color : #ccc;
        padding: 5%;
        font-family: HelloHandMeDown;
        font-size:1.25vw;

    }

    .youtubeChannel {
        color: #ffffff;
        padding: 0.5vw 1vw;
        text-decoration: none;
        background-color: #a41034;
        font-family:  HelloHandMeDown;
        font-size : 2.5vw;

    }

    .youtubeChannel:hover {
        background-color: #d41034;
    }
    



    /*index.html*/

    #cvLinkDesktop {
        text-align: center;
    }

    #cvLinkDesktop a {
        color:#ffff99;
    }

    .indexMobile {
        display : none;
    }
    .indexDesktop {
        display : flex;
        flex-direction: column;
    }
    .indexImageDivHeaderDesktop {
        text-align:center;
        height : 19vw;
        background-color:#327a32;
        width : 16vw;
        margin : 0 auto;
        border-radius : 20%;
    }

    .indexImageDivHeaderDesktop img {
        margin : 5% 0 5% 0;
        height : 17vw;
        border-radius : 20% ;
    }
    .indexPersonalInfoDesktop {
        display: flex-inline;
        text-align:center;
        font-family: HelloHandMeDown;
        font-size: 1.7vw;
        color:#fff;
        background-color: #323232;
        border-radius: 70%;
        margin:1vw;
    }
    .indexPersonalInfoDesktop div {
        text-align :left;
        width : 25vw;
        margin : 0 auto;
    }
    .indexPersonalInfoDesktop div a{
        color : #32bb32;
    }
    .indexMainBarContainerDesktop {
        display:flex;
        flex-direction:row;
        text-align:center;
    }
    .indexMainBarContainerDesktop > div {
        display:flex;
        flex-direction: row;
        margin : 0 auto;
    }
    .indexMainBarContainerDesktop > div > div {
        display:flex;
        flex-direction: column;
    }
    .indexMainBarContainerDesktop div > div a {
        color: #ffffff;
        padding: 0.5vw 1vw;
        text-decoration: none;
        background-color: #a41034;
        font-family:  HelloHandMeDown;
        font-size : 2.5vw;
    }


    .indexMainBarContainerDesktop div > div a:hover {
        background-color: #d41034;
    }
    /* .indexMainBarContainerDesktop div div div ---- does not work */
    .indexMainBarContainerDesktopDropDown {
        display:none;
        overflow:hidden;
    }
    
}



/* for drop down content to be visible. this line has to be at the end */
.show {
    display:block;
}
.showFlex {
    display:flex;
    flex-direction: column;
}