<style>
* {
  box-sizing: border-box;
}

h1 {
  font-size: 3em; /* 40px/16=2.5em */
  text-align: center;
 
}

h2 {
  font-size: 1.5em; /* 30px/16=1.875em */
  text-align: center;
 }
 
h3 {
  font-size: 1.2em; /* 30px/16=1.875em */
  text-align: center;
 }

h4 {
  font-size: 1.2em; /* 30px/16=1.875em */
  text-align: left;
 }

p {
  font-size: 1em; /* 14px/16=0.875em */
  text-align: left
}

ol {
  font-size: 1em; /* 14px/16=0.875em */
  text-align: left
}

ul {
  font-size: 1em; /* 14px/16=0.875em */
  text-align: left
}

dl {
  font-size: 1em; /* 14px/16=0.875em */
  text-align: left;
}

a:link {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:visited {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: none;
}
a:active {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}


/*1ST ROW HEADER*/
.grid-container2 {
  display: grid;
  grid-template-areas:
    'show header graphic';
  gap: 15px;
  background-color: white;
  padding: 10px;
}

.grid-container > div {
  background-color: #00000;
  padding: 10px;
  font-size: 1em;
  text-align: left;
}

.item1 { 
  grid-area: show; 
  text-align: center;
  }
.item2 { 
  grid-area: header; 
  text-align: center;
  }
.item3 { 
  grid-area: graphic; 
  text-align: center;
}


/*2ND ROW, BLOG ETC*/
.grid-container {
  display: grid;
  grid-template-areas:
    'menu blog blog blog blog info';
  gap: 10px;
  background-color: white;
  padding: 10px;
}

.grid-container > div {
  background-color: #00000;
  padding: 10px;
  font-size: 1em;
  text-align: left;
}
.item4 { 
  grid-area: menu; 
  text-align: center;
  background-color: red;
  color: white;
  max-height:700px;
  max-width:280px;
  scrollbar-width: none;
     a:link {
       color: white;
      background-color: transparent;
      text-decoration: underline;
    }
    a:visited {
      color: white;
      background-color: transparent;
     text-decoration: underline;
    }
    a:hover {
     color: white;
     background-color: transparent;
     text-decoration: none;
    }
    a:active {
      color: white;
      background-color: transparent;
      text-decoration: underline;
    }
}
.item5 { 
  grid-area: blog; 
  text-align: left;
  max-height:700px;
  max-width: 800px;
  scrollbar-width: none;
  padding-left:10px;
  
  .header2 {
  position: sticky;
  top: -10px;
  background-color: white;
  font-size: 1.5em;
  text-align: center;
  padding: 15px 20px;
  }
  .sticky {
  position: fixed;
  top: 0;
  width: 100%;
  }
}
  
.item6 { 
  grid-area: info; 
  text-align: left;
  border-left: 3px solid red;
  max-width: 400px;
  padding-left: 10px;
  max-height:700px;
  scrollbar-width: none;
}

/*3RD ROW, ART + LINKS*/
.grid-container3 {
  display: grid;
  grid-template-areas:
    'art art links';
  gap: 15px;
  background-color: white;
  padding: 10px;
}

.grid-container > div {
  background-color: #00000;
  padding: 10px;
  font-size: 1em;
  text-align: left;
}

.item8 { 
  grid-area: art; 
  text-align: left;
  max-height: 500px;
  scrollbar-width: none;
  padding: 20px;
  margin-left: 15px;
  
  .header3 {
  position: sticky;
  top: -10px;
  background-color: white;
  font-size: 1.5em;
  text-align: center;
  padding: 15px 20px;
  }
  .sticky {
  position: fixed;
  top: 0;
  width: 100%;
  }
}
.item9 { 
  grid-area: links; 
  text-align: left;
  background-color: red;
  color: white;
  max-width: 300px;
  max-height:300px;
  padding: 10px;
  padding-left: 20px;
  padding-right:20px;
  margin-right: 10px;
  scrollbar-width: none;
    a:link {
      color: white;
      background-color: transparent;
      text-decoration: underline;
    }
    a:visited {
      color: white;
      background-color: transparent;
     text-decoration: underline;
    }
    a:hover {
     color: white;
     background-color: transparent;
     text-decoration: none;
    }
    a:active {
      color: white;
      background-color: transparent;
      text-decoration: underline;
    }
}

/*4TH ROW OUTFITS, 
MATCHES 2ND ROW BLOG FORMATTING*/
.grid-container4 {
  display: grid;
  grid-template-areas:
    'item10 item11 item12';
  gap: 10px;
  background-color: white;
  padding: 10px;
}

.grid-container > div {
  background-color: #00000;
  padding: 10px;
  font-size: 1em;
  text-align: left;
}
.item10 { 
  grid-area: item10; 
  text-align: left;
  border-right: 3px solid red;
  width: 300px;
  padding-right: 10px;
  max-height:700px;
  scrollbar-width: none;
}
.item11 { 
  grid-area: item11; 
  text-align: left;
  max-height:700px;
  max-width: 800px;
  scrollbar-width: none;
  padding-left: 10px;
  text-align: center;
  
  .header4 {
  position: sticky;
  top: -10px;
  background-color: white;
  font-size: 1.5em;
  text-align: center;
  padding: 15px 20px;
  }
  .sticky {
  position: fixed;
  top: 0;
  width: 100%;
  }
}
.item12 { 
  grid-area: item12; 
  text-align: center;
  background-color: red;
  color: white;
  max-height:700px;
  max-width:300px;
  padding-left: 20px;
  padding-right: 20px;
  scrollbar-width: none;
     a:link {
       color: white;
      background-color: transparent;
      text-decoration: underline;
    }
    a:visited {
      color: white;
      background-color: transparent;
     text-decoration: underline;
    }
    a:hover {
     color: white;
     background-color: transparent;
     text-decoration: none;
    }
    a:active {
      color: white;
      background-color: transparent;
      text-decoration: underline;
    }
}



.blink {
    animation: blinker 2s step-end infinite;
}

@keyframes blinker {
    0% {visibility: hidden}
    10% {visibility: visible}
}


div.gallery {
  border: none;
}

div.gallery:hover {
  border: none;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

body{
  font-family: 'Arial Narrow', Arial, sans-serif; 
  font-stretch: condensed;
  color: red;
  background-color: #00000;
}

</style>
