/* @font-face {
  font-family: MuleBook;
  src: url(../website02/font/WOFFtrial/MuleTrial-Book.woff2);
}
@font-face {
  font-family: MuleRegular;
  src: url(../website02/font/WOFFtrial/MuleTrial-Regular.woff2); 
} */

@font-face {
  font-family: MuleLight; /* set name */
  src: url(../font/Mule-Light-Web/Mule-Light.woff2); /* url of the font */
}
@font-face {
  font-family: MuleLightItalic; /* set name */
  src: url(../font/Mule-LightItalic-Web/Mule-LightItalic.woff2); /* url of the font */
}

body {
    margin: 0;
    overflow-x: hidden;

}

h1 {
    margin: 0;
    color: #4CB366;
    font-family: MuleLight;
    /* font-size: 11.5vh; */
    font-size: 11vh;
    line-height: 11vh;
}

h3 {
    font-family: MuleLight;
    color: #4CB366;
    font-size: 2.5vh;
}

.body-grid-container {
    width: 100vw;
    /* margin: 0 0.37%; */
    display: grid;
    grid-template-areas: "left middle right";
    grid-template-columns: 1fr 35fr 1fr;
}

.body-grid-item {
    grid-area: middle;
}

.nav-grid-container {
    padding: 1.48% 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;


    justify-items: center;
    align-items: center;
}

.nav-grid-items {
    font-family: MuleLight;
    text-decoration: none;
    color: #4CB366;
    font-size: 2.5vh;
}

.nav-left {
    justify-self: flex-start;
}
.nav-right {
    justify-self: flex-end;
}


.header-grid-container {
    display: grid;
    grid-template-areas: "left right";
    grid-auto-flow: column;
    grid-template-columns: 4fr 2fr;
}

.header-grid-items {
    margin: 0;
}

img {
     /* height: 52.17vh; */
    width: 100%;
}

.img-left {
    align-self: center;
}

.section-grid-container {
    padding: 4.1vh 0 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.portfolio-section-grid-container {
    padding: 0 0 12vh 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.portfolio-section-grid-items-right {
    grid-template-areas: 
    "upper"
    "lower";
    display: grid;
    grid-template-rows: 0fr 0fr;
}

.portfolio-section-grid-items-left {
    grid-template-areas: 
    "upper"
    "lower";
    display: grid;
    grid-template-rows: 0fr 0fr;
}

.portfolio-img-left {
    grid-area: upper;
}

.portfolio-img-right {
    grid-area: lower;
}

.portfolio-project-description-container {
    grid-template-areas: 
    "upper"
    "textBox"
    "lower";
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
}

.portfolio-project-description {
    grid-area: textBox;
    font-family: MuleLight;
    color: #4CB366;
    font-size: 2.5vh;
}

.skill-grid-container {
    /* padding: 19.1vh 0 10vh 0; */
    padding: 19.1vh 0 30.5vh 0;
    display: grid;
    grid-template-areas: "left middle right";
    grid-template-columns: 1fr 1fr 1fr;
    font-family: MuleLight;
    color: #4CB366;
    font-size: 2.5vh;
}

.footer-grid-container {
    width: 100vw;
    z-index: 1;
    display: grid;
    grid-template-areas: "left middleL middleR right";
    grid-template-columns: 1fr 17.5fr 17.5fr 1fr;
    position: fixed;
    background-color: white;
    bottom: 0;
}

.footer-grid-item-left {
    grid-area: middleL;
    font-family: MuleLight;
    color: #4CB366;
    font-size: 2.5vh;
}
.footer-grid-item-right {
    grid-area: middleR;
    text-align: end;
    font-family: MuleLight;
    color: #4CB366;
    font-size: 2.5vh;
}

.showroom-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.showroom-grid-info-middle {
    padding-top: 28vh;
}

.showroom-grid-info-right {
    padding-top: 56vh;
    padding-bottom: 28vh;
}

.showroom-highlight-text {
    grid-area: right;
}