@font-face {
    font-family: 'startrek';
    src: url('/stfont.woff2') format('woff2'),
        url('/stfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
* {
    box-sizing:border-box;
    margin:0;
    font-family:sans-serif;
}
.show {
    font-family:"startrek";
    font-size:64px;
}
.yellow {
    color: yellow;
}
.blue {
    color:rgba(21,121,255,1);
}
html {
    background-color:black;
}
body {
    background-color:rgba(33,33,33,1);
    background:url("/stars.webp");
    background-repeat: repeat;
    color: white;
    margin:8px;
}
form {
    display: flex;
    flex-direction:column;
    flex-wrap: nowrap;
}
input[type='checkbox'] {
    margin-right: 16px;
    margin-left: 8px;
    font-size: 48px;
    margin-top: 32px;
    height: .8em;
    width: .8em;
}
@media (pointer: fine) {
    .selectable:hover {
        background-color: #3dbc9899;
    }
}
@media (pointer: course) {
    .show:active,
    .show:focus {
        background-color: #3dbc9899;
    }
}

label {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.flexrow {
    display: flex;
    flex-wrap: nowrap;
}
.flexgrow {
    flex-grow:100;
}
.bigfont {
    font-size: 20px;
}
.bump {
    margin-bottom:8px;
}
img {
        max-width:calc(33vw - 16px);
        width:calc(33vw - 16px);
    }

@media screen and (max-width: 768px) {
    input[type='checkbox'] {
        margin-right: 16px;
        margin-left: 8px;
        font-size: 24px;
        margin-top: 12px;
        height: .8em;
        width: .8em;
    }
    .show {
        font-family:"startrek";
        font-size:32px;
    }
    img {
        max-width:calc(100vw - 16px);
        width:calc(100vw - 16px);
    }
}
input[type='submit'] {
    margin: 12px;
    font-size: 20px;
}

h3 {
    font-style:italic;
}
.bold {
    font-weight:bold;
}
.hide {
    display: none;
}
.minheight {
    min-height:64px;
}
img {
    max-width: 0;
    height:0;
    opacity: 0;
}
.grow {
    animation: scaleUp .35s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    transform-origin:center;
}
.fadein {
    animation: fadeInSlide .25s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    transform-origin:center;
}
@keyframes fadeInSlide {
    0% { 
        opacity: 0;
        transform: translateY(5vh);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes scaleUp {
    0% { 
        transform: scale(0);
        max-width: 0;
        height:0;
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        transform: scale(.95);
        max-width: calc(100vw - 16px);
        height:auto;
        opacity: 1;
    }
}
h3 > a {
    color: white;
    font-weight: bold;
}
h3 > a:visited {
    color: white;
}

tr, th, table, td {
    border: rgb(169, 169, 169) 1px solid;
    border-radius:2px;
      border-collapse: collapse;

}
table {
    margin:4px;
}
th, td {
    padding: 6px;
}