body{
    /*background-image: url(../IMG/wp1.png); */
   /* background-image: linear-gradient(to right, rgb(151, 255, 142), rgb(181, 255, 175));*/
    background-color: hsl(115, 100%, 78%);
    
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: rgb(65, 50, 50);
}
#musicHdr{
    text-decoration:underline;
    margin: auto;
    margin-top: 10pt;
}

h4{
    color: grey;
    margin: auto;
}



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

#responseMeth{
    display: flex;
    flex-direction: column;
}

#conInfo{
    margin: auto;
}

#pageWrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

#headerWrapper{
    display: flex;
    justify-content: left;
    margin-top: 8%;
    margin-bottom: 5%;
    margin-left: 5%;
    margin-right: 5%;

}
#navWrapper{
    display: flex;
    flex-direction: column;
    background-image: url(../IMG/bg2.png);
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 0 20px rgb(7, 99, 39);

    padding-right: 10pt;
    padding-left: 10pt;
}

#contactDiv{
    display: flex;
    flex-direction: column;
    font-family:'Courier New', Courier, monospace;
    
}

#contentWrapper{
    display: flex;
    justify-content: center;
    text-align: center;

    background-image: url(../IMG/bg2.png);

    
    border-radius: 20px;
    box-shadow: 0 0 20px rgb(7, 99, 39);
    margin-top: 2%;
    margin-right: 5%;

    max-width: 100%;
    height: 500pt;
    overflow: hidden;
}

#contentWrapperPost{
    display: flex;
    flex-direction: column;
    
    background-image: url(../IMG/bg2.png);

    
    border-radius: 20px;
    box-shadow: 0 0 20px rgb(7, 99, 39);
    margin-top: 2%;
    margin-right: 5%;

    min-width: 700pt;
    max-width: 100%;
    height: 500pt;
    overflow: hidden;
}

#mainContent{
    display: flex;
    flex-direction: column;
justify-content:center ;

    align-items: center;

    background-size: cover;
    background-repeat: no-repeat;

    padding-left: 30pt;
    padding-right: 30pt;
}

#mainContentScroll{
    display: flex;
    flex-direction: column;

    align-items: center;

    background-size: cover;
    background-repeat: no-repeat;
    
    

    padding-left: 30pt;
    padding-right: 30pt;
}

#mainContent img {
    max-width: 100%;
    height: auto;
}

#contentDescr{
    display: flex;
    flex-direction: column;
    padding-left: 5px;
    padding-right: 15px;
    margin-top: 5px;
    
    max-width: 100%;    
    margin: 0 auto;
    padding: 0 10px;

    border: solid 2px  rgb(65, 50, 50);
    border-radius: 20px;
    
    background-image: url(../IMG/bg2.png);
    max-height: none;
}


#contentHeader{
    display: flex;
    flex-direction: column;

}

#music{
    max-width: 100%;
}

#selfIMG{
    max-width: 61%;
}

.content {
    max-width: 700px;
    max-height: 550px;
    object-fit: fill;

    border: 8px double rgb(65, 50, 50);

    border-radius: 32px;
}

.contentScroll {
    max-width: 400px;
    max-height: 550px;
    object-fit: fill;

    margin-top: 10pt;

    border: 8px double rgb(65, 50, 50);
    border-radius: 32px;
}

.audioPlr{
    display: flex;
}

.buttons{

    margin-bottom: 5px;
    color: black;
    background-color: transparent;
    border: 1px solid rgb(65, 50, 50);
    background-color: rgb(234, 234, 234);
    border-radius: 4px;
    padding: 0 16px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    font-family:'Courier New', Courier, monospace;
    margin: 5px;
    padding: 10px;
}



.buttons:hover{
    transform: scale(1.05);
}

#spotlink{
    display: flex;
    justify-content: center;
    background-color: rgba(30, 215, 96);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#aboutMe{
    display: flex;
    flex-direction: column;
}

.abtHeader{
    display: flex;
    justify-content: flex-start;
    padding-left: 10pt;
    margin: auto;
}

.abtText{
    padding-left: 10pt;
    padding-right: 10pt;
    border-radius: 10px;
    padding-top: 5pt;
    padding-bottom: 5pt;

    margin-left: 5px;
    margin-right: 5px;

    border: solid 2px  rgb(65, 50, 50);
    background-color: #EADEDA;
}

.abtText2{
    display: flex;
    justify-content: center;
    padding-left: 10pt;
    padding-right: 10pt;
    border-radius: 10px;
    padding-top: 5pt;
    padding-bottom: 5pt;

    margin-left: 5px;
    margin-right: 5px;

    border: solid 2px  rgb(65, 50, 50);
    background-color: #EADEDA;
}


@media only screen and (max-width: 768px) {
    #pageWrapper {
        flex-direction: column;
    }

    #navWrapper {
        width: 100%; 
    }

    #contentWrapper {
        flex: 2;
        flex-direction: column;
    }

    #selfIMG{
        display: flex;
        justify-content: center;
    }

    #contentWrapperPost {
        flex-direction: row;


        min-width: 100%;
        flex: 2;
        flex-direction: column;

        background-color: black;
    }

    #spotlink{
        margin-bottom: 20px;
    }

    #mainContent{  
        display: flex;
        justify-content: center;

        padding-left: 0pt;
        padding-right: 0pt;
    }

    #forms2{
        display: flex;
        justify-content: center;
        margin-top: 10pt;
        max-width: 150pt;
        max-height: 100pt;
    }

    #contentDescr{
        margin-top: 10pt;
    }

    .contentScroll{
        max-width: 100%;
        max-height: 100pt;
    }


}

@media only screen and (min-width:769px) and (max-width: 1024px) {
    #pageWrapper {
        flex-direction: column;
    }

    #navWrapper {
        
        width: 100%; 
    }

    #contentWrapper {
        flex: 2;
        flex-direction: column;
    }

    #contentWrapperPost {
        flex: 2;
        flex-direction: column;
    }
    #spotlink{
        margin-bottom: 20px;
    }

    #mainContent{
        padding-left: 80pt;
        padding-top: 10pt;
        padding-bottom: 10pt;
    }

    .contentScroll{
        max-width: 100%;
    }
}

@media only screen and (min-width:1300px) {
    #pageWrapper{
        justify-content: center;
    }
}