@media (min-width: 280px) and (max-width:1000px) {

body {
  display: flex;
  flex-direction: column;
  background-image: url('https://i.imgur.com/rlB7sTb.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding: 3vmin;
  /* font: 3vmin 'Josefin Sans', 'Sriracha', "Lucida Grande", Helvetica, Arial, sans-serif; */
  font: 3vmin 'Aoboshi One', 'Josefin Sans', "Lucida Grande", Helvetica, Arial, sans-serif;
}

body button {
  font-family: 'Josefin Sans';
}

.topnav {
  overflow: hidden;
  background-color: rgba(174, 179, 190, .9);
  border-radius: 4vmin;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 3vmin;
  text-decoration: none;
  font-size: 6vmin;
  display: block;
}

nav > a:hover:not(.active) {
  color: whitesmoke;
}

.topnav > a.active {
  color: red;
  cursor: default;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #6bd681;
  color: white;
}

#welcomeuser {
  color: #b00404;
  /* text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; */
  text-align: center;
  align-self: center;
  background-color: rgba(174, 179, 190, .9);
  padding: 2vmin;
  border-radius: 3vmin;
  font-size: x-large;
}

#hometxt {
  color: #b00404;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: 5vmin;
}

#loginoutnav img {
  height: 5vmin;
}

#idxhome {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 70vmin;
  gap: 1vmin;
}

#home-gif {
  background-image: url('https://i.gifer.com/E4vJ.gif');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 2vmin;
  padding: 3vmin;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 3vmin;
}

#LAMS-txt {
  font-size: 27vmin;
  text-decoration: underline;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 3px #2bba00;
  font-weight: 700;
  pointer-events: none;
  animation: fade 2.75s ease-in .5s infinite;
  opacity: 0;
}

@keyframes fade {
  0%{
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
  100%{
      opacity: 0.1;
  }
}

#homeh1 {
  color: #b00404;
  /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */
  text-align: center;
  align-self: center;
  background-color: rgba(174, 179, 190, .9);
  padding: 2vmin;
  border-radius: 3vmin;
  font-size: x-large;
}

#italic {
  font-style: italic;
}

a {
  color: #0362fc;
}

#idxartist {
  display: grid;
}

#addartfromroster {
  justify-self: center;
  margin: 1vmin;
  scale: 80%;
}

#addartbutton {
  background-color: #fc5e03;
  color: whitesmoke;
}

#rostertitle {
  color: #fc5e03;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  justify-self: center;
  font-size: 7vmin;
}

#rosterTH {
  background-color: #fc5e03;
}

#newartist {
  display: grid;
}

#newartist button {
  background-color: #fc5e03;
}

#allonelineroster {
  display: grid;
}

#addartisttitle {
  color: #fc5e03;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  justify-self: center;
}

#addartistform {
  background-color: rgba(174, 179, 190, .9);
  border-radius: 2vmin;
  padding: 2vmin;
  color: whitesmoke;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: medium;
}

#watchtosignedform {
  display: flex;
  flex-direction: column;
  border-radius: 2vmin;
  padding: 2vmin;
  color: whitesmoke;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: medium;
  align-items: flex-start;
}

#artdetailtext {
  width: 90%;
  resize: vertical;
  white-space: pre-wrap;
}

#artistdetail {
  display: grid;
  grid-template-columns: 90vw;
}

#onelineart {
  display: grid;
}

#artistdetailtitle {
  color: #fc5e03;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  justify-self: center;
  font-size: x-large;
  text-align: center;
}

#toeditartform {
  margin: 1vmin;
  scale: 90%;
  justify-self: center;
}

#artistdetail button {
  background-color: #fc5e03;
}

#allDetails {
  justify-self: center;
  display: flex;
  flex-direction: column;
  font-size: medium;
  color: whitesmoke;
  font-size: medium;
  background-color: rgba(174, 179, 190, .85);
  border-radius: 2vmin;
  padding: 1vmin;
  margin: 2vmin;
  max-width: 100%;
}

#artistpicdetail {
  scale: 70%;
  border: whitesmoke;
  border-style: solid;
  border-radius: 50%;
}

