@font-face{
    font-family: 'AvenirLTStd-Roman';
    src: url('../font/AvenirLTStd-Roman.otf') format('opentype');
}

@font-face{
    font-family: 'Kanit-Light';
    src: url('../font/Kanit-Light.ttf') format('truetype');
}

@font-face{
    font-family: 'Metropolis-Light';
    src: url('../font/Metropolis-Light.otf') format('opentype');
}

#homeImage{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-home{
    padding-left: 2em;
}

.portfolioInformation{
    grid-column: span 4;
}

.masonry{
    padding: 2em 0 0 1em
}

.item1about{
    grid-column: span 2;
}

.item2about{
    grid-column: span 2;
    grid-row: 2;
}

.item3{
    grid-row: 3;
    grid-column: span 2;
}

.form-container{
    grid-template-columns: 2fr;
}

.form-left{
    grid-column: 1;
}

.form-middle{
    grid-column: 2;
}

.form-right{
    grid-column: 1;
    grid-row: 2;
    padding: 0 0 0 0;
}

.form-right img{
    width: 30vw;
    height: auto;
}