:root {
    --primary-bg-color: #09141A;
    --dark-bg-color: #212731;
    --primary-accent-color: #4ba8ff;

    --primary-font-color: #4ba8ff;
    --primary-font-size: 21px;
    --big-font-size: 26px;
    --small-font-size: 16px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
    background-color: var(--primary-bg-color);
    /*background-image: url("https://i.imgur.com/Hkl7dBu.png");*/
     /*background-repeat: no-repeat;*/
     /*background-position: top;*/
     /*background-size: 50%;*/
}

header {
    align-items: center;
    padding: 10px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    background-color: var(--dark-bg-color);
    text-align: left;
    font-size: var(--primary-font-size);
    color: var(--primary-font-color);
    position: static;
}

.top-bar {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: var(--small-font-size); 
    color: var(--primary-font-color);
    margin-top: 10px;
}

.top-bar img {
    width: 50%;
    border-radius: 5px;
}

.grid-main-container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 100vh;
}

.grid-middle-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    margin-top: 20px;
}

.grid-middle-items {
    min-width: 10px;
    background-color: var(--dark-bg-color);
    border: var(--primary-accent-color) 2px solid;
    border-radius: 5px;

    padding-top: 500px;
    text-align: center;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: var(--primary-font-size);
    color: var(--primary-font-color);
}