.grid-container {
    display: grid;
    grid-gap: 10px;
    padding: 10px;
    margin-bottom: 50px;
}

.grid-item {
    text-align: center;
    padding: 10px;
    font-size: 30px;
}

.grid-box {
    margin:10px;
    padding: 20px;
    text-align: center;
    border: 2px solid white;
    border-radius: 3px;
    color: white;
}

.grid-box:hover {
    border: 2px solid #5c0000;
    box-shadow: 5px 5px 2px #5c0000;
    border-radius: 3px;
    color: white;
    cursor: pointer;
}

i.icoon {
    font-size: 8vw;
} 

/* Desktops: */
@media screen and (min-width: 1000px) {
    .grid-box {
        font-size: 2vw;
    }
}

/* Tablets: */
@media screen and (min-width: 600px) and (max-width: 1000px) {
    .grid-box {
        font-size: 3vw;
    } 
}

/* Phones: */
@media screen and (max-width: 600px) {
    .indexitem1 {
        grid-column:1;
        width:50%;
        margin-left:25%;
    }
    .indexitem2 {
        grid-column:1;
        width:50%;
        margin-left:25%;
    }
    .indexitem3 {
        grid-column:1;
        width:50%;
        margin-left:25%;
    }
    .indexitem4 {
        grid-column:1;
        width:50%;
        margin-left:25%;
    }
    .indexitem5 {
        grid-column:1;
        width:50%;
        margin-left:25%;
    }
    .indexbarleft {grid-column:1;}
    .indexbarright {grid-column:1;}
    
    .grid-box {
        font-size: 5vw;
    }
    
    .registeritem {
        grid-column:1;
        width:100%;
        margin-left:10%;
    }

    .registerbarleft {
        grid-column:1;

    }

    .registerbarright {
        grid-column:1;
    }
}

/* 
.indexitem1 {
    height: auto;
    grid-column-start: 3;
    grid-column-end: 4;
}

.indexitem2 {
    height: auto;
    grid-column-start: 4;
    grid-column-end: 5;
}

.indexitem3 {
    height: auto;
    grid-column-start: 3;
    grid-column-end: 4;
}

.indexitem4 {
    height: auto;
    grid-column-start: 4;
    grid-column-end: 5;
}

.indexitem5 {
    height: auto;
    grid-column-start: 3;
    grid-column-end: 5;
}

.indexbarleft {
    grid-row-start:1;
    grid-row-end:4;
    grid-column-start: 1;
    grid-column-end: 3;
}

.indexbarright {
    grid-row-start:1;
    grid-row-end:4;
    grid-column-start: 5;
    grid-column-end: 7;
}

.registeritem {
    grid-row: 1;
    grid-column: 2;
}

.registerbarleft {
    grid-row: 1;
    grid-column: 1;
    
}

.registerbarright {
    grid-row: 1;
    grid-column: 3;
}
*/