@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
:root{
    --dark-purple: #3A043E; 
    --lavender: #be9ffd;
    --rosy-brown: #CB9196;
    --rosier-brown:#CF9685; 
    --buff:#e6b38e;
    --tan:#f1d8bb;
    --blush:#9e2985;

}

/* How to make variables (to easily adjust site wide thingies! Yay!
:root{
    --variable-name: value we want to assign e.g our colour!
                we can add as many variabes in here as we want
}

Now to add the variable to one of the our styles we do it like this! 

body{
    background-colour: var(--variable-name)
}
*/
.vt323-regular {
  font-family: "VT323", monospace;
  font-weight: 400;
  font-style: normal;
}

body{
    font-family: "VT323", monospace;
    color: var(--dark-purple);
    background-color: var(--lavender);
    background-image: url("../images/anigdstar.gif");


}

.container{ /* this is our elemeent for the layout of the site, using grid! */
    display: grid;
    grid-template: 
    "empty empty empty"
    "header header header"
    "l main r"
    "footer footer footer"
    / 1fr 2fr 1fr;

    grid-gap: 10px;
    margin: 300px 0; /* remove this later, this is only here so the message is centered */
}

header{
grid-area: header;
}
.left{
grid-area: l;
}
.right{
grid-area: r;
}

main{
    grid-area: main;
    background-color: var(--tan);
    border-radius: 10px;
    border-color: var(--rosier-brown);
    border: solid 2px var(--rosier-brown);
    width: fit-content;
    margin: auto auto;
    padding: 10px 40px;
}
footer{
 grid-area: footer;  
}

h1{
    background-color: var(--tan);
    width: fit-content;
    margin: auto;
    padding: 10px 40px;
    border: solid var(--rosy-brown) 2px;
    border-radius: 10px;
    color: var(--blush);
}

h2{
    color: var(--blush);
}