/* CSSSHI */

/*HTML SHTUFFS*/
html{
        background-image:url(Imagess/pixil-frame-0.png); 
        color: black;
        font-family: "Consola", monospace;
    }

header, #pages, #dudeman, #links, main{
    border: black 5px solid;
    background-color: bisque;
    border-color: rgb(59, 12, 0);
    border-radius: 4px;
}



.container{
    max-width: 1000px;
    margin: auto;
    display: grid;
    grid-gap: 10px ;
}


/*fonts*/
@font-face {
    font-family:"Consola";
    src: url(/consola.ttf);
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}
@font-face {
    font-family:"Consola";
    src: url(/consolab.ttf);
    font-weight:bold;
    font-style:normal;
    font-display:swap;
}
@font-face {
    font-family:"Consola";
    src: url(/consolai.ttf);
    font-weight:normal;
    font-style:italic;
    font-display:swap;
}
@font-face {
    font-family:"Consola";
    src: url(/consolaz.ttf);
    font-weight:bold;
    font-style:italic;
    font-display:swap;
}


@font-face {
    font-family:"Francois";
    src: url(/FrancoisOne.ttf);
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

@font-face {
    font-family:"Determination";
    src: url(/Determination.ttf);
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}
/*HTML SHTUFFS*/





/*WEBBUTTON STUFF*/

button{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width:220px;
    height: 50px;
    gap: 30px;
    border: 4px solid;
    border-radius: 4px;
    font-family: determination, monospace;
    font-size: 25px;
    letter-spacing: 2px;
    transition: 0.5;
    cursor: pointer;
}

#twtbutton, #bsbutton, #bcbutton, #kfbutton, #scbutton{
    margin-top: 10px;
}

#ytbutton:hover, #twtbutton:hover, #bsbutton:hover, #bcbutton:hover, #kfbutton:hover, #scbutton:hover{
    background-color: aliceblue;
}

#ytbutton{
    background-color: rgb(255, 87, 87);
    transition: 0.3s;
}

#twtbutton{
    background-color: rgb(79, 161, 255);
    transition: 0.3s;
}

#bsbutton{
    background-color: rgb(0, 183, 255);
    transition: 0.3s;
}

#bcbutton{
    background-color: rgb(92, 80, 255);
    transition: 0.3s;
}

#kfbutton{
    background-color: rgb(255, 48, 127);
    transition: 0.3s;
}

#scbutton{
    background-color: rgb(255, 115, 0);
    transition: 0.3s;
}




.HOMEBUTTON, .MUSICBUTTON, .VIDEOSBUTTON, .ARTBUTTON, .COMMBUTTON{
    margin-top: 10px;
    background-color: #e05158;
    transition: 0.3s;
}

.HOMEBUTTON:hover, .MUSICBUTTON:hover, .VIDEOSBUTTON:hover, .ARTBUTTON:hover, .COMMBUTTON:hover{
    background-color: aliceblue;
}  
/*BUTTON STUFF*/








/*GRID SHTUFFS*/
header{
    padding: 10px;
    grid-row: 1 / 2 ;
    grid-column: 1 / 3 ;
    font-family: "Francois", monospace;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 20px;
    font-family: "Determination", monospace;
}
#links{
    padding: 10px;
    grid-row: 2 / 3 ;
    grid-column: 1 / 2 ;
    height: max-content;
    width: max-content ;
    background-image: url(/Imagess/notebookpapertexture.jpg);
    margin-top: 40px;
}
#pages{
    padding: 10px;
    grid-row: 3 / 4 ;
    grid-column: 1/ 2 ;
    height: max-content;
    width: max-content ;
    background-image: url(/Imagess/notebookpapertexture.jpg);
    margin-top: 80px;
    
}
#dudeman{
    padding: 10px;
    grid-row: 2 / 3 ;
    grid-column: 2 / 3 ;
}
main{
    padding: 15px;
    grid-row: 3 / 4 ;
    grid-column: 2 / 3 ;
}
/*GRID SHTUFFS*/





#noonelogo{
    width: 80px;
    height: 80px;
}

#mivoupfp{
    margin: auto;
    border-color: rgb(59, 12, 0);
    border-radius: 4px;
    border: 4px solid;
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}





/*LINK SHTUFFS*/
    /*.ytbutton{
        font-size: 200px;
    }*/
/*LINK SHTUFFS*/




/*ABT ME*/
#abtme{
    height: 200px;
    width: 500px;
    overflow: auto;
    background-color: rgb(255, 203, 181);
    border-color: rgb(59, 12, 0);
    border-radius: 4px;
    border: 4px solid;
    padding-left: 16px;
    padding-right: 16px;
}
/*ABT ME*/