/* Global */
@import url(global.css);
@import url(project.css);
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap');

.gridDisplay{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}
main img{
    width: 100%;
    object-fit: cover;
}

*{
    /* border: 1px red solid; */
    box-sizing: border-box;
}

/* /////PAGE///// */
/* //Overview// */
/* My efforts and Team */
#mainTitle h1{
    background: linear-gradient(90deg, #66C3D4 2.56%, #6ACBB7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 0px 7px rgba(255, 255, 255, 0.20);
}


#effortTeam{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 18px;
}
#effortTeam div{
    font-weight: 300;

    padding: 20px;
    border: var(--border);
    border-radius: 10px;
}

#mainTitle img{
    width: 55px;
}

/* //Discover// */
#discover h4{
    color: var(--discoverColor)
}
#interviewIntro{    
    margin-bottom: var(--secBottom);
}
#interviewIntro p{
    margin-top: 0;
}
#interviewIntro img{
    border-radius: 10px;
}

.insights{    
    margin-bottom: 40px;
}
.insights p{
    margin-top: 5px;
}
.insightFindings{
    color: #fff;
}



/* //Define// */
#personaText{
    margin-top: 0;
}
#persona{
    margin-bottom: var(--secBottom);
}
#persona img{
    border-radius: 10px;
}


.storyboard{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;

    margin-bottom: 30px;
}



/* //Develop// */
/* UI */
#uiSketchContainer {
    margin-bottom: var(--secBottom);
}
#uiSketches{
    border-radius: 10px;
}
#uiSketchContainer p{
    margin-top: 8px;
}

#moodboard{
    margin-bottom: var(--secBottom);
}
#moodboard p{
    /* margin-top: 0; */
}

#styleGuides{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;

    margin-bottom: var(--secBottom);
}
#styleGuides img{
    border-radius: 10px;
}

#hifiPrototype{
    margin-bottom: 80px;
}


/* Kiosk */
#kioskSketches{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;

    margin-bottom: var(--secBottom);
}

#kioskSketches img{
    max-height: 269px;
}

#digitalDesign{
    margin-bottom: var(--secBottom);
}
#digitalDesign p{
    margin-top: 0;
}

.prototypeGrid{
    margin-bottom: var(--secBottom);
}
.prototypeGrid div{
    width: 100%;
}
.buildSteps{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}


/* Overlay */
.imgContainer{    
    position: relative;
    display: flex;
}
.imgContainer p{
    margin-top: 0;
    margin-bottom: 15px;

    line-height: 1.4;
}
.imgContainer .prototypeDescription{
    margin-bottom: 30px;
    
}



.overlay {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);

    opacity: 0;
    transition: 0.2s;
}
.overlay p, .steps{
    color: #fff;
    font-family: 'Roboto Mono','Courier New', Courier, monospace;
}
.overlay:hover, .overlay:active{
    opacity: 1;
}
.overlayContent{
    position: absolute;
    bottom: 0;
    padding: 0 15px;
}
.bigDisplay .overlayContent{
    padding: 0 20px;
}


/* Spray painting */
#sprayPaint{
    margin-bottom: var(--secBottom);
}
#sprayPaint h5, #paintDescription{
    margin: 0;
}



/* ///Deliver/// */
#userTesting{
    margin-bottom: var(--secBottom);
}
#userTesting img{
    border-radius: 10px;
}



/* ///Responsive Design/// */
@media only screen and (max-width: 767px), 
screen and (max-height: 480px){
    .gridDisplay{
        grid-template-columns: 1fr;
        gap: 5px;
    }
    /* Overview */
    #effortTeam{
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
    }

    /* //define// */
    .storyboard{
        gap: 5px;

        margin-bottom: var(--secBottom);
    }

    /* Develop */
    #styleGuides, #kioskSketches, .buildSteps{
        gap: 5px;
    }
}