* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

a {
    
    color: whitesmoke; 
    text-decoration: none;

}
.nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    width: 100vw;
    padding: 5px;
     background-image: url(media/bgblue2.jpg);  
    overflow: hidden;
    border-bottom: 2px solid black;
    z-index: 1;
}

.nav ul li {
  display: inline-flex;
  position: relative;
  justify-content: space-around;
  left: -20px;
  
}

.nav ul li a {
  text-decoration: none;
  color: whitesmoke;
  font-size: 18px;
  top: 0;  
}

.nav ul li a:hover {
    color: darkgrey;
}

#hi {
  
  display: inline-block;
  position: relative;
  top: -60%;
  left: -20%;
  margin: 0 auto;
  font-size: 32px;
  z-index: 2;

}

#welcome-section span {
    
    color: teal;
}

#welcome-section subtitle {
  
  display: inline-block;
  position: relative;
  top: -50%;
  left: 61.5%;
  margin: 0px auto;
  color: ghostwhite;
  font-family: monospace;
  font-size: 30px; 
  word-break: break-all;
  z-index: 2;

}

#welcome-section {
  height: 100vh;
  width: 99.99%;
  color: whitesmoke;
  background-image: url(media/bgdark.jpg);
}

#welcome-section img {
    display: inline-block;
    position: relative;
    height: 99%;
    top: 50px;
    left: 31%;
    z-index: 1;
}


/* ----------PROJECTS SECTION-----------*/





#my-projects {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: relative;
  top: 5px;
  margin-left: 47%;
}



.projects-section {
    
    position: absolute;
    width: 99.99%;
    height: 110%;
     background-image: url(media/bgblue.jpg);
}

.project-wrapper {
    
    display: flex;
    position: relative;
    top: 5%;
    width: 100%;
    column-gap: 200px;
    grid-row-gap: 200px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

.project-tile {

  position: relative;
  border: 2px solid white;
  width: 15vw;
  height: 25vh;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

figcaption {
    
    position: absolute;
    text-align: center;
    width: 100%;
    top: 105%;
    color: whitesmoke;    
}

figcaption:hover {
        
    text-decoration: underline;
    color: darkgray;

}

.project-tile img {
    
    position: absolute;
    width: 15vw;
    height: 25vh;
    transition: opacity 1s ease-in-out;
}

.project-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}

#show-all {
    
    display: inline-block;
    position: relative;
    top: 575px;
    width: 100%;
    text-align: center;
}

#show-all a:hover {
    
    color: darkgray;
    text-decoration: underline;
}



/* ----------SOCIALS SECTION-----------*/




#socials-section {
    
    position: absolute;
    width: 99.99%;
    height: 100vh;
    top: 200%;
    background-image: url(media/bgdark.jpg);
}

#together {
    
  position: absolute;
  color: whitesmoke;
  top: 50%;
  left: 40.5%;
  margin: 0 150 0 150;
  font-size: 32px;
}

#sub2 {
  position: absolute;
  top: 55.5%;
  left: 35%;
  margin: 0 150 0 150;
  color: teal;
  font-family: monospace;
  font-size: 24px; 
}

.social-wide {
    
    display: inline-flex;
    position: relative;
    height: 50px;
    top: 70%;
    color: teal;
    margin-left: 45.5%;
}

.social-wide a {
    
    color: teal;
}

.social-wide a:hover {
    
    color: darkgray;
    text-decoration: underline;
    /* transform: translate(0px, -8px); 
    Need to get this to shift down a few pixels for the effect.
    */ 
}

.certs-wrapper {
    
    display: flex;
    position: absolute;
    top: 55px;
    width: 100%;
    grid-gap: 50px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

#my-certs {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: absolute;
  top: -35px;
}

.certs-tile {

  position: relative;
  border: 2px solid white;
  width: 15vw;
  height: 25vh;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

.certs-tile img {
    
    position: absolute;
    width: 15vw;
    height: 25vh;
    transition: opacity 1s ease-in-out;
}

.certs-tile img.resp1 {
    
    filter: invert(100%);
}


.certs-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}


