body {
    background-color: #111111;
    font-family: Cochin;
}

.container {
    background-color: #111111;
    display: grid;
    grid-template-columns: 20% 60% 20%;
    height: 100%;

}

.container div {
    display: grid;
    background-color: black;
    border: 1px solid aliceblue;
    text-align: center;
}

div.header {
    font-size: 130%;
    font-family: monospace;
    text-decoration: none;
    color: cyan;
    margin: 10px 10px auto 10px;
    padding: 10px;
    display: inline-block;
    text-align: center;
    text-shadow: 2px;
}

div.left {
    visibility: hidden;
    background-color: transparent;
    border: 1px dashed aliceblue;
    border-right: none;
}

div.right {
    visibility: hidden;
    background-color: transparent;
    border: 1px dashed aliceblue;
    border-left: none;
}

div.footer {
    margin: auto 10px 10px 10px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    align-content: center;
}

.container p {
    color: aliceblue;
    text-shadow: 2px;
}

.container li {
    margin: 10px;
    padding: 10px;
    list-style-type: none;
    font-size: 150%;
}

.container a:link,a:visited {
    font-family: monospace;
    text-decoration: none;
    color: cyan;
    text-align:right;
    background-color: transparent;
}

.container a:hover {
  text-decoration: none;
  color: hotpink;
  background-color: transparent;
}

@media only screen and (min-width: 720px;) {
.container {grid-template-columns: 0% 100% 0%;}
}

@media only screen and (min-width: 1600px;) {
.container {grid-template-columns: 0% 100% 0%;}

}

@media only screen and (min-width: 1080px;) {
.container {grid-template-columns: 20% 60% 20%;}
}

@media only screen and (min-width: 1440px;) {
.container {grid-template-columns: 20% 60% 20%;}
}

@media only screen and (min-width: 2160px;) {
.container {grid-template-columns: 20% 60% 20%;}
}