body {
  background-color : var(--purple);
}

h1 {
  font-size : 30px;
  letter-spacing: normal;
  width : auto;
  height : auto;
  padding : 0;
  margin : 0;
}

button:hover {
  background-color : white;
  border : 3px solid white;
  color : var(--dark-purple)!important;
}

button > span {
  color : white;
}

button:hover > span {
  color : var(--dark-purple)!important;
}

h2 {
  color : var(--dark-purple);!important;
}

* {
  color : white!important;
  text-align : center;
  font-family : var(--b);
  font-weight : bold;
}

table {
  border : 3px solid white;
}
td, th {
  padding : 5px 10px;
  border : 3px solid var(--purple);
  background-color : rgb(0,0,0,0.03);
  font-size : 16px;
  text-align : left;
}

.table-center {
  text-align : center;
}

td > img {
  height : 200px;
  width : auto;
}

section {
  display : flex;
  align-items : center;
  justify-content : center;
  flex-direction : column;
}

.flex-container {
  display : flex;
  align-items : center;
  justify-content : center;
  flex-direction : row;
  padding : 50px 0;
}

.dashboard-item {
  width : 20vw;
  height : 20vw;
  margin : 0 50px;
  border : 3px solid white;
  display : flex;
  align-items : center;
  justify-content : center;
  flex-direction : column;
  background-color : var(--purple);
  padding : 16px;
}

.dashboard-item > * {
  margin : 10px 0;
  max-width : 90%;
}

.dashboard-item > h2 {
  font-size : 30px;
}

span {
  color : black;
}

label {
  color : var(--dark-purple);;
  font-family : var(--b);
  font-size : 16px;
}

input {
  padding : 5px 10px;
  background-color : rgb(255,255,255,0.05);
  color : var(--dark-purple);;
  font-family : var(--b);
  text-align : left;
  border : 0;
  width : 90%;
  font-size : 16px;
}

form {
  display : flex;
  flex-direction : column;
  align-items : center;
  justify-content : center;
  width : 40vw;
  padding : 40px;
  margin : 0;
  border : 3px solid white;

}

td > form {
  box-shadow : none;
  width : auto;
  padding : 0;
  display:block;
}

#status-update {
  position : relative;
  top : 50px;
}

.link-button {
  padding : 5px;
  background-color : rgb(0,0,0,0)!important;
  border : 0;
  color : var(--dark-purple);;
  cursor : pointer;
}

.changed {
  background-color : #C8D935;
  border : 0;
}

form > span {
  display : flex;
  flex-direction : column;
  align-items : flex-start;
  justify-content : center;
  width : 80%;
  margin : 2px 0;
}

form > span > * {
  margin : 2px 0;
  text-align : left;
}

form  > span > img {
  width : 90%;
  height : auto;
}

textarea {
  width : 93%;
  height : 20vh;
  resize : none;
  font-size : 16px;
  background-color : rgb(255,255,255,0.05);
  color : var(--dark-purple);;
  font-family : var(--b);
  border : 0;
  text-align : left;
}

input[type="file"] {
  font-size : 16px;
}

#dashboard {
  position : absolute;
  left : 0;
  top : 0;
}

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

  body > div, body > form, body > section {
    position : relative;
    top : 20px;
  }

  table {
    border : 0;
    border : 3px solid white;
    width : auto;
    margin : 0 50px;
  }

  section:has(table) {
    width : 90vw;
    overflow-x : scroll;
    display : flex;
    align-items : flex-start;
    justify-content : flex-start;
    position : relative;
  }

  section:has(table) > h2 {
    position : relative;
    left : 25vw;
    width : 50vw;
    text-align : center;
  }


  td, th {
    padding : 2px 5px;
    border : 2px solid var(--purple);
    font-size : 15px;
    text-align : left;
  }

  td > img {
    height : 50px;
    width : auto;
  }

  .flex-container {
    flex-direction : column;
    align-items : center;
    justify-content : center;
    padding : 0;
  }

  .dashboard-item {
    width : 60vw;
    height : 60vw;
    margin : 50px 0;
  }

  .dashboard-item > h2 {
    font-size : 30px!important;
  }

  #shadow-host-companion {
    display : none;
  }

  input {
    padding : 5px 10px;
    background-color : rgb(255,255,255,0.05);
    color : var(--dark-purple);;
    font-family : var(--b);
    text-align : left;
    border : 0;
    width : 90%;
    font-size : 16px;
  }

  form {
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    width : 80vw;
    height : auto;
    margin : 0 0 0 50px;
    padding : 20px;
    margin : 0;
    border : 3px solid white;

  }

  p, input, label {
    font-size : 14px!important;
    width : auto;
    padding : 5px;
  }

  td > form {
    box-shadow : none;
    width : auto;
    padding : 0;
    display:block;
  }

  #status-update {
    position : relative;
    top : 50px;
  }

  .link-button {
    padding : 5px;
    background-color : rgb(0,0,0,0)!important;
    border : 0;
    color : var(--dark-purple);;
    cursor : pointer;
  }

  .changed {
    background-color : #C8D935;
    border : 0;
  }

  form > span {
    display : flex;
    flex-direction : column;
    align-items : flex-start;
    justify-content : center;
    width : 80%;
    margin : 2px 0;
  }

  form > span > * {
    margin : 2px 0;
    text-align : left;
  }

  form  > span > img {
    width : 90%;
    height : auto;
  }

  textarea {
    width : 93%;
    height : 20vh;
    resize : none;
    font-size : 16px;
    background-color : rgb(255,255,255,0.05);
    color : var(--dark-purple);;
    font-family : var(--b);
    border : 0;
    text-align : left;
  }

  input[type="file"] {
    font-size : 16px;
  }

  #dashboard {
    position : absolute;
    left : 0;
    top : 0;
  }

}