/* this is the entire pages styling */
html,body,p {
    padding: 0;
    margin: 0;
    font-family: "Comic Relief", system-ui;
    font-weight: 400;
    font-style: normal;
    

}

 /* BG of whole page (not the image just the thing) */
Body {
    display:gridl;
    grid-template-rows: auto 1fr auto;
    background-color: #f7db8f;

}
 /* this should be the top of the page where my pfp and name is */
#banner {
    display:flex;
    gap: 30px;
    padding: 15px;
    font-size: min(2vw, 28px);
    color: #ffffff;

}
 /* this actual pfp styling afaik */
#banner>img {
    margin: auto;
    display:block;
    width: 35%;
    border: solid 5px #ffffffa8;


}
 /* this is the header text bg transprancy */
#banner>p{
    padding: 5px;
    background-color: #ffffff27;


}

.box>h1 {
    background-color:#5967ff91 ;
    font-size: min(5vw, 50px);
    border: solid 5px #ffffffa8;
    margin: 0;

}

.box>p {
    font-size: min(1.8vw, 28px);
    background-color: #5967ff28;
    padding: 20px;
    color: #cfcfcf

}

 /*this is the meat and potatoes of the page i think */
#content {
    width: min(80vw, 952px);
    margin: auto;
    background-color: #35265F;
    color: #ffffff;
    padding: 15px;
    border: solid 5px #ffffffa8;
    text-align: center;

}

/* This should be the button and its hover function? */
#buttons>a {
    display: inline;
    background-color:#ffffffa8;
    padding: 10px;
    margin: auto;
    box-shadow: 5px 5px 10px #0000005d;
    width: 20%;
    margin-bottom: 10px;
    text-decoration-line: none;
    text-align: center;


}

#buttons {

    display: flex;
    flex-wrap: nowrap;
    
}

a:visited {
    color: #0000EE

}

a:hover {
    background-color:#ffffff
}

 /* makes the splat stay at the bottom of the page */

footer {
    display: flex;
   background-color: transparent;
   margin: auto;
   margin-top: 2000px;
   height: 10vw;
   width:100px;
   padding: 20vw;
}