body {
  background-color: #f0c0d0;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
                      linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 40px 40px; /* Adjust this to change grid size */
  margin-left: 0;
  margin-right: 0;
  font-size: 2em;
  font-family: 'Roboto Mono', monospace;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

p    {
  color: #000000;
  font-size: 0.5em;
  line-height: 1.0em;
}

#content {
  position: absolute;
  margin-left: 5%;
  margin-right: 5%;
  
}

#grid {
  width: 90vw;
  max-width: 2000px;
  margin-top: 16%;
  margin-bottom: 55px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-gap: 0.5em;
}

.project {
  background-color: #939191;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 4px;
  opacity: 1;
  transition: .3s ease;
}

.overlay {
  background-color: #000000;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 4px;
  opacity: 1;
  transition: .3s ease;
}

.project:hover {
  opacity: 0.8;
}

.project:active {
  opacity: 0.6;
}

.cover {
  width: 100%;
  margin: 0%;
  border-radius: 4px 4px 0px 0px;
}

#about {
  display: none;
  position: absolute;
  margin-left: 10%;
  margin-right: 10%;
}

#infogrid {
  width: 80vw;
  margin-top: 40vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-gap: 0em;
}

#photo {
  display: block;
  margin: auto;
  max-width: 347px;
  margin-top: -10px;
}

img {
    width: 100%;
}

#texts {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;  
  font-weight: 900;
  text-align: left;
  color: #000000;
  text-transform: uppercase;
  font-size: 1.04em;
  line-height: 0em;
  padding-top: 0.6em;
  max-width: 500px;
}

h1 {
  font-family: 'Montserrat', sans-serif;  
  display: block;
  font-weight: 800;
  margin: 10%;
  font-size: 1.15em;  
  line-height: 1.0em;
  padding: 5% 5% 0% 4%;
  text-align: left;
}

h2{
  font-family: 'Montserrat', sans-serif;
  display: block;
  font-weight: 800;
  text-align: left;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.5em;
  line-height: 1.2em;
  margin-top: 2%;
  padding-left: 4%;
  padding-right: 4%;
  text-align: left;
}

h3{
  font-family: 'Roboto Mono', monospace;
  display: block;
  color: #ffffff;
  font-weight: 400;
  letter-spacing: 0.1em;
  font-size: 0.3em;
  text-transform: uppercase;
  line-height: 1.5em;
  padding-left: 4%;
  padding-right: 4%;
  margin-top: -3%;
  text-align: left;
}


h4 {
  font-family: 'Roboto Mono', monospace;
  color: #000000;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 0.375em;
  text-transform: uppercase;
  text-align: left;
  line-height: normal;
}

h5 {
  font-family: 'Roboto Mono', monospace;
  text-transform: none;
  font-size: 0.45em;
  line-height: 1.4em;
  font-weight: 400;
  max-width: 500px;
}

h6 {
  font-family: 'Roboto Mono', monospace;
  color: #ffffff;
  font-size: 0.5em;
  line-height: 1.3em;
  font-weight: 400;
}

h7 {
  text-decoration: underline;
}

ul{
   margin-left: -8px;
   margin-bottom: 0;
   display: table;
   text-align: left;
}

ul li{
     display: inline-block;
     padding-left: 8px;
     padding-right: 8px;
     float: none;
}

#menubox{
  position: fixed;
  margin: 2% auto;
  left: 0;
  right: 0;
  top: 0;
  width: 265px;
  height: 180px;
  z-index: 3;
  background-color: #ffffff;
  border: 0.40em solid #000000;
}

.menu{
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
  font-size: 0.55em;
  font-weight: 800;
  text-align: center;
  margin-top: -18px;
}

.line {
  background: #000000;
  height: 4px;
  margin-left: 39px;
  position: absolute;
  width: 80px;
  transition: transform 400ms ease;
} 

.link {
    text-decoration: underline;
}

.link:hover {
    filter: invert(100%);
}

.link:active {
    filter: invert(100%);
}


/* ==========================================================================
   media queries phone small
   ========================================================================== */

@media (min-width: 319px) and (max-width: 349px) {

ul{
  margin-left: -5px;
  display: table;
  text-align: left;
}

ul li{
  display: inline-block;
  padding-left: 0px;
  padding-right: 20px;
  float: none;
}
    
#menubox{
  width: 230px;
  height: 160px;
  margin: 0% auto;
  border: 12px solid #000000;
  margin-bottom: 20px;
}
    
.menu{
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
  font-size: 0.46em;
  font-weight: 800;
  text-align: center;
  margin-top: -15px;
}
    
.line {
  background: #000000;
  height: 3px;
  margin-left: 35px;
  position: absolute;
  width: 58px;
  transition: transform 400ms ease;
}      

#grid {
  width: 90vw;
  margin-top: 36vh;
  margin-bottom: 25px;
}

.project {
  border-radius: 6px;
}

.overlay {
  width: 90vw;
  border-radius: 6px;
}

.cover {
  border-radius: 6px 6px 0px 0px;
}

#about {
  display: none;
  position: absolute;
  
}

#infogrid {
  width: 80vw;
  margin-top: 36vh;
  margin-bottom: 25px;
}

