@import url(/navbar/navbar_main.css);
@import url(/navbar/page_highlights/games.css);

body {
    background-color: rgb(80, 86, 156);
    font-family: sans-serif;
}
a {
    color: #d4d3ff;
    text-decoration: none;
}
hr {
    width: 100%;
    margin-left: 0%;
            color:white;
}

.main {
    display:flex;
    flex-flow: row;
    justify-content: center;
}

.container {
padding: 0px;
padding-top:25px;
color:white;
width: 100%;
max-width: 1000px;
}

.thumbnail_container {
    display:flex;
    flex-flow:row;
    flex-wrap:wrap;
    width: 100%;
}

.thumbnail {
    width: calc(25% - 20px);
    height: 200px;
    padding: 10px;
}

.linkbox {
    width: 100%;
    height:100%;
    display:flex;
    flex-flow: row;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    margin-top: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}

.linkbox:hover {
    margin: 0;
    box-shadow: 0 15px 10px rgba(0,0,0,0.5);
}

.caption {
    padding: 0 10px 0 10px;
    align-self: flex-end;
    justify-self: center;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    border-radius: 0px 0px 10px 10px;
    backdrop-filter: blur(5px);
}

@media only screen and (max-width: 900px) {
    .thumbnail {width: calc(33.3% - 20px);}
}

@media only screen and (max-width: 720px) {.thumbnail {width: calc(25% - 20px);}}

@media only screen and (max-width:630px) {
    .thumbnail {
        width: calc(33.3% - 20px);
    }
} 
@media only screen and (max-width: 510px) {.thumbnail {width: calc(50% - 20px);}}
@media only screen and (max-width: 350px) {
    .thumbnail {
        width:100%;
    }
}


#scratch {
    background-color:orange;
    background-image: url(scratch_thumbnail.png);
}

#gullpics {
    background-image: url(/Gullpics/1.jpg);
    background-color:white;
}