/* This stylesheet is for the layout of the web develoment homepage */

body {
    background-color: darkgreen;
    color: goldenrod;
    z-index: -2;
}

.grid {
   display: grid;
   grid-template-columns: 10% 80% 10%;
   grid-template-rows: 20% 60% 20%;
   position: relative;
}

.header {
   grid-column: 1/4;
   grid-row: 1/2;
   /* background-color: yellow; */
   height: 10vh;
   font-size: 2rem;
   position:fixed;
   top: 0px;
   margin-bottom: 20px;;
}

.main {
    display: flex;
    grid-column: 1/4;
    grid-row: 2/3;
    /* background-color: green; */
    height: 80vh;
}

.footer {
    grid-column: 1/4;
    grid-row: 3/4;
    /* background-color: darkblue; */
    height: 10vh;
    justify-content: center;
    align-content: center;
    font-size: 2.5rem;
    position: fixed;
    bottom: 0px;
    left:45%;
    margin-top: 20px;
}

nav {
    display: flex;
    flex-direction: column;
    width: 20vw;
    padding: 20px;
    position: absolute;
    top: 14rem;
    left: 0rem;
}

.main-content {
    width: 60vw;
    justify-content: center;
    align-content: center;
}

.main-content img {
    position: fixed;
    top: 14rem;
    left: 25%;
    z-index: -1;
    max-width: 50%;
}

#sidebar {
    display: flex;
    flex-direction: column;
    width: 20vw;
    padding: 20px;
    position: fixed;
    top: 7rem;
    right: 0rem;
}

#sidebar a {
    text-decoration: none;
    color: yellow;
}

button {
    width: 100%;
    color: darkgreen;
    background-color: yellow;
}

button a {
    text-decoration: none;
}

nav a {
    display: block;
    width: 80%;
    color: green;
    background-color: yellow;
    text-decoration: none;
    text-align: center;
    padding: 8px;
}