html,
body {
  height: 100vh;
  margin: 0;
  font-size: 1rem;
  background-color: #fce2fa;
}
* {
  box-sizing: border-box;
}

@font-face {
  font-family: "Bitmap-Times";
  src: url(../fonts/TimesNewRomanBitmap.ttf);
}
.parent {
  width: 1080px;
  height:100%;
  margin: auto;
}
.flex {
  display:flex;
}

nav {
  height:30px;
  margin: 10px;
}
main {
  margin: 10px;
  width:1000px;
  border: 2px solid rgb(238, 48, 255);
}

#box {
  border: 2px solid pink;
  background-color: bisque;
  margin: 15px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li {
  float: left;
}
ul li a {
  text-align: center;
  padding: 14px 16px;
}
.accordian {
  border: 1px solid grey;
}
input {
  display: none;
}
label {
  display: block;
  cursor: pointer;
  user-select: none;
}
.accordian div {  
  height:0;
  overflow:hidden;
  opacity:0;
}
input:checked ~ div {
  padding: 10px;
  opacity: 1;
  height: auto;
}

.tab {
  overflow: hidden;
}

.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
}

.tabcontent {
  display: none;
}
img {
  max-width: 100%;
  height: 100px;
}

th {
  min-width: 100px;
}

@media only screen and (max-width: 800px) {
  .parent {
    margin: 10px auto;
    width: auto;
  }
  main {
    margin: 10px auto;
    width: auto;
  }
  section {
    display:none;
  }
  table, thead, tbody, th, td, tr {
    display: block;
  }
  tr {
    margin-bottom: 1rem;
    border: 1px solid #ccc;
  }
  td {
    border: none;
    position: relative;
    padding-left: 50%; 
    text-align: right;
  }
}