@media only screen and (max-width: 1500px)
{
  p
  {
    font-size: 30px;
  }

  h1
  {
    font-size: 45px;
  }
  h2
  {
    font-size: 20px;
  }
  .Project td {
    display: block;
    clear:both;
  }
  .Project
  {
    max-width: 800px;
  }
  .Button
  {
  font-size: 25px;
  }
}
@media only screen and (min-width: 1501px)
{
  p
  {
    font-size: 18px;
  }

  h1
  {
    font-size: 35px;
  }
  
  h2
  {
    font-size: 10px;
  }

  .ProjectVideo
  {
    width: 800px;
  }

  .Project
  {
    max-width: 1800px;
  }
  .Button
  {
    font-size: 15px;
  }
}

p
  {
    color: white;
    font-weight: bolder;
    text-shadow:
    -2px -2px 0 black,
     0   -2px 0 black,
     2px -2px 0 black,
     2px  0   0 black,
     2px  2px 0 black,
     0    2px 0 black,
    -2px  2px 0 black,
    -2px  0   0 black;
  }

  h1
  {
    color: #351818;
    font-weight: bolder;
    text-shadow:
    -2px -2px 0 white,
     0   -2px 0 white,
     2px -2px 0 white,
     2px  0   0 white,
     2px  2px 0 white,
     0    2px 0 white,
    -2px  2px 0 white,
    -2px  0   0 white;
  }
  h2
  {
    color: white;
    font-weight: bolder;
    text-shadow:
    -2px -2px 0 black,
     0   -2px 0 black,
     2px -2px 0 black,
     2px  0   0 black,
     2px  2px 0 black,
     0    2px 0 black,
    -2px  2px 0 black,
    -2px  0   0 black;
  }
  
  .Project
  {
    padding-bottom: 60px;
    width: 80%;
    margin: auto;
    z-index: 2;
    position: relative;
    background-color: #caa5a581;
    border-radius: 20px;
    margin-bottom: 40px;
    margin-top: 40px;
    padding: 40px;
    box-shadow: 0px 0px 0px 5px #351818, 0px 0px 20px 10px black;
  }
  .Project td
  {
    vertical-align: top;
  }
  .Project h1
  {
    text-align: center;
  }
  .Project p
  {
    margin-top: 0;
  }
  .ProjectVideo
  {
    padding-right: 20px;
    vertical-align: top;
  }
  .ProjectVideo img
  {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0px 0px 0px 5px #351818, 0px 0px 20px 10px black;
  }
  .ProjectVideo a:hover img
  {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0px 0px 0px 5px #5e2b2b, 0px 0px 20px 15px black;
  }
  .ProjectVideo iframe
  {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    box-shadow: 0px 0px 0px 5px #351818, 0px 0px 20px 10px black;
    border: none;
  }

.Button
{
  position: relative;
  border-radius: 20px;
  background-color: #b39292;
  padding: 7px 15px;
  margin-right: 10px;
  color: #522929;
  text-align: center;
  text-decoration: none;
  font-weight: bolder;
  box-shadow: 0px 6px 0px 0px rgba(0,0,0,0.75);
  bottom: 3px;
}

.Button:hover {
    color:white;
    box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.75);
    transition: .3s ease-out;
    bottom: 0px;
}

.Button span{
  text-decoration: none;
  position: relative;
}
.Button span::before {
  content: "";
  background: linear-gradient(to right, rgb(255,255,255) 45%, #522929 55%);
  background-size: 220% 100%;
  background-position: 100% 50%;
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  background-repeat: no-repeat;
  transition: .3s ease-out;
}

.Button:hover span::before {
  background: linear-gradient(to right, rgb(255,255,255) 45%, #522929 55%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  transition: .3s ease-out;
}

.ButtonWrapper
{
  height: 50px;
}

.back
{
  float: right;
  position:relative;
  border-radius: 50%;
  background-color: #b39292;
  padding: 8px;
  margin-right: 10px;
  color: #522929;
  text-align: center;
  text-decoration: none;
  font-weight: bolder;
  box-shadow: 0px 6px 0px 0px rgba(0,0,0,0.75);
  width: 30px;
  bottom: 3px;
}

.back img
{
  width: 30px;
  height: 30px;
}

.back:hover {
  box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.75);
  transition: .3s ease-out;
  bottom: 0px;
}