@charset "UTF-8";

/* INDIVIDUAL STYLES FOR EACH STUDENT PROFILE PAGE */
/* INDIVIDUAL STYLES FOR EACH STUDENT PROFILE PAGE */
/* INDIVIDUAL STYLES FOR EACH STUDENT PROFILE PAGE */
/* INDIVIDUAL STYLES FOR EACH STUDENT PROFILE PAGE */


#profile {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
      background-image: url("img/profile-img.jpg");
}

#thumbnail-1 a {
    height: 400px;
    width: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 10px;
     background-image: url("img/thumbnail1.jpg");
}

#thumbnail-2 a {
    height: 400px;
    width: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 10px;
     background-image: url("img/thumbnail2.jpg");
}

#thumbnail-3 a {
    height: 400px;
    width: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin: 10px;
        background-image: url("img/thumbnail3.jpg");
}
#thumbnail-1 a:hover, #thumbnail-2 a:hover, #thumbnail-3 a:hover {
   opacity: 0.5;
   
}

#piece1 #cover-image {
    height: 100vh;
    background-size: cover;
    background-position: center;
      background-image: url("img/piece-1/1.jpg");
}

#piece2 #cover-image {
    height: 100vh;
    background-size: cover;
    background-position: center;
      background-image: url("img/piece-2/1.jpg");
}

#piece3 #cover-image {
    height: 100vh;
    background-size: cover;
    background-position: center;
       background-image: url("img/piece-3/1.jpg");
}

@media screen and (max-width: 768px) {
    #profile {
        padding: 0 20px;
        text-align: center;
        flex-direction: column;
        justify-content: center;
        background-attachment: scroll;

    }

  
}