body,.body2,.body3,.body4 {
    background-image: linear-gradient(to right, lightblue, rgb(139, 139, 216));
    margin: 0;
    display: flex;
    flex-direction: column;
}

.body2 {
    background-image: url("https://whyy.org/wp-content/uploads/2022/02/reading-teminal-market-pandemic-AP-01-022222.jpg");
}
.body3 {
    background-image: url("https://i.ytimg.com/vi/kril_AbZt_w/maxresdefault.jpg");
}
.body4 {
    background-image: url("https://www.postmediasolutions.com/wp-content/uploads/2022/03/linkedin-personal-branding-1024x536.png");   
}
main {
    margin: 30px;
    padding: 20px;
    background-image: linear-gradient(to right, gray,white, gray);
    box-shadow: 0 0 10px;    
    display: flex; 
    align-items: center;
    justify-content: center;
}

main.altpages {
    margin: 30px 300px;
    flex-direction: column;
    align-items: normal;
    width: auto;
    height: 50%;
    line-height: 2;
}

.pfpside {
    display: flex;
    flex-direction: column;
    flex: 1 1 20%;
    gap: 20px;
}
.pfp {
    height: 50%;
    width: 50%;
    box-shadow: 5px 5px 10px black;
    transition: 0.5s;
}
.pfpname {
    margin: 5px 5px 5px 0px;
    font-size: 40px;
    font-weight: 700;
    text-shadow: 0 0 5px red;
}

.pfp:hover {
    box-shadow: 5px 5px 10px gray, 0 0 20px yellow, 0 0 40px orange; 
}
.contact {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    background-image: linear-gradient(black,gray,black);
    color: white;
    margin: 0 50px 0 0;
    padding: 20px;
    border: solid 7.5px;
    border-radius: 20px;
    align-self: start;
}
.contact p {
    margin: 5px;
}
.contactheading {
    font-family: "impact", sans-serif;
    font-size: 30px;
}
.foursources {
    flex: 1 1 50%;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
}

.foursources div
{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 7.5px 7.5px 15px 5px black;
    font-family: "impact", sans-serif;
    padding: 20px;
    transition: 0.5s;
    box-sizing: content-box
}

.foursources div:hover {
    filter: hue-rotate(90deg);
    box-shadow: 7.5px 7.5px 15px 5px black, 7.5px 7.5px 30px 5px yellow ;
}

h5.test { 
    color: white;
    font-size: 40px;
    text-shadow: 0 0 10px;
    text-align: center;
}

.culturalsemiotics {
    background-image: url("https://www.sevanoland.com/uploads/1/1/8/0/118081022/x635802178006635907-1295440718-edl-logo1-imgopt1000x70-720x400-jpg-pagespeed-ic-5mohnns-bu_orig.jpg")
}
.identifyingbias {
    background-image: url("https://i.guim.co.uk/img/static/sys-images/Guardian/Pix/pictures/2014/5/12/1399913833176/Information-overload-wisd-011.jpg?width=620&dpr=2&s=none");
}
.brand {
    background-image: url("https://graduate.northeastern.edu/resources/wp-content/uploads/sites/4/2017/06/At-Work-Hero.jpg");
}

footer {
    background-color: gray;
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: center;
    align-items: center;
    
}
blockquote {
    text-indent: -40px;
    margin-top: 0px;
}
button {
    background-image: linear-gradient(to right, red,gray,red);
    color:white;
    border: groove 5px gray;
    border-radius: 20px;
    padding: 10px;
    font-family: impact;
    font-size: 40px;
    text-shadow: 0 0 10px;
    margin: 10px;
    transition: 0.5s;
}
button:hover {
    filter: hue-rotate(90deg);
    cursor: pointer;
}
a {
    text-decoration: none;  
}
a.div {
    flex: 1 0 0;
}

h3 {
    text-align: center;
    font-family: "impact";
    font-size: 20px;
    margin: 0px;
}