#bottom {
    
    position: absolute;
    width: 100%;
    height: 5px;
    right: 0;
    top: 95%;
    background-color: teal;
}

#copyright {
    
  position: absolute;
  color: whitesmoke;
  top: 96.5%;
  left: 45.5%;
  margin: 0 150 0 150;
  font-size: 18px;
}


/*************************************BIG Laptop**************************************************************/

/*************************************BIG Laptop**************************************************************/


@media only screen and (max-width: 1200px) and (min-width: 993px) {
 

#hi {
  
  display: inline-block;
  position: relative;
  top: -60%;
  width: 30%;
  left: -30%;
  margin: 0 auto;
  font-size: 1.5em;;
  z-index: 2;

}

#welcome-section span {
    
    color: teal;
}

#welcome-section subtitle {
  
  display: inline-block;
  position: relative;
  top: -50%;
  left: 61.5%;
  margin: 0px auto;
  color: ghostwhite;
  font-size: 1.5em; 
  word-break: break-all;
  z-index: 2;

}

#welcome-section {
  height: 100vh;
  width: 99.99%;
  color: whitesmoke;
  background-image: url(media/bgdark.jpg);
}

#welcome-section img {
    display: inline-block;
    position: relative;
    height: 99%;
    top: 50px;
    left: 27%;
    z-index: 1;
}


/* ----------PROJECTS SECTION-----------*/





#my-projects {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: relative;
  top: 5px;
  margin-left: 47%;
}



.projects-section {
    
    position: absolute;
    width: 99.99%;
    height: 110%;
    background-image: url(media/bgblue.jpg);
}

.project-wrapper {
    
    display: flex;
    position: relative;
    top: 5%;
    width: 100%;
    column-gap: 200px;
    grid-row-gap: 200px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

.project-tile {

  position: relative;
  border: 2px solid white;
  width: 17vw;
  height: 25vh;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

figcaption {
    
    position: absolute;
    text-align: center;
    width: 100%;
    top: 105%;
    color: whitesmoke;    
}

figcaption:hover {
        
    text-decoration: underline;
    color: darkgray;

}

.project-tile img {
    
    position: absolute;
    width: 17vw;
    height: 25vh;
    transition: opacity 1s ease-in-out;
}

.project-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}

    
/* ----------SOCIALS SECTION-----------*/



#socials-section {
    
    position: absolute;
    width: 99.99%;
    height: 100vh;
    top: 200%;
    background-image: url(media/bgdark.jpg);
}

#together {
    
  position: absolute;
  color: whitesmoke;
  top: 50%;
  left: 37%;
  margin: 0 150 0 150;
  font-size: 32px;
}

#sub2 {
  position: absolute;
  top: 55.5%;
  left: 28%;
  margin: 0 150 0 150;
  color: teal;
  font-family: monospace;
  font-size: 24px; 
}

.social-wide {
    
    display: inline-flex;
    position: relative;
    height: 50px;
    top: 70%;
    color: teal;
    margin-left: 43.5%;
}

.social-wide a {
    
    color: teal;
}

.social-wide a:hover {
    
    color: darkgray;
    text-decoration: underline;
    /* transform: translate(0px, -8px); 
    Need to get this to shift down a few pixels for the effect.
    */ 
}

.certs-wrapper {
    
    display: flex;
    position: absolute;
    top: 55px;
    width: 100%;
    grid-gap: 50px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

#my-certs {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: absolute;
  top: -35px;
}

.certs-tile {

  position: relative;
  border: 2px solid white;
  width: 17vw;
  height: 25vh;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

.certs-tile img {
    
    position: absolute;
    width: 17vw;
    height: 25vh;
    transition: opacity 1s ease-in-out;
}

.certs-tile img.resp1 {
    
    filter: invert(100%);
}


.certs-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}


#bottom {
    
    position: absolute;
    width: 100%;
    height: 5px;
    right: 0;
    top: 95%;
    background-color: teal;
}

#copyright {
    
  position: absolute;
  color: whitesmoke;
  top: 96.5%;
  left: 42.5%;
  margin: 0 150 0 150;
  font-size: 18px;
}

    
}
    
