body {
   margin: 0.5em;

}



.outro {
   font-family: 'Xanh+Mono', monospace;
   font-weight: 70;
   vertical-align: bottom;
   font-size: 13px;
   font-kerning: normal;
   color: rgb(10, 123, 112);
}

.menu {
   position: relative;
   
   margin-bottom: 14px;
   display: flex;
   justify-content: left;
   z-index: 10;
}

/*CANT MAKE THE TEXT BOLD*/
.menu a {
   color: rgb(13, 74, 88);
   font-family: 'Xanh+Mono', monospace;
   font-weight: 600;
   letter-spacing: -0.02em;
   margin-right: 60px;
   text-decoration: none;
   font-weight: 500;
   font-size: 14px;
   text-transform: lowercase;
   background-color: rgb(255, 255, 255);
}

.menu a:hover {
   opacity: 1;
   color: rgb(227, 85, 3);
   cursor: crosshair;
}

.menu a:active {
   opacity: 0.5;
}



/*.image-grid{
            display:grid;
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 10px;
            row-gap: 20px;
            }*/

.grid-images {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   column-gap: 10px;
   row-gap: 20px;
}

.image {
   /* Width 100% is of the container. these are inline block styles that can be removed since we use grid above
               display: inline-block;
            vertical-align: top; */
   width: 100%;
   height: 500px;
   object-fit: cover;
   /* 
                object-position: center;
                border-width: 3px;
                border-style: solid;
                border-color:red; */
}

.profile {
   display: flex;
   flex-direction: row;
}

.profile-photo {
width:10px;
flex: 4;
}


.intro {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr;
   object-fit: contain;
   flex-shrink: 0;
   margin-bottom: 5%
}

.intro-contact {
   display: grid;
   grid-template-columns: 1fr;
   object-fit: contain;
   flex-shrink: 0;
   margin-bottom: 5%
}

.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   object-fit: contain;
   flex-shrink: 0;
   margin-bottom: 5%
}

.contact-photo {
     flex: 3;
   width: 100%;
   object-fit: contain;
   flex-shrink: 0;
   margin-bottom: 0%;
  
}
.photo {
   flex: 3;
   width: 100%;
   object-fit: contain;
   flex-shrink: 0;
   margin-bottom: 5%;
   max-width: 1920px;
   
}
.profile-photo {
   flex: 3;
   width: 100%;
   object-fit: contain;
   flex-shrink: 0;
   margin-bottom: 0px;
   max-width: 1920px;
   
}

.project-photo {
   flex: 3;
   width: 70%;
   object-fit: contain;
   flex-shrink: 0;
   margin-bottom: 5%;   
}

.project-grid {
   margin-right: 1px;
   margin-bottom: 1px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 10px;
   row-gap: 10px;
  
}


.intro-text {
   font-family: 'Xanh+Mono', monospace;
   font-size: 15px;
   margin-left: 20px;
   margin-top: 0%;
   color: rgb(0, 0, 0);
}

.text-areas {
   font-family: 'Xanh+Mono', monospace;
   font-size: 12px;
   margin-left: 20px;
   margin-top: 0%;
   color: rgb(0, 0, 0);
}

.project-text {
   font-family: 'Xanh+Mono', monospace;
   font-size: 0.9em;
   margin-left: 0 px;
   color: rgb(0, 0, 0);
   
}


.contact {
   color: rgb(13, 74, 88);
   font-family: 'Xanh+Mono', monospace;
   text-decoration:underline;
   font-size: 15px;
   text-transform: lowercase;
   background-color: rgb(255, 255, 255);
 margin-left: 20px;
   border: none;
}

.contact-link {
  margin-top: 20px;
   
  
   margin-bottom: 30px;
}

.contact:hover {
   opacity: 1;
   color: rgb(227, 85, 3);
   cursor:crosshair
}

.contact:active {
   opacity: 0.5;
}

.project{
      width: 70%;
}

.project-preview {
   margin-right: 1px;
   margin-bottom: 1px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
}


.project-name {
   vertical-align: left;
   display: inline-block;
   margin-bottom: 1px;
}

.project-tags {
   display: inline-block;
   width: 80 px;
   vertical-align: bottom;
   margin-bottom: 10px;
}

.tags {
   font-family: 'Xanh+Mono', monospace;
   margin-top: 7px;
   font-size: 12px;
   font-weight: 200;
   color: rgb(11, 99, 93);
   display: inline-block;
   width: 80 px;
}


.title {
   font-family: 'Xanh+Mono', monospace;
   margin-top: 7px;
   font-size: 14px;
   color: rgb(0, 0, 0);
   display: inline-block;
   width: 200px;

}

.carousel-image {
   width: 100%;
}


/*.carousel {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-size: cover;
      background-position: center;
      transition: background-image 0.6s ease-in-out;
      cursor: pointer;
    } */

.carousel {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-size: cover;
   background-position: center;
   transition: background-image 0.6s ease-in-out;
   cursor: help;
}

@media (max-width: 800px) {

  .grid-images {
   display: grid;
   grid-template-columns: 1fr;
   column-gap: 10px;
   row-gap: 20px;
}
   .project-photo {
   flex: 1;
   width: 100%;
   object-fit: contain;
   flex-shrink: 0;
   margin-bottom: 5%;   

}

.project{
      width: 100%;
}
.contact-grid {
   display: grid;
   grid-template-columns: 1fr;
   object-fit: contain;
   flex-shrink: 0;
   margin-bottom: 5%
}
.intro {
   display: grid;
   grid-template-columns: 2fr;
   object-fit: contain;
   flex-shrink: 0;
   margin-bottom: 5%
}
}