/* variables */
:root{
    --dark-purble: rgb(64, 25, 77);
    --transparent-dark-purble: rgba(64, 25, 77, .5);
    --purble: rgb(131, 22, 194);
    --light-transparent-purble: rgba(253, 204, 255, 0.692);
    --light-purble: rgb(253, 204, 255);
    --pink: rgb(248, 95, 253);
    --transparent-pink: rgba(248, 95, 253, 0.5);
    padding-bottom: 40vh;
    margin-bottom: 40vh;
}

@font-face {
    font-family: Rainbow_BoldItalic;
    src: url(/fonts/Web_Open_Font_Format/Rainbow2000-BoldItalic.woff);
}

@font-face {
    font-family: Cheese;
    src: url(/fonts/Web_Open_Font_Format/FreeCheese-Regular.woff);
}

@font-face {
    font-family: Funnytype;
    src: url(/fonts);
}

/* Header */

header{
    position: absolute;
    background-color: var(--transparent-pink);
    background-image: url("/img/motherboard_texture_opacity_at_25.png");
    background-blend-mode:luminosity;
    width: 99%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 3%;
    border-bottom-left-radius: 3%;
    left: .5%;
    height: 30vh;
    padding-top: 0%;
    margin-top: 0.5%;
}

header .piano_header_speaker{
    position: absolute;
    height: 45%;
    top: 3%;
    border: 1%;
    border-radius: 2%;
    color: var(--dark-purble);
}

header #speaker_left{
    left: 1%;
    box-shadow: -3px -3px 3px 3px;
}

header #speaker_right{
    right: 1%;
    box-shadow: 3px -3px 3px 3px;
}

header #pixel_spacepony_01{
    left: 15%;
    
}

header .pages, header .page_name{
    position: absolute;
    display: flex;
}

header .pages{
    width: 27%;
    height: 35%;
    right: 12.5%;
    top: 0%;
    border-radius: 7px;
    border: 1px solid var(--dark-purble);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    background-color: var(--light-purble);
    padding: .5%;
}

header .page_button a{
    transition-property: scale;
    transition-duration: .1s;
    color: var(--purble);
    -webkit-text-stroke-width: 1px;
}

header .page_button a:link{
    -webkit-text-stroke-color: var(--pink);
    margin: 1.5px;
    padding: 0px;
    box-sizing: border-box;
}

header .page_button a:hover{
    color:var(--transparent-dark-purble);
    border-color: var(--pink);
    scale: 1.05;
    transition-duration: .2s;
}

header .page_button{
    font-family: Cheese;
    height: 40% ;
    width: 20% ;
    color: var(--dark-purble);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

header .page_name{
    color: var(--dark-purble) ;
    -webkit-text-fill-color:lawngreen;
    -webkit-text-stroke-color:green;
    font-family: Rainbow_BoldItalic ;
    font-size: 65px ;
    -webkit-text-stroke-width: 6px ;

    position: absolute;
    display: flex;
    height: 30%;
    top: -5%;
    width: 20%;
    left: 24%;

    justify-content: center;
    align-items: center;
    
    border-radius: 2%;
    background-color: var(--dark-purble);
}

header .piano_keys{
    box-sizing: border-box;
    position: absolute;
    width: 98%;
    height: 48%;
    left: 1%;
    bottom: 1%;
    background-color: var(--transparent-dark-purble);
    border-radius: 1%;
    border: solid var(--transparent-dark-purble) 1px;
    border-top-width: 4px;
}