@font-face {
    font-family: 'Courier New', Courier, monospace;
    src: url("https://nicholeshinn.github.io/SurveillanceCultureandSoundMaps/PersonalPages/PersonalFonts/Basteleur-Moonlight.otf") format("opentype");
}


body{
    background-color: #9978ec;
    margin: 0;
    max-width: 100%;
}

h3 {
    font-family: 'courier', Arial, sans-serif;
    text-shadow: 0 0 10px #fff, 0 0 20px #090707, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff, 0 0 60px #fff, 0 0 70px #fff;
    text-align: center;
}

h2 {
    font-family: 'courier', Arial, sans-serif;
    text-shadow: 0 0 10px #fff, 0 0 20px #090707, 0 0 30px #fff, 0 0 40px #fff, 0 0 50px #fff, 0 0 60px #fff, 0 0 70px #fff;
    text-align: center;
   text-size-adjust: 20%;
}

#Title{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: courier;
}

.paragraphbody {
  text-align: center;
  padding-left: 20%;
  padding-right: 20%;
  font-family: 'Courier New', Courier, monospace;

}

.fieldnotes {
  text-align: justify;
  padding-left: 8%;
  padding-right: 8%;
  font-family: 'Courier New', Courier, monospace;
}

.soundcloudplayer {
  padding: 30px;
}

#Paragraph1{
    padding: 40px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

#Paragraph2 {
    padding: 40px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#Paragraph2:hover {
    transform: rotate(20deg);
    text-shadow: 0px 3px 3px black, 0 0 25px #3305FD, 1px 0 3px #A1014C, 0 0 40px #5601A1;
    filter: blur(3px);
    color: white;
    transition: ease-in-out 0.2s;
}

#audio1{    
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#centeredimage {
    filter: drop-shadow(3px 3px 6px black);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    padding-top: 5%;
    height: 90%
}

#pic01 {
    filter: drop-shadow(10px 10px 10px black);
    border-radius: 8px;
}

#pic02 {
    filter: drop-shadow(10px 10px 10px black);
    border-radius: 50%;
}

#pic03 {
    filter: drop-shadow(10px 10px 10px black);
    opacity: 0.5;
}

#pic04 {
    filter: drop-shadow(10px 10px 10px black);
    filter: brightness(150%);
}

#pic05 {
    filter: drop-shadow(10px 10px 10px black);
    filter: grayscale(60%);
}

#pic06 {
    filter: drop-shadow(10px 10px 10px black);
    filter: hue-rotate(200deg);
}

.subpagecontainer {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 20px;
  row-gap: 2px;
  padding: 5%;
  margin: auto;
  background-repeat: repeat;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

.subpagecontainer div {
  padding: 5px;
  margin: auto;
  text-align: center;
  line-height: 1em;
  justify-content: center;
  align-items: center;
  margin-bottom: 3px
}

@keyframes colorshift {
    0% {
        background-color: red;}
    25% {
        background-color: yellow;}
    50% {
        background-color: blue;}
    75% {
        background-color: green;}
    100% {
        background-color: red;}
}

#hoverpicholder {
    padding: 40px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    animation-name: colorshift;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

#hoverpic {
    padding: 40px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hoverpic:hover {
    transform: scale(2.5) rotate(10deg) translate(0px, -20px);
    filter: blur(3px);
    transition: ease-in-out 0.5s;
    }

#animatedpic {
    padding: 40px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    animation-name: animatedpicture;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes animatedpicture {
    0% {
        left: 0px;
        top: 0px;}
    50% {
        left: 0px;
        top: 200px;
        transform: scale(0.5, 0.5);}
    75% {
        left: 0px;
        top: 200px;
        transform: scale(-1, -1);}
    100% {
        left: 0px;
        top: 0px;}
}


#truckanimation {
    padding: 10px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;
    animation-name: truckanimation;
    animation-duration: 12s;
    animation-iteration-count: infinite;
}
@keyframes truckanimation {
  0%   {
    left:-600px; top:0px;}
  10% {
     left:-400px; top:0px;}
  50%  {
    left:400px; top:0px;
    transform: scale(0.75, 0.75)}
  75%  {
    left:100px; top:00px;
    transform: scale(1.25, 1.25)}
  100%  {
    left: 600px; top:5px;
  }
}

#truckanimation2 {
    margin: 10px;
    display: auto;
    justify-content: center;
    align-items: center;
    margin-top: 1px;
    margin-bottom: 1px;

    position: relative;
    animation-name: truckanimation2;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}
@keyframes truckanimation2 {
  0%   {
    left:900px; top:0px;
    transform: scale(1.1), 1.1}
  50%   {
    left:400px; top:0px;}
  60%   {
    left:400px; top:0px;}
  100%  {
    left: -600px; top:0px;
    transform: scale(1.1, 1.1)
  }
}

#truckanimation2 > img {
    height: 500px;
}

.group:after {
  content: "";
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 20px;
  margin:auto
}

.text {
  float: right;
  width: 30%;
}

.images {
  float: right;
  width: 70%;
}


#truckanimation3 {
    margin: 10px;
    display: auto;
    justify-content: center;
    align-items: center;
    margin-top: 1px;
    margin-bottom: 1px;

    position: relative;
    animation-name: truckanimation3;
    animation-duration: 15s;
    animation-iteration-count: infinite;
}
@keyframes truckanimation3 {

  0%    {
    left:400px; top:0px;
    transform: scale(.75, .75)}
  50%   {
    left:900px; top:0px;
    transform:scale(1.1, 1.1)}
  100% {
    left:400px; top:0px;
    transform: scale(.75, .75)}

  }

  #truckanimation3 > img {
    height: 300px;
}

#truckanimation4 {
  margin: 10px;
    display: auto;
    justify-content: center;
    align-items: center;
    margin-top: 1px;
    margin-bottom: 1px;

    position: relative;
    animation-name: truckanimation4;
    animation-duration: 14s;
    animation-iteration-count: infinite;
}
@keyframes truckanimation4 {
  0%   {
    left:-400px; top:0px;
    transform: scale(.9, .9)}
  50%   {
    left:400px; top:00px;}
  60%   {
    left:370px; top:0px;}
  100%  {
    left: 900px; top:0px;
    transform: scale(.9, .9)
  }
}

#truckanimation4 > img {
    height: 250px;
}

#stationarytruck > img {
  display: flex;
  justify-content: left; 
  height: 250px;
}