html {

  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  padding:0;
}

body {

  display:flex;
  justify-content: center;

  height: 100%;
  width: 100%;
  margin: 0;
  border: 0;
  padding-top:8px;
  padding-bottom: 8px;
  padding-left: 0;
  padding-right: 0;
}

@keyframes colormorph
{

0% {background-color: rgb(255,255,255);}
25% {background-color: rgb(140, 255, 255);}
50% {background-color: rgb(255,140,255);}
75% {background-color: rgb(140,255,140);}
100% {background-color: rgb(255,255,255);}
}

.emailImage {

  width: 500px;
  height: auto;

  max-width: 100%;

  min-height: 0px;
  min-width: 0px;

  padding-left: 8px;
  padding-right: 8px;

}

.ContactPic {

  width: 440px;
  max-width: 98%;
}

.ContactTex {

  width: 440px;
  max-width: 98%;
  min-height: 58px;

  border-radius: 10px;
  padding: 8px;

  animation: colormorph 9s infinite;
}

#grdContact {

  display:grid;
  width:100%;
  height:100%;
  grid-template-rows: 100px max-content max-content 1fr 20px;
  grid-template-columns:1fr;
  grid-row-gap:8px;

  justify-content:stretch;
  align-content:stretch;
  justify-items:center;
  align-items:stretch;
}

#ContactButton {

  grid-row: 1;
  grid-column: 1;
}

#ContactHeader {

  grid-row: 2;
  grid-column: 1;
}

#ContactPicture {
  grid-row: 3;
  grid-column: 1;
}

#ContactText {
  grid-row: 4;
  grid-column: 1;
}

#ContactCopyright{
  grid-row: 5;
  grid-column: 1;
  padding-left: 8px;
  padding-right: 8px;
}

@media (min-height: 900px)
{

  .ContactPic {

    width: 900px;
    max-width: 98%;
  }

  .ContactTex {

    width: 460px;
    max-width: 98%;

    background-color: rgba(200, 200, 200, 0.8);
    border-radius: 10px;
    padding: 8px;
  }



}