body { margin: 0; }
nav{
    background-color: #fafafa;
    border-bottom: 1px solid lightgray;
    /* min-height: 50px; */
    position:fixed;
    font-size: 24px;
    top: 0;
    width: 100%;
    padding: 40px;
    z-index: 10;
}
#placeholder1{
    height: 2vw;
}
div{
    text-decoration: none;
}
.cta:hover{
    cursor: pointer;
    background-color: #222;
    color: #fafafa;
}

.projectpagebackgroundcolor{
    padding: 40px;
    border-radius: 10px;
}

.purple{
    background-color: #F1EBFF;
    border: #F1EBFF 2px solid;
}

.purple:hover{
    border: #9747FF 2px solid;
    transition-duration: 0.6s;
}

.green{
    background-color: #E6F6EA;
    border: #E6F6EA 2px solid;
}

.green:hover{
    border: #00A94E 2px solid;
    transition-duration: 0.6s;
}

.orange{
    background-color: #FBF4E7;
    border: #FBF4E7 2px solid;
}

.orange:hover{
    border: #F88F24 2px solid;
    transition-duration: 0.6s;
}

.blue{
    background-color: #E7F3FB;
    border: #E7F3FB 2px solid;
}

.blue:hover{
    border: #00ADD8 2px solid;
    transition-duration: 0.6s;
}

.hovernotclickable{
   cursor: no-drop; 
}

.hoverhand{
    cursor: pointer;
}

/*mobile*/
@media only screen and (max-device-width: 500px) {
    #websitename{
        color:#222;
        text-decoration-line: none;
    }
    #websiteabout{
        margin-right: 8vw;
        float: right;
        color:#222;
        text-decoration-line: none;
    }
    a { color: #222; }
    .top{
        position: fixed;
        margin: 0;
        margin-top: -41vw;
        padding: 0;
/*        height: 14vw;*/
        width:100vw;
        z-index: 10;
    }
    .menu{
        position: absolute;
        /* font-size: 4vw; */
        margin-left: 0vw;
        margin-right: 3vw;
        text-decoration: underline;
        text-decoration-color: #fafafa;
    }
    #txt{
        position: absolute;
        /* font-size: 6vw; */
        margin-top: 61vw;
    }
    .indexintro{
        margin: auto;
        margin-top: 40vw;
        width: 90vw;
    }
    .hiteam{
        /* font-size: 4vw; */
        /* margin-top: 40vw; */
        margin-bottom: 2vw;
    }
    .myslogan{
        font-size: 80px;
        margin-top: 10vw;
    }
    .intro2{
        position: absolute;
        /* font-size: 6vw; */
        margin-top: 69vw;
    }
    .intro3{
        position: absolute;
        /* font-size: 6vw; */
        margin-top: 77vw;
    }
    .indexphoto{
        width: 100%;
        border-radius: 0.5vw;
    }
    .moving1{
        /* font-size: 10vw; */
        line-height: 12vw;
        position: absolute;
        margin: 0;
        padding:0;
        margin-top: 33.6vw;
    }
    #quote{
        /* font-size: 10vw; */
        line-height: 11vw;
    }
    .project{
        display: none;
    }
    .project2{
        display: none;
    }
    .indexprojecttext{
        display: none;
        opacity: 0;
    }
    .indexproject{
        display: block;
        width: 80vw;
        margin: auto;
    }
    .indexproject1{
        margin-bottom: 10vw;
    }
    .indexproject2{
        margin-bottom: 4vw;
    }
    .tag{
        /* font-size: 32px; */
        display: inline-block;
        border-radius: 50px;
        backdrop-filter: blur(4.5px);
        border: 1px solid #222;
        padding: 6px;
        padding-bottom: 16px;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 20px;
        margin-right: 0.5vw;
    }
    #placeholder1{
        height: 5vw;
    }
    .indexcopy{
        width: 100%;
        margin-top: 28px;
        padding-bottom: 28px;
    }
}

