style.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<base target="_top">

<style>

body {
  background-attachment: fixed;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    
}
* {
color: #f0f0f0;
}

input, select, textarea, button {
  color: black;
  border-radius: 0;
  background-color: white;
  border: none;
  padding: 5px;
}
input[type=submit], button {
  background-color: <?= accentColor ?>;
  color: white;
  padding: 10px 30px;
}
  b {
      color: <?= accentColor ?>;
  }

.page {
min-height: 100vh; padding-top: 5vh; padding-bottom: 5vh; box-sizing: border-box;
}

li {
  list-style: none;
}
ul {
  padding-left: 0;
}

td, th {
padding: 5px ;
}
td.left-column {
  width: 20%;
  }
 
.translucent-background {
  background-color: rgba(0,0,0,0.8);
  border: 3px solid <?= accentColor ?>;
  width: 80vw;
  min-height: 90vh;
  padding:5vh 0;
  margin: 0 auto;
}
@media screen and (max-width: 1475px) {
  .translucent-background {
    width: 95vw;
    }
}



table {
 border-collapse: collapse;
max-width: 88vw;
}

.location-pref {
display: none;
}

label {
font-weight: normal;
}

@media screen and (max-width: 650px) {
  .translucent-background {
    width: 100vw;
    border: none;
    }
    table: {
      max-width: 100vw;
    }
    
    .page {
      margin: 0 auto;
      padding: 0;
      }
    }
  input.actionLink {
    background:none!important;
     border:none; 
     padding:0!important;
    
    /*optional*/
    font-family:arial,sans-serif; /*input has OS specific font-family*/
     color:#337ab7;
     cursor:pointer;
}
input.actionLink:hover {
text-decoration: underline;
color:#23527c;
}

</style>