@import url("common.css");

#wrapper {
    position:               relative;
    display:                grid;
    margin:                 auto;
    max-width:              75%;
    grid-template-columns:  12% 50%;
    grid-template-rows:     150px 500px;
    gap:                    40px;
    left:                   13%;
    padding:                15px;

    grid-template-areas: 
                            "header header"
                            "navbar main"
                            "footer footer"
    ;
}

* {
    font-family:            "gallant12x22";
    background-repeat:      no-repeat;
    background-attachment:  fixed;
    background-size:        cover;
}

.box {
    color:                  var(--shade-7);
    border:                 var(--magenta) 7px ridge;
    background-color:       var(--black);
    padding:                15px;
}

body {
    background-color:       var(--bg);
    background-image:       var(--bg-img);
    background-size:        128px;
    background-repeat:      repeat;
}

span {
    text-align:             left;
    background-color:       var(--bg-alt);
}

header {
    grid-area:              header;
    font-size:              22px;
    text-align:             right;
}

navbar {
    grid-area:              navbar;
}

navbar ul {
    padding:                0px 10px;
    text-align:             left;
    list-style:             none ;
    text-decoration:        none;
    display:                block;
}

navbar p{
    font-size:              15px;
    text-decoration:        underline;
}

navbar a:link, a:visited {
    font-size:              15px;
    color:                  var(--shade-4);
    text-align:             left;
    text-decoration:        none;
    display:                block;
}

navbar a:hover {
    color:                  var(--lime);
    margin:                 0px 10px;
    display:                block;
}

main {
    grid-area:              main;
    text-align:             left;

}

footer {
    grid-area:              footer;
    text-align:             center;
}

footer img{
    max-height:             31px; /* for badges */
}

code {
    font-family:            "ProggyClean";
    white-space:            nowrap;
}

hr {
    color:                  var(--shade-2);
}

.current:link, .current:visited {
    color:      var(--pink);
}

.current:hover {
    color:      var(--magenta);
    /*margin:                 0px 10px;*/
}