/* desktop layout*/
@media screen and (min-device-width: 501px) and (max-device-width: 1300px) {
    nav{
        /* font-size: 20px; */
        padding: 30px;
    }
    #websitename{
        /* font-size: 20px; */
        text-decoration-line: none;
    }
    #websiteabout{
        margin-right: 6vw;
        float: right;
        text-decoration-line: none;
    }
    .indexproject{
        display: grid;
        grid-template-areas:'left right';
        gap: 40px;
        max-width: 96%;
        /* padding-top: 16px; */
        /* margin: auto; */
    }
    .indexproject1{
        grid-area: left;
        width: 43vw;
        max-width: 500px;
        /* padding-top: 16px; */
    }
    .indexproject2{
        grid-area: right;
        width: 35vw;
        max-width: 400px;
        /* padding-top: 16px; */
    }
    .indexphoto{
        width: 100%;
        border-radius: 0.5vw;
    }
    .indexcopy { width: 100%; line-height: 34px; padding-bottom: 16px; }
    .top{
        position: fixed;
        background-color: none;
        margin: 0;
        margin-top: -4vw;
        padding: 0;
        height: 8.5vw;
        width:100vw;
        z-index: 10;
    }
    .menu{
        /* font-size: 1.9vw; */
        margin-left: 0vw;
        margin-right: 3vw;
        position: absolute;
        text-decoration: underline;
        /* text-decoration-color: #fafafa; */
    }
    .indexintro{
        width: 80vw;
        padding-top: 20vw;
    }
    .hiteam{
        /* font-size: 28px; */
        margin-bottom: 20px;
    }
    .myslogan{
        /* font-size: 60px; */
    }

    .indexbio{
        /* font-size: 2.4vw; */
        width: 70vw;
        padding-top: 5vw;
        margin-left: 7vw;
    }
    .intro2{
        /* font-size: 28px; */
        position: absolute;
        top: 500px;
        left: 16vw;
    }
    .intro3{
        /* font-size: 28px; */
        position: absolute;
        top: 500px;
        left: 23vw;
    }
    .intro4{
        /* font-size: 28px; */
        position: absolute;
        top: 500px;
        left: 32vw;
    }
    #placeholder1{
        height: 2vw;
    }
    #txt{
        position: absolute;
        top: 500px;
        left: 4vw;
        /* font-size: 28px; */
    }
    .move { position: absolute; margin: 0; padding: 0; margin-left: 5vw; margin-top: -46vw; }
    .indexprojecttext{
        display:block; 
        height: 1000; 
        width: 50vw; 
        /* font-size: 28px;  */
        margin-bottom: 1vw;
    }
    .tag{
        display: inline-block;
        border-radius: 2vw;
        backdrop-filter: blur(4.5px);
        border: 1px solid #222;
        padding: 6px;
        padding-left: 12px;
        padding-right: 12px;
        margin-top: 20px;
        margin-right: 0.5vw;
    }
    #indexsection{
        width: 90%;
        margin: auto;
        /* background-color: blue; */
    }
}

/* large desktop layout*/
@media screen and (min-device-width: 1301px) {
    #navwidth{
        max-width: 1450px;
        margin: auto;
    }
    nav{
        /* font-size: 28px; */
        padding: 30px;
    }
    #websitename{
        text-decoration-line: none;
    }
    #websiteabout{
        text-decoration-line: none;
        margin-right: 3vw;
        float: right;
    }
    .indexproject{
        display: grid;
        grid-template-areas:'left right';
        gap: 40px;
        max-width: 1400px;
        margin: auto;
    }
    .indexproject1{
        grid-area: left;
        width: 680px;
        /* padding-top: 16px; */
    }
    .indexproject2{
        grid-area: right;
        width: 600px;
        /* padding-top: 16px; */
    }
    .indexphoto{
        width: 100%;
        border-radius: 0.5vw;
    }
    .indexcopy { width: 100%; line-height: 34px; padding-bottom: 16px; }
    .top{
        position: fixed;
        background-color: none;
        margin: 0;
        margin-top: -4vw;
        padding: 0;
        height: 8.5vw;
        width:100vw;
        z-index: 10;
    }
    .menu{
        /* font-size: 1.9vw; */
        margin-left: 0vw;
        margin-right: 3vw;
        position: absolute;
        text-decoration: underline;
        /* text-decoration-color: #fafafa; */
    }
    .indexintro{
        width: 60vw;
        padding-top: 11vw;
    }
    .hiteam{
        /* font-size: 28px; */
        margin-bottom: 20px;
        max-width: 1000px;
    }
    .myslogan{
        /* font-size: 50px; */
        max-width: 1000px;
    }

    .indexbio{
        /* font-size: 2.4vw; */
        width: 70vw;
        padding-top: 5vw;
        margin-left: 7vw;
    }

    .intro2{
        /* font-size: 28px; */
        position: absolute;
        top: 500px;
        left: 16vw;
    }

    .intro3{
        /* font-size: 28px; */
        position: absolute;
        top: 500px;
        left: 23vw;
    }

    .intro4{
        /* font-size: 28px; */
        position: absolute;
        top: 500px;
        left: 32vw;
    }

    #placeholder1{
        height: 2vw;
    }

    #txt{
        position: absolute;
        top: 500px;
        left: 4vw;
        /* font-size: 28px; */
    }
    .move { position: absolute; margin: 0; padding: 0; margin-left: 5vw; margin-top: -46vw; }
    .indexprojecttext{
        display:block; 
        height: 1000; 
        width: 50vw; 
        /* font-size: 28px;  */
        margin-bottom: 1vw;
    }

    .tag{
        display: inline-block;
        border-radius: 2vw;
        backdrop-filter: blur(4.5px);
        border: 1px solid #222;
        padding: 6px;
        padding-left: 12px;
        padding-right: 12px;
        margin-top: 20px;
        margin-right: 0.5vw;
    }
    #indexsection{
        width: 1400px;
        overflow:hidden;
        margin: auto;
        /* background-color: red; */
    }
}