body{background-image: linear-gradient(90deg,#003f5c, #58508d, #bc5090, #ff6361, #ffa600);
    color: white;
    font-family:'Courier New', Courier, monospace;
}

header{
    margin-bottom: 30px;
}

button {
    background-color:rgb(106, 140, 253);
    border:3px solid black;
    color:black;
    border-radius:10px;
    font-size: 20px;
    padding: 5px;
    height: 40px;
    margin-bottom: 30px;
    
}
button:hover {background-color:rgb(119, 68, 238); color: white;
}

img{width: 100%;
    height: 100%;
}
img:hover{
    box-shadow: 0px 0px 10px 10px rgb(0, 255, 76);
}

.content p{font-size: x-large;
    align-self: center;
    text-align: center;
    margin: 20px;
    text-shadow: 5px 2px 5px black;
}

.content{
    margin: 1em;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 40px;
}

@media (min-width: 1000px){

    header{
        margin-bottom: 60px;
    }
    
    button {
        height: 40px;
        margin-left: -15px;
    }
    
    .content{
        display: grid;
        grid-template-columns: repeat(7,1fr);
        grid-template-rows: 1fr 4fr 5fr 4fr 1fr;
        grid-template-areas: 
        "prototypeImg prototypeImg prototypeImg prototypeImg prototypeImg prototypeImg last"
        "prototypeImg prototypeImg prototypeImg prototypeImg prototypeImg prototypeImg protoInfo"
        "info textP textP textP textP textP textP"
        "website website website website website website wellness"
        "website website website website website website first";
        row-gap: 30px;
        margin-right: 10px;
        margin-bottom: 10px;
    }

    #prototype{
        grid-area: prototypeImg;
    }
    
    #golast{
        grid-area: last;
        align-self: center;
    }
    
    #prototypeInfo{
        grid-area: protoInfo;
    }
    
    #resume{
        grid-area: textP;
    }
    #resumeInfo{
        grid-area: info;
    }
    #website{
        grid-area: website;
    }
    
    #wellnessInfo{
        grid-area: wellness;
    }
    
    #gofirst{
        grid-area: first;
    }
}