* {
    font-family: 'Courier', Courier, monospace
}

body {
    background-color: grey;
    margin: 0;
    padding: 0;
}

header {
    text-align: center;
    grid-column-start: 2;
    font-size: 30px;
    background-color: rgb(210, 210, 210);
}

nav {
    grid-column-start: 2; 
    grid-row-start: 2;
    text-align: center;
    padding: 2px;
    background-color: rgb(160, 160, 160);
    font-size: 20px;
    color: white;
}

a {

  font-weight: bold;
  color: rgb(102, 197, 255);
}

a:hover {
  color:rgb(33, 102, 222)
}

.grid {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 80% 20%;
    grid-gap: 10px;
}

.grid2 {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 100%;
    grid-gap: 10px;
}

.main {
    text-align: center;
    grid-column-start: 2;
    grid-row-start: 1;
    background-color: rgb(210, 210, 210);
    padding: 20px;
}

.grid3 {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    grid-template-rows: 100%;
    grid-gap: 10px;
}

.main2 {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    grid-template-rows: 100%;
    grid-column-start: 2;
    grid-row-start: 1;
    background-color: rgb(175, 175, 175);
    padding: 20px;
}

.main3 {
    text-align: center;
    grid-column-start: 2;
    background-color:rgb(210, 210, 210);
    padding-bottom: 20px;
}

a img.hover {
    display: none;
}
a img.default {
    display: inherit;
}
a:hover img.hover {
    display: inherit;
}
a:hover img.default {
    display: none;
}

.bluh {
  border: 1px solid black;
  outline-style: solid;
  outline-color: rgb(0, 0, 0);
  outline-width: thin;
}

.imag {
    text-align: center;
}

p {
    padding-left: 10px;
    padding-right: 10px;
}

.small {
    font-size: small;
    opacity: 50%;
}