body {
    background-color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    margin:0;
}
main {
    display:block;
    background-color:white;
    margin:10px;
    grid-column:2/10;
    grid-row:1/10;
}
header {
    color:white;
    font-family:Georgia, 'Times New Roman', Times, serif;
}
header h1 {
    color:white;
    font-family:Georgia, 'Times New Roman', Times, serif;
}
#wrapper {
    display:grid;
    grid-auto-rows: minmax(0px,auto);
    grid-template-columns: minmax(0px, 0.3fr) repeat(6, minmax(0, 175px)) minmax(0px, 0.3fr);
}
#blackbar {
    background-color:#1B1A1A;
    color:white;
    width:257px;
}
#hometext {
    grid-column:2/10;
    margin:10px;
    align-self:center;
    justify-content:center;
}

a {
    color:white;
    font-size:50px;
    text-align:center;
    justify-content:center;
    align-self:center;
    text-decoration:none;
    display:flex;
}

a:hover {
    background-color:grey;
    width:257px;
    display:block;
    height:60x;
    text-decoration:none;
}

img {
    width:200px;
    height:200px;
    align-items:center;
}
.center {
    display:block;
    margin-left:auto;
    margin-right:auto;
}
.line {
    border-left: 100px solid;
    height: 90px;
    color:#1B1A1A;
}
footer {
    color:white;
    background-color:darkslategrey;
    height: 100px;
    padding:10px;
    margin:0px;
    text-align:center;
}

.line2 {
    border-left: 257px solid;
    height: 10px;
    color:grey;
}
@media only screen and (min-width: 992px){
    .dropbtn {
        background-color: darkslategrey;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        display:none;
      }
}
@media only screen and (max-width: 992px){
 .center {
     display:none;
 }
 .line { display:none;}
 .line2 {display:none;}
header {
    display:none;
}
#blackbar {
    background-color:#1B1A1A;
    color:white;
    width:0px;
}
a:hover {
    background-color:grey;
    width:181px;
    display:block;
    height:60x;
    text-decoration:none;
}
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  .dropdown {
    position: relative;
    display: inline-block;
  }
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .dropdown-content a:hover {background-color: #ddd;}
  .dropdown:hover .dropbtn {background-color: darkslategrey;}
  .dropdown:hover .dropdown-content {display: block;}
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
}

@media only screen and (max-width:768px) {
 img {
     display:none;
 }
 #blackbar {
    background-color:#1B1A1A;
    color:white;
    width:0px;
}
.center {
    display:none;
}
.line { display:none;}
.line2 {display:none;}
header {
   display:none;
}
a:hover {
    background-color:grey;
    width:181px;
    display:block;
    height:60x;
    text-decoration:none;
}
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
  }
  .dropdown {
    position: relative;
    display: inline-block;
  }
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
  }
  .dropdown-content a:hover {background-color: #ddd;}
  .dropdown:hover .dropbtn {background-color: darkslategrey;}
  .dropdown:hover .dropdown-content {display: block;}
}