@import url("base.css");

bodyold
{
	  background-repeat: repeat-y;
  background-size: 100% 25px;
}

body {
  background-image: url("wood.jpg");
  background-size: 100% 100%; 
  background-position: left top;
  margin-left: 5%;
  margin-right: 5%;
  }

header {
  font-family: "Economica", sans-serif;
  font-size: 3rem;
  font-style: normal;
  height: 4rem;
  contain: paint;
  line-height: 1;
}

header a {
  text-decoration: none;
  transition: 0.2s;
}

header a:hover {
font-size: 4.2rem;
}

/* main nav wrapper */
nav {
left: 2%;
}

.bar {
position: fixed;
width: 10%;
top: 5%;
  margin: auto;
}

/* main nav flexbox */
nav > div {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
  justify-content: center;
  align-items: center;
  margin: auto;
}

/* main nav button wrapper */
#navmain > div {
  position: relative;
  width: 100%;
  height: 3rem;
  margin-bottom: 5%;
  display: flex;
}

/* post its */
#navmain img {
  position: absolute;
  width: 100%;
  z-index: -10;
}

/* main nav button text */
.navcon {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
  padding-right: 13%;
  padding-top: 8%;
  color: #011d57;
  text-align: right;
right: 0;
}

#navmain a {
    display: block;
    width: 100%;
    height: 80%;
}

#scrap {
  display: flex;
  align-items: center;
  justify-content: center;
  top: 20.5rem;
}

#scrapcon {
  position: absolute;
}

#scrap > div {
margin-top: -10%;
width: 100%;
}

#scrapcon table {
width: 100%;
height: 100%;
text-align: center;
}

#scrapcon table img {
width: 50%;
}
#scrapcon tr { display: block; float: left; width: 50%;}
#scrapcon td { display: block; }

    #mainframe{
        width: 90%;
        border: 1px solid black; 
        border-radius: 5px;
        display: block;
        margin: 0;
        margin-left: 10%;
overflow: hidden;
    filter: drop-shadow(0 10px 5px rgba(1, 29, 71, 0.5));
background: #fff;
    }
    
main {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 2%;
    }

#rightbar {
right: 2%;
}

#post2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 100%;
}

#post2con h3::before {
content: '✸ '
}

/* CHECK ALL CSS BELOW, LATER */
#post2 img + #post2con {
  position: absolute;
}

#post2con {
  padding: 17%;
  padding-top: 26%;
  transform: rotate(6deg);
}

#post2con table {
    border-spacing: 0;
}

#scrap > img {
  width: 100%;
filter: drop-shadow(0 10px 5px rgba(1, 29, 71, 0.5));
}

/* bandcamp embed wrapper */
#jamwrap {
width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 10%;
padding-bottom: 10%;
    }

/* bandcamp embed */
#jams {
  max-width: 90%;
margin: auto;
}

#banners {
padding-top: 5%;
}

#bancon {
background-color: #fff; width: 85%; padding: 2%; border: 1px solid black; margin: auto; text-align: center;
border-radius: 5px;
}

#tape1{
margin-top: -8%; 
margin-left: -5%; 
position: absolute; 
transform: rotate(-10deg);
}

#tape2{
margin-bottom: -8%; margin-right: -5%; position: absolute; bottom: 0; right: 0; transform: rotate(170deg);
}

footer {    
  width: 60;
  margin: auto;
  text-align: center;
}

/* website carbon */
#wcb {
  margin-top: 0.2rem;
}

/* 1170px screems display sidebars side-by-side below main content */
@media only screen and (max-width: 1170px) {
.bar {
width: 100%;
position: relative;
margin: auto;
padding: 2%;
padding-bottom: 0;
left: 0;
right: 0;
padding-left: 0;
}

nav {
width: 100%;
margin-left: 0;
left: 0;
position: relative;
}

#navmain {
  flex-direction: row;
  width: 80%;
  justify-content: center;
margin-bottom: -2%;
}

#navmain > div {
margin-bottom: 2%;
width: 25%;
}

#scrap {
padding: 0 0 2rem 0;
top: 2rem;
width: 50%;
margin: auto;
}

#scrapcon {
width: 100%;
}

/* bandcamp embed wrapper */
#jamwrap {
     padding-top: 5%;
     padding-right: 0;
     padding-bottom: 0;
}

#mainframe {
  width: 80%;
  padding: 2%;
}

#bancon {
width: 50%;
}

  #post2 {
  margin: auto;
  position: relative;
  width: 50%;
}

#post1 {
  margin: auto;
  position: relative;
  width: 50%;
}

#post1con {
  max-width: 50%;
}

#tape1 {
  margin-left: 20%;
  margin-top: -2%;
}

#tape2 {
  margin-right: 20%;
  margin-bottom: 0;
}
}

@media only screen and (max-width: 800px) {
.navcon {
font-size: 1.1rem;
}

#navmain > div {
margin-bottom: -4%;
}
}

/* narrower screems display sidebars above and below main content */
@media only screen and (max-width: 580px) {
header {
  font-size: 3rem;
  height: 3rem;
}

header a:hover {
font-size: 3.2rem;
}

nav {
  width: 80%;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0;
}

nav > div {
width: 50%;
margin-bottom: 0;
flex-wrap: wrap;
}

#navmain > div {
width: 50%;
height: 3rem;
margin-bottom: 2%;
}

#navmain div {
font-size: 1rem;
}

#mainframe { 
	
  width: 100%;
  margin-left: 0%;
  padding: 2%;	
  overflow: auto;
}

#scrap {
width: 85%;
margin-bottom: 2%;
}


  #post2 {
  margin: auto;
  margin-top: 2%;
  width: 85%;
}

#post1 {
  margin: auto;
  position: relative;
  width: 85%;
}

#post1con {
  max-width: 80%;
}

/* bandcamp embed */
#jams {
  width: 80%;
}

  .rightflex {
     display: block;
}

#tape1 {
  margin-left: 15%;
  margin-top: -2%;
width: 25%;
}

#tape2 {
  margin-right: 15%;
  margin-bottom: 0;
width: 25%;
}

.scrib {
opacity: 0;
}
}