@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');



* { margin:0; padding:0;}

html, body { height: 100%; }



body {

  background-color:#222;

  font-family: 'verdana';

  font-size: 10pt;

  color: #999;

  background-image: url(bg2.png);

}



a {

  color: #ff99cc;

  text-decoration: underline;

}



a:hover {

  color: #ff99cc;

  text-decoration: none;

}


.center {
  text-align: center;
  margin: auto;
}

button {
  border: none;
  background: transparent;
}
button:hover {
  cursor: pointer;
}


.wrapper {

  width:  100%;

  height: 100%;

  display: table;

  text-align: center;

  margin-left:  auto;

  margin-right: auto;

}



p {

  margin-top: 10px;

  margin-bottom: 10px;

}

blockquote {
  padding-left: 20px;
  border-left: 1px dashed #404040;
}


hr.hr1 {
  border-top: 1px dashed #c267c1;
  margin-top: 10px;
  margin-bottom: 10px;
  margin: 10px;
  background-color: transparent;
  width: 70%;
}


 .main {

  height: 100%;

  display: table;

  max-width: 1200px;
  width: 100%;

}



.box {

  display: table-cell;

}



.content {

  padding-left: 10px;

  text-align: left;

}



.nav {

  max-width: 250px;
  width: 250px;

  text-align: center;

  font-family: 'VT323', monospace;

  font-size: 20pt;

  color: #3a2949;

  display: table-cell;

  background-color: #ff99cc;

}



img {

  max-width: 100%;

}



.nav-link {

  display: block;

  background-color: #f058b9;

  color: #3a2949;

  width: 250px;

  text-decoration: none;

  line-height: 45px

}



.nav-link:hover {

  background-color: #48c03c;

  background-image: url();

  background-repeat: no-repeat;

  background-position: left center;

  color: #3a2949;

}



.footer {

  display: table-row;

}



.nav-small {

 font-family: 'verdana';

 color: #111;

 font-weight: bold;

 text-transform: uppercase;

 font-size: 8pt;

 line-height: 14pt;

}



.nav-small a {

 font-weight: bold;

 text-transform: uppercase;

 font-size: 8pt;

 color: #111;

}



.nav-small a:hover {

  text-decoration: none;

}



h1 {

  font-size: 25pt;

  font-weight: normal;

  text-transform: uppercase;

  color: #48c03c;

  font-family:  'VT323', monospace; 

}



.pronouns {

  font-size: 8pt;

  color: #48c03c;

  font-family: 'courier new';

  letter-spacing: 2px;

  font-weight: normal;

  font-style: italic;

  text-transform: none;

  border-left: 1px dashed #777;

  padding-left: 5px;

}



h2 {

  font-size: 12pt;

  font-family: 'arial';

  color: #48c03c;

}



h3 {

  font-size: 20pt;

  font-weight: normal;

  text-transform: uppercase;

  color: #fff;

  font-family:  'VT323', monospace; 

  text-align: center;

  background: rgba(0, 0, 0, .7)

}



strong {

  color: #cc66ff;

}



.smallscreen {

  display: none

}



.largescreen {

  display: default

}



.icon {

  width: 48px;

  padding-left: 20px;

  padding-right: 20px;

}



.schedulelink:hover, .artistalley:hover, .stream:hover, .about:hover, .support:hover {

  background-repeat: repeat;

}

  .schedulelink:hover

  {background-image: url('schedule.png');}

  .artistalley:hover

  {background-image: url('artistalley.png');}

  .stream:hover

  {background-image: url('stream.png');}

  .about:hover

  {background-image: url('about.png');}

  .support:hover

  {background-image: url('support.png');}



ul {

  list-style-image: url('bullet.png');

  padding-left: 20px;

}



li {

  padding: 5px;

  padding-left: 0px;

}



.artist-list {

  column-count: 3;

  font-size: 12pt;

  font-family: 'courier new', monospace;

}



    /* profiles */

.profile {

  width: 100%;

  display: table;

}



.profile-pic {

  display: table-cell;

  width: 300px;

}



.profile-bio {

  display: table-cell;

  padding: 20px;

}


   /* prize grid */

.prize-grid {

  width: 100%;

  display: table;

}

.prize-img-cell {

  display: table-cell;

  position: static;

  width: 400px;

  max-width: 400px;

  margin: 10px;

  padding: 5px;

}

.prize-desc-cell {
  position: relative;
  display: table-cell;
}


    /* artist alley page */

.artist-grid {

  width: 100%;
  margin-left: auto;

  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
}


.artist-grid a {

    text-decoration: none;
    display: block;
    width: 100%;
}



.grid-cell {

  display: flex;
  position: static !important;

  width: 200px;

  height: 200px;

  margin: 10px;

  padding: 5px;

  opacity: 60%;

  border: 1px dashed #555;

  background-image: url('profilepic.png');

  background-size: contain;

  background-position: center;

  background-repeat: no-repeat;

  align-items: flex-end;

}

.grid-cell h3 {
  display: block;
  min-width: 100%;
}



.grid-cell:hover {

  opacity: 100%;

  background-color: #339933;

}

    .embed {
width: 800px;
height: 600px;
margin-left: auto;
margin-right: auto;
}


    /* mobile layout */



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

.wrapper {

  width: 100%;

  height: auto ;

  display: inline-block;

  text-align: center;

}



.header {

  }



 .main {

  height: 100%;

  display: inline-block;

  max-width: 100%;

}

.embed
{width: 500px;
height: 275px}



.box {

  display: inline-block;

}



.content {

  padding-left: 5px;

  text-align: left;

}



.nav {

  max-width: 100%;

  text-align: center;

  font-family: 'VT323', monospace;

  font-size: 20pt;

  color: #3a2949;

  display: inline-block;

  background-color: transparent;

}



.nav-link {

  display: inline;

  }



.largescreen {

  display: none;

}



.nav-link {

  font-size: 20px;

  padding: 5px;

}



.smallscreen {

  display: block;}



.footer {

 color: #111;

 text-align: center;

 font-weight: bold;

 text-transform: uppercase;

 font-size: 8pt;

padding: 5px;

margin-top: 20px}



.artist-list {

  column-count: 2;

}

.grid-cell {

  display: flex;
  position: static !important;

  width: 100px;

  height: 100px;

  margin: 5px;

  padding: 5px;

  opacity: 60%;

  border: 1px dashed #555;

  background-image: url('profilepic.png');

  background-size: 100px;

  background-position: center;

  background-repeat: no-repeat;

  align-items: flex-end;

}

.grid-cell h3 {
  display: block;
  min-width: 100%;
  font-family: verdana;
  font-size: 8pt;
  overflow: hidden;
}

.profile-pic {

  display: table-cell;

  width: 200px;

}

    }