#details {
  color: orangered;
  font-size: medium;
}

#misc_details_box {
  color: whitesmoke;
  font-size: medium;
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow-y: scroll;
  max-height: 30vmin;
  max-width: 100%;
}

#addsongs {
  justify-self: center;
  color: whitesmoke;
  display: grid;
  grid-template-rows: 4;
  font-size: medium;
  margin: 2vmin;
  background-color: rgba(252, 94, 3, .5);
  padding: 2vmin;
  border-radius: 2vmin;
}

#addsongs > * {
  max-width: 50vw;
}

#addsongbutton {
  margin: 2vmin;
}

#discography {
  color: whitesmoke;
  padding: 2vmin;
  padding-left: 8vmin;
  padding-right: 8vmin;
  border-radius: 3vmin;
  font-size: large;
  justify-self: center;
}

#songstable {
justify-self: center;
table-layout: fixed;
}

#songstable iframe {
  max-width: 15vmin;
  max-height: 16vmin;
  overflow: scroll;
}

#dealsforartist {
  margin-bottom: 2vmin;
}

#dealsforartist > a {
  color: #6b03fc;
}

#details {
  color: orangered;
  text-decoration: underline;
}

#editartistdetail {
  display: flex;
  flex-direction: column;
  max-height: 130vmin;
}

#editartistdetail button {
  background-color: #fc5e03;
}

#editform {
  display: flex;
  flex-direction: column;
  color: whitesmoke;
  font-size: medium;
  background-color: rgba(174, 179, 190, .9);
  border-radius: 2vmin;
  padding: 1vmin;
  margin: 3vmin;
}

#currentDatelabel {
  font-size: small;
}

#editDetailsBox {
  resize: vertical;
  white-space: pre-wrap;
}

#idxdeals {
  display: grid;
}

#dealtitle {
  color: #6b03fc;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  justify-self: center;
  align-self: center;
  text-align: center; 
  font-size: 8vmin;
}

#adddlpform {
  justify-self: center;
  align-self: center;
  margin: 1vmin;
  scale: 90%;
}

#adddlpgbutton {
  background-color: #6b03fc;
  color: whitesmoke;
}

#dealsidxtable thead {
  background-color: #6b03fc;
}

#dealsidxtable td:nth-child(3) {
  text-align: center;
  scale: 80%;
}

#dldtlbutton {
  background-color: #6b03fc;
  color: whitesmoke;
}

#adddealtitle {
  color: #6b03fc;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  justify-self: center;
  align-self: center;
  text-align: center; 
  font-size: x-large;
}

#dealsadd {
  display: flex;
  flex-direction: column;
  color: whitesmoke;
  font-size: medium;
  background-color: rgba(174, 179, 190, .9);
  border-radius: 2vmin;
  padding: 1vmin;
  margin: 3vmin;
}

#adddealdetails {
  resize: vertical;
}

#newdeal button {
  background-color: #6b03fc;
  color: whitesmoke;
}

#dealdetail {
  display: grid;
  color: whitesmoke;
  grid-template-columns: 90vw;
}

#dealdetail button {
  background-color: #6b03fc;
  color: whitesmoke;
}

#onelinedealdet {
  display: grid;
}

#dealdetailtitle {
  color: #6b03fc;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  justify-self: center;
  align-self: center;
  text-align: center; 
  font-size: 8vmin;
}

#toeditbutton {
  justify-self: center;
  align-self: center;
  scale: 90%;
  margin: 2vmin;
}

#allDealdetails {
  display: flex;
  flex-direction: column;
  font-size: medium;
  background-color: rgba(174, 179, 190, .9);
  border-radius: 2vmin;
  padding: 1.5vmin;
  margin: 2vmin;
  max-width: 100%;

}

#dealinfo p {
  word-wrap: break-word;
  overflow-y: scroll;
  height: 30vmin;
  max-width: 100%;
}

#editdealdetail {
  display: grid;
  justify-content: start;
}

