body{
    font-family: "Be Vietnam Pro";
    display: flex;
    flex-direction: column;
    margin: 0;
    align-items: center;
    box-sizing: border-box;
}

.navbar{
    width: 100%;
    height: 10vh;
    justify-content: end;
    background-color: #7f9f8e;
    color: #e3e7d7;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: end;
    box-sizing: border-box;
    padding: 1vw;
}

.links-list{
    list-style-type: none;
    width: auto;
    margin: 0;

}

.nav-item{
    float: right;
}

#homepage{
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: #e3e7d7;
    justify-self: flex-start;
    margin-right: auto;
}

#homepage:hover{
    text-decoration: underline;
}

.nav-link{
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    color: #e3e7d7;
}

.nav-item:hover{
    text-decoration: underline;
}

.links{
    float: right;
    padding: .5rem;
}

.intro-container{
    margin-top: 5vh;
    margin-bottom: 5vh;
    width: 80%;
    height: 60%;
    display: flex;
    align-items: flex-end;
    font-size: 2rem;
    flex-direction: column;
}

.intro-container p{
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
}

#main-image{
    height: 45vh;
    width: auto;
    align-self: baseline;
}

.projects-preview{
    width: 100%;
    background-color: #e3e7d7;
    display: flex;
    align-items: center;
    flex-direction: column;

}

.projects-container{
    width: 80%;
    margin-top: 10vh;
    margin-bottom: 10vh;
}
.project-link{
    display: block;      
    width: 100%;         
    text-decoration: none; 
    cursor: pointer; 
    color: inherit;    
}

.projects{
    width: 100%;
    height: auto;
    margin-top: 5vh;
    background-color: white;
    display: flex;
    flex-direction: row;

    border-radius: 4px;
    border-width: 0;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
    box-sizing: border-box;
    text-decoration: none;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
}

.projects:focus {
    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.projects:hover {
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    transform: translateY(-2px);
}

.projects:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
}

.project-thumbnail {
    width: 100%;
    height: auto;
}

.project-desc-text{
    padding-left: 3%;
    padding-right: 3%;
    width: 99%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-title{
    margin:0; 
    text-decoration: underline;
}

/* CSS */
#projects-button {
    margin-bottom: 10vh;
    align-items: center;
    appearance: none;
    background-color: #FCFCFD;
    border-radius: 4px;
    border-width: 0;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
    box-sizing: border-box;
    color: #36395A;
    cursor: pointer;
    display: inline-flex;
    font-family: "Be Vietnam Pro";
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow,transform;
    font-size: 18px;
    margin: 20px;
}

#projects-button:focus {
    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

#projects-button:hover {
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    transform: translateY(-2px);
}

#projects-button:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
}

/* about me page */
.about-me-body{
    width: 100%;
    height: 90%;
    background-color: #e3e7d7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-me-container{
    width: 60%;
    height: auto;
    display: flex;
    flex-direction: row;
}

.about-me-text{
    padding: 10px;
    width: 60%;

}

.about-me-pic{
    width: 30%;
    height: auto;
}

/* project descriptions */
.content-container{
    width: 60%;
    height: auto;
    display: flex;
    flex-direction: column;
    margin-top: 10vh;
    font-weight: 300;
    font-size: large;
}

.content-pic-container{
    height: 30vh;
    width: auto;
}

.project-thumbnail{
    object-fit: cover;
}

.meowdy-sketches{
    width: 140%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: space-evenly;
    margin-top: 20px;
    margin-bottom: 20px;
}

.meowdy-doc{
    width: 30%;
}

.poster-grid{
    width: 150%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 120vh;
    align-self: center;
    align-content: space-around;
    justify-content: space-around;

}

.poster-final{
    width: 32%;
    height: auto;
}

.iframe-wrapper{
    width: 120%;
    aspect-ratio: 16/9;
    align-self: center;
}