#container {
    display: grid;
    grid-template-columns: 500px;
    grid-template-rows: 50px 400px 50px;
}

#item1 {
    background: red;
}

#main {
    background: blue;
}

#item3 {
    background: yellow;
}

nav.primary-navigation {
    margin: 0 auto;
    display: block;
    padding: 0;
    text-align: center;
    font-size: 16px;
}

nav.primary-navigation ul li {
    list-style: none;
    margin: 0 auto;
    border-left: 2px solid #3ca0e7;
    display: inline-block;
    padding: 0 30px;
    position: relative;
    text-decoration: none;
    text-align: center;
    font-family: arvo;
}

nav.primary-navigation li a {
    color: black;
}

nav.primary-navigation li a:hover {
    color: #3ca0e7;
}

nav.primary-navigation li:hover {
    cursor: pointer;
}

nav.primary-navigation ul li ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    padding-left: 0;
    left: 0;
    display: none;
    background: white;
}

nav.primary-navigation ul li:hover>ul,
nav.primary-navigation ul li ul:hover {
    visibility: visible;
    opacity: 1;
    display: block;
    min-width: 250px;
    text-align: left;
    padding-top: 20px;
    box-shadow: 0px 3px 5px -1px #ccc;
}

nav.primary-navigation ul li ul li {
    clear: both;
    width: 100%;
    text-align: left;
    margin-bottom: 20px;
    border-style: none;
}

nav.primary-navigation ul li ul li a:hover {
    padding-left: 10px;
    border-left: 2px solid #3ca0e7;
    transition: all 0.3s ease;
}

a {
    text-decoration: none;
}

a:hover {
    color: #3ca0e7;
}

ul li ul li a {
    transition: all 0.5s ease;
}

div#playerContainer {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "playerItem1 playerItem2 playerItem3"
        "playerItem4 playerItem5 playerItem6"
}

.module {
    background: #ccc;
    text-align: center;
    font-size: 16px;
    margin: 10px;
}

.module i {
    font-size: 30px;
}

.blurred-box{
  position: relative;
  width: 250px;
  height: 350px;
  top: calc(50% - 175px);
  left: calc(50% - 125px);
  background: inherit;
  border-radius: 2px;
  overflow: hidden;
}

.blurred-box:after{
 content: '';
 width: 300px;
 height: 300px;
 background: inherit; 
 position: absolute;
 left: -25px;
 left position
 right: 0;
 top: -25px;  
 top position 
 bottom: 0;
 box-shadow: inset 0 0 0 200px rgba(255,255,255,0.05);
 filter: blur(10px);
}