/** BASIC */
html {
    font-size: 100%;    
}

.mobile {
    display: none;
}

body {
    margin: 0px 0px 0px 0px;
    font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size:1.3em;
    color:#ffffff;
    background-color:#5e5f6e;
}

h1 {
    font-family: monospace, "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    font-size: 3.0em;
    font-weight: bold;
    text-transform: uppercase;
}

a {
    color: #5aa2ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #9ac5ff;
}

/** HEADER */
header {
     /* position: fixed;
    top: 0;
    z-index: 1; 
    width: 100%;
    height: 100%; */
    height: 400px;
    background: url(images/Robo.jpg) no-repeat center top;
    background-size: cover;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.6)), url(images/Robo.jpg);
    text-align: center;
    background-attachment: fixed;
    
}

header h1 {
    margin: 0px;
    position: relative;
    top: 35%;
    left: -30vw;
}

/** Table */
main {
    margin-top: 20px;
}
table {
    table-layout: fixed;
    width: 95%;
    height: 30em;
    margin: auto;
    border-collapse: collapse;
}

#Selector {
    width: 95%;
    height: 3em;
    margin: auto;
    border-collapse: collapse;
    background-color: rgb(60, 66, 83);
    border: 3px solid rgb(60, 66, 83);
}

#HS24 {
    width: max-content;
}



#HS25 {
    width: max-content;
    background-color: rgb(96, 106, 133);
    border: 3px soli d  rgb(90, 99, 124);
}


thead {
    background-color: rgb(60, 66, 83);
    border: 3px solid rgb(60, 66, 83);
}

tbody tr td:first-child, td:nth-child(3), td:nth-child(4), td:nth-child(5) {
    text-align: center;
}

thead th:nth-child(1) {
    width: 5em;
    /*width: 7%;*/
}

thead th:nth-child(3) {
    width: 5em;
    /*width: 10%;*/
}

thead th:nth-child(4) {
    width: 5em;
    /*width: 10%;*/
}

thead th:nth-child(5) {
    width: 5em;
    /*width: 10%;*/
}

thead th:nth-child(6) {
    width: 5em;
    /*width: 10%;*/
}

/* zebra striping */

tbody tr:nth-child(odd) {
    background-color: rgb(71, 78, 97);
  }
  
tbody tr:nth-child(even) {
    background-color: rgb(96, 106, 133);
    border: 3px soli d  rgb(90, 99, 124)
  }

caption {
    padding-bottom: 17px;
}

caption strong {
    color: rgb(255, 113, 113);
}


/** Section */

section {
    margin: auto;
    text-align: center;
    padding-bottom: 20px;
}



h2 {
    text-decoration: underline;
}

section table {
    table-layout: fixed;
    width: 30%;
    height: auto;
}

footer {
    padding: 30px 0px 30px 0px;
    bottom: auto;
    text-align: center;
    background-color: #484855;
}

@media(max-width: 90rem) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }
    
    body {
        font-size: 1.3em;
    }

    table {
        font-size: .7em;
    }

    section table {
        width: 40%;
    }

    section h2 {
        font-size: 1em    
    }

    footer {
        font-size: .7em    
    }
}

@media(max-width: 45rem) {
    table {
        font-size: .60em;
    }

    section table {
        width: 95%;
    }

    main td:nth-of-type(2) {

        display: none;
    }
    main th:nth-child(2) {
        display: none;
    }    
    
}