#photo {
  display: block;
  margin-left: 4%;
  max-width: 230px;
  margin-top: -10px;
}

#texts {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;  
  font-weight: 900;
  color: #000000;
  text-transform: uppercase;
  font-size: 0.9em;
  line-height: 0em;
  text-align: center;
  padding-top: 0.6em;
  width: 80vw;
}

h1 {
  font-family: 'Montserrat', sans-serif;  
  display: block;
  font-weight: 800;
  margin: 10%;
  font-size: 1em;  
  line-height: 1.0em;
  padding: 6% 5% 0% 4%;
  text-align: left;
}

h4 {
  font-family: 'Roboto Mono', monospace;
  color: #000000;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 0.34em;
  text-transform: uppercase;
  text-align: center;
  line-height: normal;
}

h5 {
  font-family: 'Roboto Mono', monospace;
  text-transform: none;
  text-align: left;
  font-size: 0.45em;
  line-height: 1.4em;
  font-weight: 400;
  max-width: 500px;
}
    
h6 {
  font-family: 'Roboto Mono', monospace;
  color: #ffffff;
  font-size: 0.45em;
  line-height: 1.3em;
  font-weight: 400;
}  
}

/* ==========================================================================
   media queries phone medium
   ========================================================================== */

@media (min-width: 350px) and (max-width: 376px) {

ul{
   margin-left: -9px;
   display: table;
   text-align: left;
}

ul li{
     display: inline-block;
     padding-left: 8px;
     padding-right: 8px;
     float: none;
}    
    
#menubox{
  width: 265px;
  height: 180px;
  margin-top: 7%; 
  border: 13px solid #000000;
}

.menu{
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 1px;
  font-size: 0.55em;
  font-weight: 800;
  text-align: center;
  margin-top: -15px;
}    

.line {
  background: #000000;
  height: 4px;
  margin-left: 39px;
  position: absolute;
  width: 80px;
  transition: transform 400ms ease;
} 
    
#grid {
  width: 90vw;
  margin-top: 38vh;
  margin-bottom: 25px;
}

.project {
  border-radius: 6px;
}

.overlay {
  width: 90vw;
  border-radius: 6px;
}

.cover {
  border-radius: 6px 6px 0px 0px;
}

#about {
  display: none;
  position: absolute;
}

#infogrid {
  width: 80vw;
  margin-top: 38vh;
  margin-bottom: 25px;
}

#photo {
  display: block;
  margin: auto;
  max-width: 230px;
  margin-top: -10px;
}

#texts {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;  
  font-weight: 900;
  color: #000000;
  text-transform: uppercase;
  font-size: 1.04em;
  line-height: 0em;
  text-align: center;
  padding-top: 0.6em;
  width: 80vw;
}
    
h1 {
  font-family: 'Montserrat', sans-serif;  
  display: block;
  font-weight: 800;
  margin: 10%;
  font-size: 1.15em;  
  line-height: 1.0em;
  padding: 6% 5% 0% 4%;
  text-align: left;
}   

h4 {
  font-family: 'Roboto Mono', monospace;
  color: #000000;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 0.36em;
  text-transform: uppercase;
  text-align: center;
  line-height: normal;
}

h5 {
  font-family: 'Roboto Mono', monospace;
  text-transform: none;
  text-align: left;
  font-size: 0.45em;
  line-height: 1.4em;
  font-weight: 400;
  max-width: 500px;
}
    
h6 {
  font-family: 'Roboto Mono', monospace;
  color: #ffffff;
  font-size: 0.45em;
  line-height: 1.3em;
  font-weight: 400;
}  
}

/* ==========================================================================
   media queries phone large
   ========================================================================== */

@media (min-width: 377px) and (max-width: 480px) {

#menubox{
  margin-top: 7%; 
  border: 13px solid #000000;
}
    
#content {
  margin-bottom: 80px;
}    

#grid {
  width: 90vw;
  margin-top: 32vh;
  margin-bottom: 25px;
}

.project {
  border-radius: 6px;
}

.overlay {
  width: 90vw;
  border-radius: 6px;
}

.cover {
  border-radius: 6px 6px 0px 0px;
}

#about {
  display: none;
  position: absolute;
}

#infogrid {
  width: 80vw;
  margin-top: 32vh;
  margin-bottom: 25px;
}

#photo {
  display: block;
  margin: auto;
  max-width: 230px;
  margin-top: -10px;
}

#texts {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;  
  font-weight: 900;
  color: #000000;
  text-transform: uppercase;
  font-size: 1.04em;
  line-height: 0em;
  text-align: center;
  padding-top: 0.6em;
  width: 80vw;
}

h4 {
  font-family: 'Roboto Mono', monospace;
  color: #000000;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 0.36em;
  text-transform: uppercase;
  text-align: center;
  line-height: normal;
}

h5 {
  font-family: 'Roboto Mono', monospace;
  text-transform: none;
  text-align: left;
  font-size: 0.45em;
  line-height: 1.4em;
  font-weight: 400;
  max-width: 500px;
}
    
h6 {
  font-family: 'Roboto Mono', monospace;
  color: #ffffff;
  font-size: 0.45em;
  line-height: 1.3em;
  font-weight: 400;
}  
}