/* Style sheet for Snail Shell's Emporium of Oddities.
If you're reading this, you must be interested in my styles! x*/

body {
  background-color: white;
  background-image: url("images/CLOUDTEX.JPG");
  color: orange;
  font-family: Verdana;
  margin:40px 0px;
}

img {
  max-width:100%;
}

#main {
  background:#fbe546;
  width:100%;
  max-width:900px;
  border-color:#fbe546;
  border-width:4px;
  box-shadow:5px 10px 10px #000;
}

.page-image,
#radio {
  display:block;
  float:right;
  margin:20px 0px 20px 20px;
  border:2px solid #f24d06;
  background-color:#f24d06;
}

.page-image img,
#radio img {
  display:block;
  min-width:100%;
  padding-bottom:3px;
}

#radio iframe {
  padding:0;
  margin:0;
  width:100%;
}

#socials {
  padding-bottom:10px;
}
#socials p {
  margin-bottom:0;
}
#socials a {
  display:inline-block;
}

.menu {
  display: flex;
  flex-wrap:wrap;
  background-color:#f24d06;
  color:white;
  font-weight:bold;
  text-align:center;
}

tr.menu,
.menu td {
  padding:0px;
  border-spacing:0px;
  margin:0px;
}

.menu a {
  display: inline-block;
  width:220px;
  height:61px;
  padding:0px;
  margin-bottom:-2px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.menu #home a {
  background-image:url("images/menu/menu-home-up.jpg");
}

.menu #home a:hover {
  background-image:url("images/menu/menu-home-down.jpg");
}

.menu #coolstuff a {
  background-image:url("images/menu/menu-coolstuff-up.jpg");
}

.menu #coolstuff a:hover {
  background-image:url("images/menu/menu-coolstuff-down.jpg");
}

.menu #about a {
  background-image:url("images/menu/menu-about-up.jpg");
}

.menu #about a:hover {
  background-image:url("images/menu/menu-about-down.jpg");
}

.menu #journal a {
  background-image:url("images/menu/menu-journal-up.jpg");
}

.menu #journal a:hover {
  background-image:url("images/menu/menu-journal-down.jpg");
}


table.menu {
    border-color:#fde84d;
}

.content {
  background-color:#f1f1f1;
  color:#1c1c1c;
}

.content td {
  padding: 0 20px;
}

.coollinks {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  padding-left:0;
}

.coollinks li {
  display:inline-block;
  width:260px;

}

.coollinks li > a {
  font-size:1.2em;
  font-weight:bold;
  text-decoration:none;
  color:#f24d06;
}

.coollinks img {
  display:block;
  padding:10px 0px;
}

.tertiary td,
.footer td {
  padding:10px;
}

.tertiary {
  background-color:#1d1d1d;
  color:white;
  text-align:center;
}

.icons img {
  height:40px;
}

#dontclick img  {
  border-radius: 5px;
  width:150px;
  height:50px;
  margin:10px;
  text-align:center;
  box-shadow: 0px 0px 5px rgba(255, 0, 0, 0.3);
}

#dontclick img:hover  {
  box-shadow: 0px 0px 25px rgba(255, 0, 0, 0.3);
}

.footer {
  background-color:#58a121;
  color:white;
  text-align:center;
}

#bandcamp {
  border: 0; width: 350px; height: 442px;
}

.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}


#journal-list {
  list-style:none;
  padding-left:0px;
}

#journal-list img {
  float:left;
  width:100px;
  height:100px;
  padding-right:10px;
}

#journal-list a {
  text-decoration:none;
  font-size:1.3em;
  font-weight:bold;
}

.journal-entry h1,
.journal-entry .date  {
  margin-bottom:0px;
}

.date,
.desc {
  display:block;
  font-style:italic;
}

#journal-list .desc {
  padding-top:10px;
}


#journal-list li {
  padding:10px 0px;
  border-top:0.5px solid #1c1c1c;
  overflow:hidden;
}

#journal-list li:last-child {
  border-bottom:1px solid #1c1c1c;
}

a {
  color:#f24d06;
}

@media (max-width: 900px) {
  .menu td {
    width:50%;
    margin:-1px;
  }
  .menu td a {
    width:100%;
  }
  #radio, #bandcamp {
    width:100%;
  }
}