
body {
    background-color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    margin:0;
}
main {
    display: block;
    background-color:white;
    margin:10px;
    grid-column:2/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;
}

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:282px;
    display:block;
    height:60x;
    text-decoration:none;
}

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

.line2 {
    border-left: 282px solid;
    height: 10px;
    color:grey;
}
@media only screen and (max-width: 1100px){
    #wrapper {
        grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 90px)) minmax(0px, 1fr);
    }
    a {
        width:50%;
        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:282px;
        display:flex;
        height:60px;
        text-decoration:none;
    }
}

@media only screen and (max-width: 992px){
 .line {
     display:none;
 }
 .line2 {
     display:none;
 }
 .center {
     display:none;
 }
 a {
     display:none;
 }
 a:hover {
     display:none;
 }
 .background {
 display:none;
}
#blackbar {
    display:none;
}

}

@media only screen and (max-width:768px) {
 img {
     display:none;
 }
 .background {
     display:none;
 }
 .line {
    display:none;
}
.line2 {
    display:none;

}
.center {
    display:none;
}
a {
    display:none;
}
a:hover {
    display:none;
}
#blackbar {
    display:none;
}

}