/*************************************Laptop**************************************************************/

/*************************************Laptop**************************************************************/


@media only screen and (max-width: 992px) and (min-width: 769px) {
 

#hi {
  
  display: inline-block;
  position: relative;
  top: -60%;
  left: -42%;
  width: 30%;
  margin: 0 auto;
  font-size: 1.5em;
  z-index: 2;

}

#welcome-section span {
    
    color: teal;
}

#welcome-section subtitle {
  
  display: inline-block;
  position: relative;
  top: -65.9%;
  left: 60.5%;
  width: 34%;
  padding-right: 27px;
  margin: 0px auto;
  color: ghostwhite;
  font-size: 1.5em; 
  word-break: break-all;
  z-index: 2;

}

#welcome-section {
  height: 100vh;
  width: 99.99%;
  color: whitesmoke;
  background-image: url(media/bgdark.jpg);
}

#welcome-section img {
    display: inline-block;
    position: relative;
    height: 99%;
    top: 50px;
    left: 20%;
    z-index: 1;
}


/* ----------PROJECTS SECTION-----------*/



#my-projects {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: relative;
  top: 5px;
  margin-left: 44.5%;
}


.projects-section {
    
    position: absolute;
    width: 99.99%;
    height: 110%;
    background-image: url(media/bgblue.jpg);
}

.project-wrapper {
    
    display: flex;
    position: relative;
    top: 5%;
    left: 1.5%;
    width: 97%;
    column-gap: 100px;
    grid-row-gap: 100px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

.project-tile {

  position: relative;
  border: 2px solid white;
  width: 19vw;
  height: 25vh;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

figcaption {
    
    position: absolute;
    text-align: center;
    width: 100%;
    top: 105%;
    color: whitesmoke;    
}

figcaption:hover {
        
    text-decoration: underline;
    color: darkgray;

}

.project-tile img {
    
    position: absolute;
    width: 19vw;
    height: 25vh;
    transition: opacity 1s ease-in-out;
}

.project-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}

    
/* ----------SOCIALS SECTION-----------*/



#socials-section {
    
    position: absolute;
    width: 99.99%;
    height: 100vh;
    top: 200%;
    background-image: url(media/bgdark.jpg);
}

#together {
    
  position: absolute;
  color: whitesmoke;
  top: 50%;
  left: 37%;
  margin: 0 150 0 150;
  font-size: 32px;
}

#sub2 {
  position: absolute;
  top: 55.5%;
  left: 22%;
  margin: 0 150 0 150;
  color: teal;
  font-family: monospace;
  font-size: 24px; 
}

.social-wide {
    
    display: inline-flex;
    position: relative;
    height: 50px;
    top: 70%;
    color: teal;
    margin-left: 43.5%;
}

.social-wide a {
    
    color: teal;
}

.social-wide a:hover {
    
    color: darkgray;
    text-decoration: underline;
    /* transform: translate(0px, -8px); 
    Need to get this to shift down a few pixels for the effect.
    */ 
}

.certs-wrapper {
    
    display: flex;
    position: absolute;
    top: 55px;
    width: 100%;
    grid-gap: 50px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

#my-certs {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: absolute;
  top: -35px;
}

.certs-tile {

  position: relative;
  border: 2px solid white;
  width: 19vw;
  height: 25vh;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

.certs-tile img {
    
    position: absolute;
    width: 19vw;
    height: 25vh;
    transition: opacity 1s ease-in-out;
}

.certs-tile img.resp1 {
    
    filter: invert(100%);
}


.certs-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}


#bottom {
    
    position: absolute;
    width: 100%;
    height: 5px;
    right: 0;
    top: 95%;
    background-color: teal;
}

#copyright {
    
  position: absolute;
  color: whitesmoke;
  top: 96.5%;
  left: 40.5%;
  margin: 0 150 0 150;
  font-size: 18px;
}

    
}

/*************************************TABLET**************************************************************/

/*************************************TABLET**************************************************************/