#dealeditform {
  display: flex;
  flex-direction: column;
  color: whitesmoke;
  font-size: medium;
  background-color: rgba(174, 179, 190, .9);
  border-radius: 2vmin;
  padding: 1vmin;
  margin: 3vmin;
}

#dealdetailsbox {
  resize: vertical;
  margin-bottom: 2vmin;
}

#idxwatch {
  display: grid;
  max-height: 130vmin;
}

#wtchsameline {
  display: grid;
}

#watchaddartdform {
  justify-self: center;
  margin: 4vmin;
  scale: 70%
}

#addartbutton {
  padding: 1vmin;
  align-self: center;
}

#watchtitle {
  color: #2bba00;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  justify-self: center;
}

#edituserinfo {
  display: grid;
  grid-template-columns: 1fr;
}

#userbackhome {
  display: none;
}

#useredittitle {
  grid-column: 2/3;
  color: #b00404;
  text-shadow: -1px 0 , 0 1px white, 1px 0 white, 0 -1px white;
  justify-self: center;
  text-align: center;
  align-self: center;
}

#userbackhome {
  background-color: #b00404;
  color: white;
}

#userbackhome:hover {
  background-color: white;
  color: #b00404;
}

#usereditform {
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  color: #b00404;
  font-size: medium;
  background-color: rgba(174, 179, 190, .7);
  padding: 2vmin;
  border-radius: 2vmin;
}

#usereditform label {
  text-decoration: underline;
  font-weight: bolder;
}

#usereditform input {
  font-family: 'Josefin Sans';
}

#usereditform > * {
  margin: 1vmin;
}

#usereditform button {
  background-color: #b00404;
  color: whitesmoke;
  padding: 1vmin;
}

#myartists {
  text-shadow: -1px 0 #b00404, 0 1px #b00404, 1px 0 #b00404, 0 -1px #b00404;
  justify-self: center;
  background-color: rgba(174, 179, 190, .7);
  padding: 1vmin;
  border-radius: 1vmin;
}

#myartists a {
  color: #fc5e03;
}

#mydeals {
  text-shadow: -1px 0 #b00404, 0 1px #b00404, 1px 0 #b00404, 0 -1px #b00404;
  background-color: rgba(174, 179, 190, .7);
  padding: 1vmin;
  border-radius: 1vmin;
  justify-self: center;
}

#mydeals a {
  color: #6b03fc;
}

.table{
  width: 100%;
}

.table, th, td {
  color: white;
  background-color: rgba(174, 179, 190, .9);
  border-collapse: collapse;
  border: .5vmin solid;
}

#watchTH {
  background-color: #2bba00;
}

td {
  text-align: center;
}

td:last-child {
  width: 15%;
}

.delete-button {
  scale: 70%;
}

.delete-button button {
  background-color: #b00404;
  color: whitesmoke;
}

#artdtlbutton {
  scale: 70%;
  background-color: #fc5e03;
  
}

.go-back {
  justify-self: center;
  align-self: center;
  scale: 90%;
  margin: 1vmin;
}

