html {box-sizing: border-box}
*, *:before, *:after {box-sizing: inherit}
body {margin:0;font-family:sans-serif;color:#1d2a4d}
img {height:auto}
a:focus{outline:none}

.clear {clear:both}

.wrap {max-width:75rem;margin:auto;padding:0.5rem 1rem}

.center {text-align:center}

.header {background:linear-gradient(90deg, #f39200 50%, #2f4174 50%)}
.header .wrap {background:url(top.png) no-repeat center/cover;height:4.5rem}
.logo {width:6.5rem;margin-left:0.5rem;margin-top:0.5rem}
input[type=submit] {background:#f39200;color:white;padding:1rem 2rem;border-radius:0.5rem;border:none;font-weight:bold}

.students {background:#f9f9f9;min-width:85%;border-radius:1rem;padding:0.5rem 1.5rem;margin-bottom:1rem}
.legend {color:#2cb27c;font-weight:bold;margin-bottom:1rem;padding:0 1rem}
span {color:gray;font: 0.9rem normal}

@media screen and (max-width:699px) {
  .students .r {padding:0.5rem 0;border-top:solid thin gray}
  .students .r:first-child {border-top:none}
  .students .c {padding-bottom:0.5rem}
  .students .c::before {content: 'Student Name'; display: block; font-weight:bold; font-size:smaller;padding:0.5rem 0}
  .students .c+.c::before {content: 'Status'; display: block; font-weight:bold; font-size:smaller}
  .students .c+.c+.c::before {content: 'Date'; display: block; font-weight:bold; font-size:smaller}

  .legend .c:nth-child(odd) {display:list-item;list-style-type:"\2193";padding:0.25rem 0.5rem}
  .legend .c:nth-child(even) {display:none}
  }

@media screen and (min-width:700px) { 
  .header .wrap {height:6.5rem}
  .logo {margin-left:4.5rem;margin-top:1.5rem}

  .t {display:table; margin-left:auto;margin-right:auto}
  .r {display:table-row}
  .t .c {display:table-cell}

  .students {padding:1.5rem 4rem}
  .students .c {padding:0.5rem 1rem;padding-left:0;border-top:solid thin gray}
  .students .r:first-child .c {border-top:none}
  .students .r:first-child .c::before {content: 'Student Name'; display: block; font-weight:bold; font-size:smaller;padding-bottom:1rem}
  .students .r:first-child .c+.c::before {content: 'Status'; display: block; font-weight:bold; font-size:smaller}
  .students .r:first-child .c+.c+.c::before {content: 'Date'; display: block; font-weight:bold; font-size:smaller}

  .legend {max-width:85%}
  .legend .c {vertical-align:top}
  .legend .c:nth-child(odd) {width:20%;}
  .legend .c:nth-child(even) {font-size:2.5rem;line-height:0.6rem;padding:0 0.5rem;}
  }