@media only screen and (max-width: 768px) and (min-width: 601px) {
 

#hi {
  
  display: inline-block;
  position: relative;
  top: -70%;
  left: 6%;
  width: 30%;
  margin: 0 auto;
  font-size: 1.5em;
  z-index: 2;

}

#welcome-section span {
    
    color: teal;
}

#welcome-section subtitle {
  
  display: inline-block;
  position: relative;
  top: -65.9%;
  left: 62.5%;
  width: 37%;
  margin: 0px auto;
  color: ghostwhite;
  font-size: 1.5em; 
  word-break: break-all;
  z-index: 2;

}

#welcome-section {
  height: 100vh;
  width: 99.99%;
  color: whitesmoke;
  background-image: url(media/bgdark.jpg);
}

#welcome-section img {
    display: inline-block;
    position: relative;
    height: 99%;
    top: 50px;
    left: 15%;
    z-index: 1;
}


/* ----------PROJECTS SECTION-----------*/



#my-projects {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: relative;
  top: 5px;
  margin-left: 44.5%;
}


.projects-section {
    
    position: absolute;
    width: 99.99%;
    height: 110%;
    background-image: url(media/bgblue.jpg);
}

.project-wrapper {
    
    display: flex;
    position: relative;
    top: 5%;
    left: 1.5%;
    width: 97%;
    column-gap: 100px;
    grid-row-gap: 100px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

.project-tile {

  position: relative;
  border: 2px solid white;
  width: 21vw;
  height: 25vh;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

figcaption {
    
    position: absolute;
    text-align: center;
    width: 100%;
    top: 105%;
    color: whitesmoke;    
}

figcaption:hover {
        
    text-decoration: underline;
    color: darkgray;

}

.project-tile img {
    
    position: absolute;
    width: 21vw;
    height: 25vh;
    transition: opacity 1s ease-in-out;
}

.project-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}

    
/* ----------SOCIALS SECTION-----------*/



#socials-section {
    
    position: absolute;
    width: 99.99%;
    height: 100vh;
    top: 200%;
    background-image: url(media/bgdark.jpg);
}

#together {
    
  position: absolute;
  color: whitesmoke;
  top: 50%;
  left: 31%;
  margin: 0 150 0 150;
  font-size: 32px;
}

#sub2 {
  position: absolute;
  top: 55.5%;
  left: 15%;
  margin: 0 150 0 150;
  color: teal;
  font-family: monospace;
  font-size: 24px; 
}

.social-wide {
    
    display: inline-flex;
    position: relative;
    height: 50px;
    top: 70%;
    color: teal;
    margin-left: 40%;
}

.social-wide a {
    
    color: teal;
}

.social-wide a:hover {
    
    color: darkgray;
    text-decoration: underline;
    /* transform: translate(0px, -8px); 
    Need to get this to shift down a few pixels for the effect.
    */ 
}

.certs-wrapper {
    
    display: flex;
    position: absolute;
    top: 55px;
    width: 100%;
    grid-gap: 50px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

#my-certs {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: absolute;
  top: -35px;
}

.certs-tile {

  position: relative;
  border: 2px solid white;
  width: 21vw;
  height: 25vh;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

.certs-tile img {
    
    position: absolute;
    width: 21vw;
    height: 25vh;
    transition: opacity 1s ease-in-out;
}

.certs-tile img.resp1 {
    
    filter: invert(100%);
}


.certs-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}


#bottom {
    
    position: absolute;
    width: 100%;
    height: 5px;
    right: 0;
    top: 95%;
    background-color: teal;
}

#copyright {
    
  position: absolute;
  color: whitesmoke;
  top: 96.5%;
  left: 38.5%;
  margin: 0 150 0 150;
  font-size: 18px;
}

    
}


/*************************************PHONE**************************************************************/

/*************************************PHONE**************************************************************/


@media only screen and (max-width: 600px) and (min-width: 401px) {
 

  .nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    width: 107vw;
    padding: 5px;
     background-image: url(media/bgblue2.jpg);  
    overflow: hidden;
    border-bottom: 2px solid black;
    z-index: 1;
}

