@charset "utf-8";

/* Body */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* Logo */
div.logo {
    text-align: center;
    clear: both;
}

div.logo>img {
    width: 100%;
    height: 10em;
}

/* Title & Image */
div.title>h1 {
    text-decoration: underline;
    font-size: 30px;
    padding: 10px;
}

div.products>img {
    width: 100%;
    padding: 10px;
}

div.showcase {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

/* Video */
div.videocase {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

div.videocase>h1 {
    text-decoration: underline;
    font-size: 30px;
    padding: 10px;
}

div.videocase>video {
    width: 100%;
    height: 100%;
}

/* Event Table */
table.events {
    padding: 10px;
}

h1#tableTitle {
    font-size: 25px;
    padding-top: 10px;
}

tr {
    height: 25px;
    text-align: center;
}

th,
td {
    border: 1px solid gray;
    vertical-align: top;
    padding: 5px;
}

col.dateColumns {
    width: 10%;
    background-color: rgb(255, 222, 222);
}

col.timeColumns {
    width: 11%;
    background-color: rgb(205, 243, 204);
}

col.eventsColumns {
    width: 17%;
    background-color: rgb(207, 210, 251);
}

thead {
    color: white;
    background-color: mediumslateblue;
}

thead th:first-of-type {
    background-color: indianred;
}

thead th:nth-of-type(2) {
    background-color: mediumseagreen;
}

tfoot {
    color: white;
    background-color: red;
    line-height: 30px;
}

/* Account Data */
div.useraccount {
    text-align: center;
    padding: 10px;
}

div.user {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: center;
    padding: 10px;
}

div.user>h2#username:hover,
div.user>img,
div.user>button#signinorout {
    cursor: pointer;
}

div.user>img {
    width: 2em;
    height: 2em;
    border-radius: 100px;
}

div.user>h2 {
    padding: 0px 10px;
}

div.user>button#signinorout {
    width: 70px;
    color: white;
    background-color: transparent;
    border: 1.5px black solid;
    border-radius: 100px;
    text-align: center;
    padding: 5px;
}

div.user>button#signinorout:hover {
    color: blue;
    font-weight: bold;
}

/* Pagebody */
div.pagebody {
    text-align: center;
    padding: 10px;
}

/* Page Categories */
div.categories {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

/* Page Items */
div.items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: stretch;
    padding: 0px;
}

div.item {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    margin: 10px;
    padding: 10px;
    border: 2px solid black;
    text-align: center;
    width: 300px;
    height: 405px;
}

div.item>img {
    width: 16em;
    height: 16em;
    margin: 10px;
}

div.item>h4 {
    padding: 10px;
}

div.item>h4>a {
    color: black;
    text-align: center;
    text-decoration: none;
    transition: all 0.5s linear;
}

div.item>h4>a:hover {
    color: aqua;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 15px 4px;
    animation: 5s infinite linear colors;
}