/*VARIABLES*/

:root {
    --margin: 2px;
    --doublemargin: calc(var(--margin) * 2);
}

/*ELEMENTS*/

* {
    box-sizing: content-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    background-color: ghostwhite;
    
}

header {
    background-color: blue;
    height: 10%;
    position: relative;
    float: left;
    width: 100%;
}

hr{
    color: blue;
    margin-top: 24px;
    margin-left: 12px;
    margin-right: 12px;
    
}

p{
    font-size: 10pt;
    font-family: courier new;
}

table {
    table-layout: fixed;
    min-width: 40vw;
    border-collapse: collapse;
    margin-top: 12px;
    margin-left: 12px;
}

/* CLASSES */

.rowscroll {
    position: relative;
    width: 100vw;
    overflow-x: scroll;
}

.linkbox{
    font-size: 16pt;
    height: 30%;
    color: blue;
}

.cell {
    width: 180px;
    height: 180px;
    
    border: solid;
    border-color: blue;
    border-radius: 16px;
    
    margin-left: var(--margin);
    padding: 12px;
    
    background-color: ghostwhite;
}

.category {
    font-size: 14pt;
    color: blue;
    font-family: courier new;
    
    width: 200px;
    height: 200px;
}

.infobar{
    width: 100%;
    height: 24px;
    
    margin-top: 12px;
    
    color: ghostwhite;
    background-color: blue;
}

.button{
    font-size: 14pt;
    padding: 12px;
    position: relative;
    float: left;
    color: ghostwhite;
    width: fit-content;
    background-color: 0;
    margin-left: var(--doublemargin);
    margin-top: 10px;
    
}

.logo{
    width: fit-content;
    padding: 12px;

    color: aliceblue;
    font-size: 24pt;
    
    background-color: 0;
    
    position: relative;
    float: left;
    
    margin-right: 30vw;
}