#hi {
  
  display: inline-block;
  position: relative;
  top: -80%;
  left: 4%;
  width: 30%;
  margin: 0 auto;
  font-size: 1.5em;
  z-index: 2;

}

#welcome-section span {
    
    color: teal;
}

#welcome-section subtitle {
  
  display: inline-block;
  position: relative;
  top: -75%;
  left: 67%;
  width: 35%;
  margin: 0px auto;
  color: ghostwhite;
  font-size: 1.4em; 
  word-break: keep-all;
  z-index: 2;

}

#welcome-section {
  height: 100vh;
  width: 107vw;
  color: whitesmoke;
  background-image: url(media/bgdark.jpg);
  overflow: hidden;
}

#welcome-section img {
    display: inline-block;
    position: relative;
    height: 99%;
    top: 50px;
    left: 1%;
    z-index: 1;
}


/* ----------PROJECTS SECTION-----------*/



#my-projects {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: relative;
  top: 5px;
  margin-left: 38%;
}


.projects-section {
    
    position: absolute;
    width: 107%;
    height: 110%;
    background-image: url(media/bgblue.jpg);
}

.project-wrapper {
    
    display: flex;
    position: relative;
    top: 5%;
    left: 1.5%;
    width: 97%;
    column-gap: 70px;
    grid-row-gap: 255px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

.project-tile {

  position: relative;
  border: 2px solid white;
  width: 17vw;
  height: 15vh;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

figcaption {
    
    position: absolute;
    text-align: center;
    width: 100%;
    top: 105%;
    color: whitesmoke;    
}

figcaption:hover {
        
    text-decoration: underline;
    color: darkgray;

}

.project-tile img {
    
    position: absolute;
    width: 17vw;
    height: 15vh;
    transition: opacity 1s ease-in-out;
}

.project-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}

    
/* ----------SOCIALS SECTION-----------*/



#socials-section {
    
    position: absolute;
    width: 107%;
    height: 100vh;
    top: 200%;
    background-image: url(media/bgdark.jpg);
}

#together {
    
  position: absolute;
  color: whitesmoke;
  top: 50%;
  left: 17%;
  margin: 0 150 0 150;
  font-size: 32px;
}

#sub2 {
  position: absolute;
  top: 55.5%;
  left: 8%;
  margin: 0 150 0 150;
  color: teal;
  font-family: monospace;
  font-size: 18px; 
}

.social-wide {
    
    display: inline-flex;
    position: relative;
    height: 50px;
    top: 70%;
    color: teal;
    margin-left: 38%;
}

.social-wide a {
    
    color: teal;
}

.social-wide a:hover {
    
    color: darkgray;
    text-decoration: underline;
    /* transform: translate(0px, -8px); 
    Need to get this to shift down a few pixels for the effect.
    */ 
}

.certs-wrapper {
    
    display: flex;
    position: absolute;
    top: 55px;
    width: 100%;
    grid-gap: 50px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

#my-certs {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: absolute;
  top: -35px;
  left: 29%;
}

.certs-tile {

  position: relative;
  border: 2px solid white;
  width: 21vw;
  height: 21vh;
  margin-left: 42%;
  margin-right: auto;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

.certs-tile img {
    
    position: absolute;
    width: 21vw;
    height: 21vh;
    transition: opacity 1s ease-in-out;
}

.certs-tile img.resp1 {
    
    filter: invert(100%);
}


.certs-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}


#bottom {
    
    position: absolute;
    width: 100%;
    height: 5px;
    right: 0;
    top: 95%;
    background-color: teal;
}

#copyright {
    
  position: absolute;
  color: whitesmoke;
  top: 96.5%;
  left: 30%;
  margin: 0 150 0 150;
  font-size: 18px;
}

    
}
    
    

/*************************************Extra small**************************************************************/

/*************************************Extra small**************************************************************/


@media only screen and (max-width: 400px) and (min-width: 201px) {
 

  .nav {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    width: 130vw;
    padding: 5px;
     background-image: url(media/bgblue2.jpg);  
    overflow: hidden;
    border-bottom: 2px solid black;
    z-index: 1;
}

#hi {
  
  display: inline-block;
  position: relative;
  top: -67%;
  left: 9%;
  width: 90%;
  margin: 0 auto;
  font-size: 1.3em;
  z-index: 2;

}

