html {
            -webkit-text-size-adjust: 100%;
            font-family: Söhne,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
            line-height: 1.5;
            tab-size: 4
        }

        table{

            margin: 1rem auto;
            text-align: center;
            width: 100%;
            max-width: 100%;
            border-collapse: collapse;
            border: 1px solid
        }


        thead{

            background-color: purple;
            color: white
        }


        th,td{padding:8px 0}

        tbody tr:nth-child(even) {

            background-color: #ddd
        }

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

            table,
            thead,
            tbody,
            th,
            td,
            tr{
                display: block
            }

            thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
            }

            td {
                position: relative;
                padding-left: 50%;
                white-space: normal;
                text-align: left
            }

            td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                font-weight: bold;
                white-space: nowrap;
                text-align:left;
                content: attr(data-title)
            }
        }

.modal {
  display: none; 

  position: fixed; 

  z-index: 1; 

  padding-top: 100px;

  left: 0;

  top: 0;

  width: 100%; 

  height: 100%;

  overflow: auto; 

  background-color: rgb(0,0,0);

  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;

  margin: auto;

  padding: 20px;

  border: 1px solid #888;

  width: 80%;
}

.close {
  color: #800080;

  float: right;

  font-size: 28px;

  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;

  text-decoration: none;

  cursor: pointer;
}

.my-button {
background-color: #800080;

color: white;
}

a {
  position: absolute;
  right: 0px;
  width: 300px;
  padding: 10px;
  color: #800080;
}