/* media */

@media screen and (min-width:1059px) {

  div.forsale { 
  
    width:36%;
    display:inline-block;
  }

  div#overture {
    width:60%;
  }

  div#overture-right {

    vertical-align: top;
    margin-left:4em;
    display:inline-block;
    width:25%;
  }

  pre{

    display:inline-block;
    margin-top:2em;
  }
}



@media screen and (max-width:1060px) {

  div.forsale { 
  
    width:80%; 
  }

  div#overture {
    width:100%;
  }

  div#overture-right {

    display:block;
  }

  div#overture-right h2,pre,img {

    display:inline-block;
    vertical-align: top;
  }
}

body {

  padding:4em;
  border:1.5em solid black;
}

h1.title {

  font-size:2.5em;
  margin:0;
}

h2 {

  display:inline-block;
}

h3 {

  font-size:1.5em;
  font-style:italic;
}

h3.title {

  margin-top:1em;
}

/* animations and animated styles */
  
@keyframes spin {

  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes colortransform {

  0% { color:deeppink; }
  33% { color: aqua; }
  66% { color: cornsilk; }
  100% { color: deeppink; }
}

@keyframes bordertransform {

  00% { border:1px solid deeppink; }
  33% { border:1px solid aqua; }
  66% { border:1px solid cornsilk; }
  100% { border:1px solid deeppink; }
}

h1 {

  animation:colortransform 20s infinite;
  text-shadow:2px 2px black;
}

h2 {

  font-family:cursive;
  font-size:1.5em;
  font-style:bold;

  animation: spin 1s infinite, colortransform 4s infinite;
  animation-timing-function: linear;
}

/* overture content */

#overture {

  display:inline-block;
}

#overture p {

  font-size:1.3em;
  line-height:1.3em;
  max-width:100%;
}

#overture-right img {

  z-index:1;
}

#overture-right pre {
  
  z-index:2;
}

#overture-right h2 {

  z-index:3;
}

img.dougie {

  width:200px;
  margin-left:1em;
  animation:spin 2s infinite;
  animation-timing-function: linear;
  animation-direction: reverse;
}

pre {

  vertical-align: top;
  display:inline-block;
  font-family:monospace;
  animation:spin 20s infinite;
  animation-timing-function: linear;
}

/* For sale stuff */

div.wrapper {

  animation: bordertransform 1s infinite;
  padding-top:2em;
}

div.wrapper h3, div.wrapper p {

  padding:0 1em;
}

div.forsale {

  vertical-align: top;
  padding:1.5em;
  margin:2em 2em 0 2em;
}

div.forsale img {

  max-width:100%;
  margin:0 auto;
  display:block;
}

div.price {

  margin:0 0 0 60%;
  padding:10px;
  border:1px solid green;
  border-radius: 50%;
  transform:rotate(20deg);
  display:inline-block;
  font-size:2em;

  animation:colortransform 20s infinite;
  text-shadow:1px 1px black;
}

p.desc {

  margin:0 2em 0 2em;
  font-size:.85em;
  line-height:1.4em;
  max-width:100%;
}