#welcome-section span {
    
    color: teal;
}

#welcome-section subtitle {
  
  display: inline-block;
  position: relative;
  top: 5%;
  left: 5%;
  width: 100%;
  margin: 0px auto;
  color: ghostwhite;
  font-size: 1.3em; 
  word-break: keep-all;
  z-index: 2;

}

#welcome-section {
  height: 100vh;
  width: 130vw;
  color: whitesmoke;
  background-image: url(media/bgdark.jpg);
  overflow: hidden;
}

#welcome-section img {
    display: inline-block;
    position: relative;
    height: 75%;
    top: 120px;
    left: -10%;
    z-index: 1;
}


/* ----------PROJECTS SECTION-----------*/



#my-projects {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: relative;
  top: 5px;
  margin-left: 30%;
}


.projects-section {
    
    position: absolute;
    width: 130%;
    height: 110%;
    background-image: url(media/bgblue.jpg);
    overflow: hidden;

}

.project-wrapper {
    
    display: flex;
    position: relative;
    top: 5%;
    left: 1%;
    width: 97%;
    column-gap: 35px;
    grid-row-gap: 255px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

.project-tile {

  position: relative;
  border: 2px solid white;
  width: 30vw;
  height: 15vh;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

figcaption {
    
    position: absolute;
    text-align: center;
    width: 10%;
    top: 105%;
    color: whitesmoke;    
}

figcaption:hover {
        
    text-decoration: underline;
    color: darkgray;

}

.project-tile img {
    
    position: absolute;
    width: 30vw;
    height: 15vh;
    transition: opacity 1s ease-in-out;
}

.project-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}

    
/* ----------SOCIALS SECTION-----------*/



#socials-section {
    
    position: absolute;
    width: 130%;
    height: 100vh;
    top: 200%;
    background-image: url(media/bgdark.jpg);
}

#together {
    
  position: absolute;
  color: whitesmoke;
  top: 45%;
  left: 20%;
  margin: 0 150 0 150;
  font-size: 32px;
}

#sub2 {
  position: absolute;
  top: 57%;
  left: 9%;
  margin: 0 150 0 150;
  color: teal;
  font-family: monospace;
  font-size: 18px; 
}

.social-wide {
    
    display: inline-flex;
    position: relative;
    height: 50px;
    top: 75%;
    color: teal;
    margin-left: 25%;
}

.social-wide a {
    
    color: teal;
}

.social-wide a:hover {
    
    color: darkgray;
    text-decoration: underline;
    /* transform: translate(0px, -8px); 
    Need to get this to shift down a few pixels for the effect.
    */ 
}

.certs-wrapper {
    
    display: flex;
    position: absolute;
    top: 55px;
    width: 100%;
    grid-gap: 50px;
    height: auto;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    justify-items: center;
    
}

#my-certs {
    
  font-family: monospace;    
  color: whitesmoke;
  display: inline-block;
  position: absolute;
  top: -35px;
  left: 18%;
}

.certs-tile {

  position: relative;
  border: 2px solid white;
  width: 30vw;
  height: 15vh;
  margin-left: 42%;
  margin-right: auto;
  box-shadow: 1px 1px 4px 2px whitesmoke;
}

.certs-tile img {
    
    position: absolute;
    width: 30vw;
    height: 15vh;
    transition: opacity 1s ease-in-out;
}

.certs-tile img.resp1 {
    
    filter: invert(100%);
}


.certs-tile img.acg2:hover {
    opacity: 0;
    cursor: pointer;
}


#bottom {
    
    position: absolute;
    width: 100%;
    height: 5px;
    right: 0;
    top: 95%;
    background-color: teal;
}

#copyright {
    
  position: absolute;
  color: whitesmoke;
  top: 96.5%;
  left: 20%;
  margin: 0 150 0 150;
  font-size: 18px;
}

    
}