.none {
  color: darkred;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  justify-self: center;
  align-self: center;
}

}
/* ============================================================================ */
@media (min-width: 1001px) {

  body {
    display: grid;
    background-image: url('https://i.imgur.com/Pt9LcsL.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    padding: 3vmin;
    /* font: 3vmin 'Sriracha', 'Josefin Sans', "Lucida Grande", Helvetica, Arial, sans-serif; */
    font: 3vmin 'Aoboshi One', 'Josefin Sans', "Lucida Grande", Helvetica, Arial, sans-serif;
  }
  
  body button {
    font-family: 'Josefin Sans';
  }
  
  .topnav {
    overflow: hidden;
    background-color: rgba(174, 179, 190, .4);
    border-radius: 2vmin;
    position: relative;
  }
  
  .topnav #myLinks {
    display: none;
  }
  
  .topnav a {
    color: white;
    padding: 2vmin;
    text-decoration: none;
    font-size: 3vmin;
    display: block;
  }
  
  nav > a:hover:not(.active) {
    color: whitesmoke;
  }
  
  .topnav > a.active {
    color: red;
    cursor: default;
  }
  
  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .active {
    background-color: #6bd681;
    color: white;
  }
  
  #hometxt {
    color: #b00404;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: 3vmin;
  }

  #italic {
    font-style: italic;
  }
  
  #loginoutnav img {
    height: 5vmin;
  }
  
  #idxhome {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    height: 70vmin;
    gap: 1vmin;
  }
  
  #home-gif {
    background-image: url('https://i.gifer.com/E4vJ.gif');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2vmin;
    padding: 3vmin;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3vmin;
  }
  
  #LAMS-txt {
    font-size: 27vmin;
    text-decoration: underline;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px #2bba00;
    font-weight: 700;
    pointer-events: none;
    animation: fade 2.75s ease-in .5s infinite;
    opacity: 0;
  }
  
  @keyframes fade {
    0%{
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100%{
        opacity: 0.1;
    }
  }
  
  
  #welcomeuser {
    color: #b00404;
    /* text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; */
    text-align: center;
    align-self: center;
    background-color: rgba(174, 179, 190, .7);
    padding: 2vmin;
    border-radius: 3vmin;
    width: 45%;
    max-width: 100%;
    font-size: x-large;
  }

  #homeh1 {
  color: #b00404;
  /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */
  text-align: center;
  align-self: center;
  background-color: rgba(174, 179, 190, .7);
  padding: 2vmin;
  border-radius: 3vmin;
  font-size: x-large;
  }
  
  
  a {
    color: #51a9fc;
  }
  
  #idxartist {
    display: grid;
    grid-template-rows: 15vmin 1fr;
  }
  
  #allonelineroster {
    grid-row: 1/2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  #addartfromroster {
    justify-self: left;
    align-self: center;
    scale: 90%;
  }

  #addartbutton {
    font-style: oblique;
    color: #fc5e03;
    background-color: black;
  }
  
  #addartbutton:hover {
    background-color: white;
  }

  #rostertitle {
    color: #fc5e03;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    justify-self: center;
    position: absolute;
    font-size: 8vmin;
  }
  
  #artisttable {
    grid-row: 2/3;
  }

  #rosterTH {
    background-color: #fc5e03;
  }
  
  #artistdetlinkcell:hover {
    background-color: rgba(252, 94, 3, .7);
  }

  #newartist {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  #addartisttitle {
    color: #fc5e03;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    justify-self: center;
  }
  
  #addartistform {
    background-color: rgba(174, 179, 190, .4);
    border-radius: 2vmin;
    padding: 2vmin;
    color: whitesmoke;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: medium;
  }

  
  #artdetailtext {
    width: 90%;
    resize: vertical;
  }
  
  #artistdetail {
    display: grid;
    grid-template-rows: 15vmin 1fr;
  }
  
  #onelineart {
    grid-row: 1/2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  #artistdetailtitle {
    grid-column: 2/3;
    color: #fc5e03;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    justify-self: center;
    text-align: center;
    position: absolute;
  }
  
  #toeditartform {
    grid-column: 1/2;
    margin: 1vmin;
    justify-self: left;
    align-self: center;
  }

  #toeditartbut {
    color: #fc5e03;
    font-style: oblique;
  }

  #toeditartbut:hover {
    background-color: black;
  }

  #allelspasttitle {
    grid-row: 2/3;
    display: grid;
  }

  #rosterbackhome {
    background-color: #fc5e03;
    color: #2bba00;
    font-style: oblique;
    font-weight: bold;
  }

  #rosterbackhome:hover {
    background-color: #2bba00;
    color:  #fc5e03;
  }

  #wtchbackhome {
    background-color: #2bba00;
    color:  #fc5e03;
    font-style: oblique;
    font-weight: bold;
  }

  #wtchbackhome:hover {
    background-color: #fc5e03;
    color: #2bba00;
  }

  #allDetails {
    justify-self: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(5, auto);
    color: whitesmoke;
    font-size: medium;
    background-color: rgba(174, 179, 190, .9);
    border-radius: 2vmin;
    padding: 1vmin;
    width: 75%;
    max-width: 100%;
  }

  #watchtosignedform {
    grid-column: 1/2;
    display: flex;
    flex-direction: column;
    border-radius: 2vmin;
    padding: 2vmin;
    color: whitesmoke;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: medium;
    align-items: flex-start;
  }

  #artistpicdetail {
    grid-column: 2/3;
    grid-row: 1/2;
    justify-self: right;
    max-width: 50vmin;
    max-height: 50vmin;
    border: whitesmoke;
    border-style: solid;
    border-radius: 50%;
  }

  #assignedto {
    grid-row: 1/2;
    grid-column: 1/2;
    align-self: center;
  }

  #signeddate {
    grid-row: 2/3;
    grid-column: 1/2;
    align-self: center;
  }

  #dealsforartist {
    grid-row: 3/4;
    margin-bottom: 2vmin;
  }

  #dealsforartist > a {
    color: #6b03fc;
  }
  
  #allDetails div {
    grid-column: 1/3;
    max-width: 50%;
  }

  #details {
    color: orangered;
    text-decoration: underline;
  }
  
  #misc_details_box {
    color: whitesmoke;
    font-size: medium;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow-y: scroll;
    max-height: 30vmin;
    max-width: 100%;
    grid-column: 1/3;
  }
  
  #addsongs {
    justify-self: center;
    color: whitesmoke;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: medium;
    margin: 2vmin;
    background-color: rgba(252, 94, 3, .7);
    padding: 2vmin;
    border-radius: 2vmin;
    width: 70vw;
    gap: .5vmin;
  }
  
  #addsongs > * {
    text-align: center;
    font-size: 2vmin;
  }

  #addsongs input {
    min-width: 2vmin;
  }
  
  #addsongbutton {
    margin: 2vmin;
    background-color: black;
    color: #fc5e03;
  }

  #addsongbutton {
    margin: 2vmin;
    background-color: black;
    color: #fc5e03;
  }

  #addsongbutton:hover {
   background-color: #fc5e03;
    color: black;
  }
  
  #discography {
    color: #2bba00;
    text-shadow: -1px 0 #fc5e03, 0 1px #fc5e03, 1px 0 #fc5e03, 0 -1px #fc5e03;
    padding: 2vmin;
    justify-self: center;
  }

  #editartistdetail {
    display: flex;
    flex-direction: column;
    max-height: 130vmin;
  }
  
  #editartistdetail .go-back {
    align-self: flex-end;
  }

  #editform {
    justify-self: left;
    display: grid;
    grid-template-columns: 1fr;
    color: whitesmoke;
    font-size: medium;
    background-color: rgba(174, 179, 190, .9);
    border-radius: 2vmin;
    padding: 1vmin;
    margin: 3vmin;
    width: 50%;
  }
  
  #editform > * {
    margin: 1vmin;
  }

  #editform input {
    max-width: 50%;
  }

  #editform button {
    max-width: 50%;
    background-color: #fc5e03;
    color: #2bba00;
    font-size: large;
    font-style: oblique;
    font-weight: bold;
  }

  #editform button:hover {
    background-color: #2bba00;
    color: #fc5e03;
  }

  #currentDatelabel {
    font-size: small;
  }
  
  #editDetailsBox {
    width: 95%;
    resize: vertical;
  }

  #updateuser {
    align-self: left;
    display: grid;
    grid-template-columns: 1fr;
    color: whitesmoke;
    font-size: medium;
    background-color: rgba(174, 179, 190, .9);
    border-radius: 2vmin;
    padding: 1vmin;
    margin: 1vmin;
    width: 25%;
  }
  
  #submituserupdatebutton {
    background-color: #fc5e03;
    color: #2bba00;
    font-size: large;
    font-style: oblique;
    font-weight: bold;
  }

  #submituserupdatebutton:hover {
    background-color: #2bba00;
    color: #fc5e03;
  }

  #idxdeals {
    display: grid;
  }
  
  #dealtitle {
    color: #6b03fc;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    justify-self: center;
    align-self: center;
    text-align: center;
    font-size: 8vmin;
  }
  
  #adddlpform {
    justify-self: center;
    align-self: center;
    margin: 3vmin;
  }
  
  #adddlpgbutton {
    background-color: #6b03fc;
    color: whitesmoke;
    border-style: solid;
    border-color: white;
    scale: 90%;
    padding: 1vmin;
  }

  #adddlpgbutton {
    background-color: #6b03fc;
    color: whitesmoke;
    font-style: oblique;
  }
  
  #adddlpgbutton:hover {
    background-color: whitesmoke;
    color: #6b03fc;
  }

  #dealsidxtable thead {
    background-color: rgba(107, 3, 252, .4);
  }
  
  #dldtlbutton {
    background-color: #6b03fc;
    color: whitesmoke;
  }

  #dealsidxtable td:nth-child(3) {
    text-align: center;
    scale: 100%;
  }
  
  #dealsidxtable td:nth-child(3):hover {
    background-color: rgba(107, 3, 252, .6);
  }
  
  #newdeal {
    display: grid;
    grid-template-columns: 1fr;
  }

  #adddealtitle {
    justify-self: center;
    color: #6b03fc;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    justify-self: center;
    align-self: center;
    text-align: center; 
  }
  
  #dealsadd {
    justify-self: center;
    display: flex;
    flex-direction: column;
    color: whitesmoke;
    font-size: medium;
    background-color: rgba(174, 179, 190, .9);
    border-radius: 2vmin;
    padding: 1vmin;
    margin: 3vmin;
   width: 75%;
  }
  
  #adddealdetails {
    resize: vertical;
  }

  #dealsadd button {
    font-size: large;
    font-style: oblique;
    background-color:#6b03fc;
    color: whitesmoke;
  }
  
  #dealdetail {
    display: grid;
    color: whitesmoke;
    grid-template-columns: 1fr;
  }
  
  #onelinedealdet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  #dealdetailtitle {
    grid-column: 2/3;
    color: #6b03fc;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    justify-self: center;
    align-self: center;
    text-align: center;
    font-size: 8vmin;
  }
  
  #toeditbutton {
    grid-column: 1/2;
    justify-self: left;
    align-self: center;
  }

  #toeditbutton button {
    background-color:#6b03fc;
    color: whitesmoke;
    font-style: oblique;
    font-size: large;
  }

  #toeditbutton button:hover {
    background-color:whitesmoke;
    color: #6b03fc;
  }

  #dealbackhome {
    background-color:#6b03fc;
    color: whitesmoke;
    font-style: oblique;
    font-size: large;
  }

  #dealbackhome:hover {
    background-color:whitesmoke;
    color: #6b03fc;
  }
  
  #allDealdetails {
    grid-row: 2/3;
    display: grid;
    grid-template-columns: 1fr;
    font-size: large;
    background-color: rgba(174, 179, 190, .9);
    border-radius: 2vmin;
    padding: 1.5vmin;
    margin: 2vmin;
    width: 75%;
    max-width: 100%;
  }

  #allDealdetails div {
    max-width: 75%;
    padding: 1vmin;
  }

  #allDealdetails form {
   display: grid;
   grid-template-columns: 40vmin;
  }
  
  #allDealdetails a {
    color:rgba(252, 94, 3, 1);
    font-weight: bold;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  }

  #allDealdetails a:hover {
    color:rgba(43, 186, 0, 1)
  }

  #allDealdetails button {
    background-color:#6b03fc;
    color: whitesmoke;
    font-style: oblique;
  }

  #allDealdetails button:hover {
    background-color:whitesmoke;
    color: #6b03fc;
  }

  #dealinfo p {
    word-wrap: break-word;
    overflow-y: scroll;
    white-space: pre-wrap;
    height: 30vmin;
    max-width: 100%;
  }
  
  #editdealdetail {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: start;
  }
  
  #dealbackhomefmedit {
    background-color:#6b03fc;
    color: whitesmoke;
    font-style: oblique;
    font-size: large;
    margin: 2vmin;
  }

  #dealbackhomefmedit:hover {
    background-color:whitesmoke;
    color: #6b03fc;
  }

  #dealeditform {
    display: flex;
    flex-direction: column;
    color: whitesmoke;
    font-size: medium;
    background-color: rgba(174, 179, 190, .9);
    border-radius: 2vmin;
    padding: 1vmin;
    margin: 3vmin;
    width: 50%;
    max-width: 100%;
  }
  
  #dealdetailsbox {
    resize: vertical;
    margin-bottom: 2vmin;
  }

  #dealeditform button {
    width: 50%;
    background-color:#6b03fc;
    color: whitesmoke;
    font-style: oblique;
  }
  
  #dealeditform button:hover {
    background-color:whitesmoke;
    color: #6b03fc;
  }

  #idxwatch {
    display: grid;
    grid-template-rows: 15vmin 1fr;
  }
  
  #wtchsameline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  #watchaddartdform {
    justify-self: left;
    align-self: center;
    scale: 90%;
  }
  
  #addartbutton {
    padding: 1vmin;
    align-self: center;
  }
  
  #watchtitle {
    color: #2bba00;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    justify-self: center;
    text-align: center;
    position: absolute;
  }

  #watchtable {
    grid-row: 2/3;
  }

  #watchTH {
    background-color: rgba(43, 186, 0, .5);
  }

  #watchartdtl:hover {
    background-color: rgba(43, 186, 0, .5);
  }

  #edituserinfo {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  #usereditoneline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  #useredittitle {
    grid-column: 2/3;
    color: #b00404;
    text-shadow: -1px 0 , 0 1px white, 1px 0 white, 0 -1px white;
    justify-self: center;
    text-align: center;
    align-self: center;
  }

  #userbackhome {
    background-color: #b00404;
    color: white;
  }

  #userbackhome:hover {
    background-color: white;
    color: #b00404;
  }

  #usereditform {
    justify-self: center;
    align-self: center;
    color: #b00404;
    font-size: medium;
    background-color: rgba(174, 179, 190, .7);
    padding: 2vmin;
    border-radius: 2vmin;
  }

  #usereditform > * {
    margin: 1vmin;
  }
  
  #usereditform label {
    text-decoration: underline;
  }
  
  #usereditform input {
    font-family: 'Josefin Sans';
  }
  
  #usereditform > * {
    margin: 1vmin;
  }
  
  #usereditform button {
    background-color: #b00404;
    color: whitesmoke;
    padding: 1vmin;
  }
  
  #myartists {
    text-shadow: -1px 0 #b00404, 0 1px #b00404, 1px 0 #b00404, 0 -1px #b00404;
    justify-self: center;
    background-color: rgba(174, 179, 190, .7);
    padding: 1vmin;
    border-radius: 1vmin;
  }
  
  #myartists a {
    color: #fc5e03;
  }

  #mydeals {
    text-shadow: -1px 0 #b00404, 0 1px #b00404, 1px 0 #b00404, 0 -1px #b00404;
    background-color: rgba(174, 179, 190, .7);
    padding: 1vmin;
    border-radius: 1vmin;
  }
  
  #mydeals a {
    color: #6b03fc;
  }

  .table{
    width: 100%;
  }
  
  .table, th, td {
    color: white;
    background-color: rgba(174, 179, 190, .6);
    border-collapse: collapse;
    border: .5vmin solid;
  }
  
  .table > th, td {
    padding: 1vmin;
  }

  td:nth-child(2) {
    text-align: center;
  }

  td:nth-child(3) {
    text-align: center;
  }
  
  td:last-child {
    width: 15%;
    text-align: center;
  }
  
  .delete-button {
    scale: 90%;
  }

  .delete-button button {
    background-color: #b00404;
    color: whitesmoke;
  }
  
  #artdtlbutton {
    scale: 100%;
    background-color: #fc5e03;
  }
  
  .none {
    color: darkred;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    justify-self: center;
    align-self: center;
  }
  
  .go-back {
    justify-self: right;
    align-self: center;
    grid-column: 3/4;
  }

  h2 {
    justify-self: center;
  }

}