* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
    margin: 0;
    width: 100%;
    height: 100%;
      margin-bottom: 20px;
}
.grid-body {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-areas: 
  'me gallery';
  grid-template-columns: fit-content(30vw);
  grid-template-columns: 2fr 6fr;
}
.grid-body > main.container{
  grid-area: gallery;
  
}
.title{
  position: fixed;
  color: var(--text-color);
  left: 6vw;
  margin-top: 1%;
}
.portfoliolist{
  background: linear-gradient(var( --nav-gradient)0%, var(--base-variant)100%);
  font-family: Arial, Helvetica, sans-serif;
  grid-area: me;
    margin-top: 40%;
  gap: 3px;
  padding: 5px;
}
.list{
  text-decoration: none;
  color: var(--text-color);
  position: fixed;
  margin-top: 3%;
  left: 9vw;
}

.list:before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: var(--text-color);
  box-shadow: 1px 1px 1px var(--accent-color);
  transform: scaleX(0);
  transition: 400ms cubic-bezier(0.7, -0.6, 0.3, 1.2) transform;
}
.list:hover {
  letter-spacing: 5px;
  background-color: var(--base-color);
  color: var(--accent-color);
}
.list:hover:before {
  transform: scaleX(1);
}
.modal {
  background-color: rgb(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.modal img {
    margin-top: 20px;
    height: 100%;
    width: 100%;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
}
.no-display{
  display: none;
}
#modal-container {
  display: flex;
  flex-direction: column;
  color: white;
  text-align: center;
  align-items: center;
}
#image-description {
    margin-top: 1rem;
}

.grid-port{
     height: 100%;
  width: 90%;
  margin-left: 3.5vw;
  display: grid;
  grid-template-columns: repeat (6, 1fr);
  grid-template-areas: 
  "bi bi bi bi bi bi"
  "cn cn cn cn cn"
  "img img img ab ab"
  "as as as as as"
  "cv cv cv cv cv"
  "fr fr fr fr fr";
  gap: 1rem;
}
.two-img{
  margin-left: 15%;
}
.two-img img{
  width: 100%;
   -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 40%;
}
.row {
  margin-top: 15%;
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}
.big-img img{
    margin-top: 8px;
  width: 100%;
}
.tri-img{
  margin-left: 1.5%;
}
.tri-img img{
  width: 100%;
   -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 32.5%;
}
/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}