@media (min-width:41em){
body{
    font-family: sans-serif;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.315);
    margin:auto;
    max-width: 80em;
    min-height: 60em;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows:15px 100px 100px 2fr 3fr;
    display: grid;
}
img{
    width: auto;
}
textarea{
    min-width: 600px;
    min-height: 200px;
}
#timeout{
    display: contents;
    grid-row: 1/2;
    grid-column: 1/-1;
}
#test{
    margin:auto;
    grid-row: 1/2;
    grid-column: 2/3;
}
#message{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
table, thead, td{
    border: 1.5px solid rgb(0, 0, 0);
    text-align: left;
    margin: auto;
}
td{
    padding: 3px;
}
#go{
    text-align: center;
    width:100%;
    grid-column: 1/-1;
    grid-row: 4/5;
}
article{
    text-align: center;
    grid-row: 4/5;
    grid-column: 1/-1;
    display: grid;
}
article h1{
    font-size: 2em;
}
#logo_box{
    grid-column: 2/3;
    grid-row: 3/4;
}
fieldset{
    margin:auto;
    /*max-width: 340px;*/
}
form {
    padding-top: 5px;
    grid-column: 100%;
    border: 1px solid black;
    border-radius:0px 0.5em 0.5em;
    background-color: whitesmoke;
}
input{
    float:left;
    width: 85%;
    font-size: 1.1em; 
    padding: 4px;
    margin-left: 10px;
    font-family: inherit;
    font-weight: lighter;
    border-radius:0px 0.5em 0.5em;
}
form label{
    margin-left: 5px;
    width: auto;
    display: block;
    text-align: left;
}
button{
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;
    background-color: rgb(47, 161, 228);
    border-radius:0px 0.5em 0.5em;
    width: auto;
    font-size: 20px;
    transition-duration: 0.4ms;
}
}
@media (min-width: 8em) and (max-width: 41em){
    body{
        font-family: sans-serif;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.315);
        margin:auto;
        max-width: 80em;
        max-height: fit-content;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows:10px 0.1fr 0.2fr 5fr 1fr;
        display: grid;
    }
    img{
        width: auto;
    }
    #timeout{
        display: contents;
        grid-row: 1/2;
        grid-column: 1/-1;
    }
    #test{
        margin:auto;
        grid-row: 1/2;
        grid-column: 2/3;
    }
    table, thead, td{
        border: 1.5px solid rgb(0, 0, 0);
        text-align: left;
        margin: auto;
    }
    td{
        padding: 3px;
    }
    #go{
        text-align: center;
        width:100%;
        grid-column: 1/-1;
        grid-row: 4/5;
        font-size: 2em;
    }
    article{
        text-align: center;
        grid-row: 4/5;
        grid-column: 1/-1;
        display: grid;
    }
    #message{
        text-align: center;
        margin-left: 10px;
        margin-right: 10px;
    }
    article h1{
        font-size: 2em;
    }
    article h2{
        font-size: 1em;
    }
    #logo_box{
        grid-column: 2/3;
        grid-row: 3/4;
    }
    fieldset{
        margin:auto;
    }
    form {
        padding-top: 5px;
        grid-column: 100%;
        border: 1px solid black;
        border-radius:0px 0.5em 0.5em;
        background-color: whitesmoke;
    }
    input{
        float:left;
        width: 85%;
        font-size: 1.1em; 
        padding: 4px;
        margin-left: 10px;
        font-family: inherit;
        font-weight: lighter;
        border-radius:0px 0.5em 0.5em;
    }
    form label{
        margin-left: 5px;
        width: auto;
        display: block;
        text-align: left;
    }
    form button{
        text-align: center;
        margin-top: 2%;
        margin-bottom: 2%;
        background-color: rgb(47, 161, 228);
        border-radius:0px 0.5em 0.5em;
        width: auto;
        font-size: 20px;
        transition-duration: 0.4ms;
    }
    button{
        text-align: center;
        margin-top: 2%;
        margin-bottom: 2%;
        background-color: rgb(47, 161, 228);
        border-radius:0px 0.5em 0.5em;
        width: auto;
        font-size: 20px;
        transition-duration: 0.4ms;
    }
}
#table_button{
    margin-top: 0%;
    margin-bottom: 0%;
}
#button_same>a>button{
    width: 250px;
    
}
/* Customize the label (the container) */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    margin-top: 1.5em;
    margin-left: 0.5em;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  /* Create a custom checkbox */
.checkmark {
    position: absolute;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
  }
  
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container input:checked ~ .checkmark {
    background-color: #2196F3;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  /* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}