/*Add Global Variables here to make code easier to read*/
:root {
    /*Colors*/
    --mikuBlue: rgb(15, 211, 211);
    --clearWhite: rgba(229, 243, 243, 0.925);
    /*Fonts*/
    --ppdMegaFont: 'DFPOPMix-W5-WIN-RKSJ-H-01.ttf';
    /*Custom Blocks*/
    --custom-block-font-size: 16px;
    --custom-block-info-color: rgba(54, 54, 54, 0.685);
    --custom-block-continue-color: rgba(110, 111, 218, 0.685);
    --custom-block-warning-color: rgba(255, 233, 39, 0.685);
    --custom-block-danger-color: rgba(255, 0, 0, 0.685);
    
}

/*Classes*/

.headerBar{
    background-image: url('images/HeaderBar.png');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 120%;
    padding-left: 2%;
    margin-left: 1%;
    margin-top: 1%;
    font-size: 285%;
}

.horizontalCenterBarButtons{
    width: 100%; 
    margin-bottom: 43%; 
    z-index: 999; 
    position: relative;
}

.tableOfContentsBlocks{
    width:100%;
}

.custom-blocks{
    margin-top: 16px;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 24px;
    font-size: var(--custom-block-font-size);
    text-shadow: 0px 0px 0px transparent;
    width: 70%;

}

.custom-blocks.info{
    border: 2px solid transparent;
    color: white;
    background-color: var(--custom-block-info-color)
}

.custom-blocks.continue{
    border: 2px solid transparent;
    color: white;
    background-color: var(--custom-block-continue-color)
}

.custom-blocks.warning{
    border: 2px solid transparent;
    color: white;
    font-weight:bold;
    background-color: var(--custom-block-warning-color)
}

.custom-blocks.danger{
    border: 2px solid transparent;
    color: white;
    background-color: var(--custom-block-danger-color)
}

.custom-songSection{
    margin-left: 11%;
}

/*Page elements*/

a{
    color:rgb(255, 255, 255);
}

a:visited {
    color: rgb(33, 252, 186);
}

#topPortion{
    position: relative;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

#ppdBanner{
    width: 30%;
    height: auto;
    position: relative;
    left: 21%;
}

#ppdLogo{
    position: absolute;
    bottom: 1%;
    left: 15%;
    width: 15%;

}

#horizontalCenterBar{
    background-image: linear-gradient(var(--mikuBlue),var(--clearWhite) , var(--mikuBlue));
    box-shadow: 0px 4px 8px 3px rgb(9, 126, 126);
    outline-style: ridge;
    outline-color:rgb(145, 145, 145);
    outline-width: thick;
    width: 70%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    place-self: center;
    z-index: 2;
    position: relative;
}


body{
    max-width: 100%;
    background-color: #262222;
    background-image: url("images/repeating-background.png");
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 4px #26d3d3;
    font-family: var(--ppdMegaFont);
}

#tableOfContents{
  width: 20%;
  outline-style: ridge;
  outline-color: rgb(255, 255, 255);
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 1%;
  float: left;
  background-image: url('images/footer-background.jpg');
  background-size: cover;
  box-shadow: 5px 5px 5px rgb(1, 141, 146);
}

#mainInformation{
  outline-style: ridge;
  outline-color: linear-gradient(90deg,rgb(255, 255, 255) 0%, rgb(23, 193, 245) 50%, rgb(255, 255, 255) 100%);
  width: 77%;
  float: left;
  margin-top: 1%;
  margin-right: 1%;
  margin-bottom: 1%;
  background: linear-gradient(90deg,rgba(0, 41, 74, 1) 0%, rgba(47, 101, 117, 1) 50%, rgba(7, 32, 56, 1) 100%);
  box-shadow: 5px 5px 5px rgb(1, 141, 146);
}

#Title{
    color: white;
    text-align: left;
}

#belowHorizontalCenterBar{
    text-align: left;
    color: white;
    background: url('images/body-background.jpg');
    width: 70%;
    place-self: center;
    outline-style: ridge;
    outline-color:rgb(145, 145, 145);
    outline-width: thick;

    overflow: hidden;
    /*display: flex;
    align-items: left;*/

}

footer{
    background-color: rgb(21, 27, 44);
    width: 70%;
    justify-content: space-around;
    align-items: center;
    place-self: center;
    outline-style: ridge;
    outline-color:rgb(8, 8, 8);
    box-shadow: 0px 4px 8px 3px rgb(9, 126, 126);
    background-image: url('images/footer-background.jpg');
    background-size: cover;
}

p {
    font-size: 129%;
    margin-left: 2%;
    margin-right: 2%;
}