@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
@import url('https://fonts.googleapis.com/css?family=David+Libre');

.background {
    filter: blur(2px);
    -webkit-filter: blur(2px);
    position:absolute;
    top:0px;
    left:0px;
    justify-content:center;
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0.4;
    z-index: -1;
    border-radius:5px;;
}

.full_div {
    margin:10px;
    padding:10px;
    display:inline-block;
    border-radius:5px;;
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    position:relative;
    backdrop-filter: blur(5px);
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
    width:93%;
}

.full_div_mobile {
    margin:10px;
    padding:10px;
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: 85% 3% 12%;
    border-radius:5px;;
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    position:relative;
    backdrop-filter: blur(5px);
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
    width:93%;
    height: 50%;
}

.full_div_mobile_top {
    display:grid;
    grid-template-columns: 25% 75%;
    grid-template-rows: 100%;
}

.full_div_mobile_bottom {
    display: grid;
    grid-template-columns: 64% 6% 30%;
    grid-template-rows: 100%;
}

.logo_div {
    position: fixed;
    background-color: lightgrey;
    bottom: 10px;
    left: 10px;
    box-shadow: 5px 5px 5px rgba(170,170,170,.3);
    opacity: 0.75;
    border-radius:10px;
}

.logo {
    width: 200px;
}

.left_column {
    float:left;

    margin-right:5px;
    margin-bottom:5px;

    width:18%;
    height:24%;
}
.left_column_mobile {
    float:left;

    margin-right:5px;
    margin-bottom:5px;

    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 33% 3% 64%;
}

.box_art {
    max-height: 100%;
    max-width: 100%;
    border-radius:10px;;
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
}

.box_art_mobile {
    max-height: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius:10px;;
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
}

#navbar {
    left: 50%;
    transform: translate(-50%, 0);
    margin-top: auto;
    margin-bottom: auto;
    color: white;
    position: fixed;
    width: 75%;
    display: block;
    z-index: 1;
    background-color:rgba(255, 255, 255, 1);
    border-radius:5px;;
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
}

.navigation {
    margin-bottom: 15px;
    text-align: center;
    color: LightGrey;
}

.navigation_link:link {
    text-decoration: none;
    color: DarkSlateGrey;
}

.navigation_link:visited {
    text-decoration: none;
    color: DarkSlateGrey;
}

.navigation_link:hover {
    text-decoration: underline;
    font-weight: bold;
    color: CornflowerBlue;
}

.description {
    padding-left: 10px;
    padding-right: 10px;
    margin-left:5px;
    margin-bottom:5px;
    float:left;
    width:50.5%;
    font-size:calc(7px + ((.1vh + 1vw) / 2));
    line-height: calc(6.5px + ((.1vh + 1vw) / 2));
    height:24%;
    background-color:rgba(255, 255, 255, 0.55);
    border-radius:5px;;
    font-family: 'David Libre', serif;
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
    text-align:left;
}

.description_mobile {
    padding-left: 10px;
    padding-right: 10px;
    margin-left:5px;
    margin-bottom:5px;
    float:left;
    font-size:calc(18px + (.1vh + 1vw));
    line-height: calc(18px + (.1vh + 1vw));
    background-color:rgba(255, 255, 255, 0.70);
    border-radius:5px;;
    font-family: 'David Libre', serif;
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
    text-align:left;
}

.right_column {
    float:right;
    display: flex;

    background-color:rgba(255, 255, 255, 0.55);
    border-radius:5px;
    
    width:25%;
    height:18%;

    font-size:calc(6px + .6vh);
    line-height: calc(5px + .85vh);
    font-family: 'David Libre', serif;
    
    justify-content: center;
    align-items: center;
    text-align:center;

    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);    
}

.info_column {
    float:left;
    display: flex;

    background-color:rgba(255, 255, 255, 0.70);
    border-radius:5px;
    
    font-size:calc(18px + .6vh);
    line-height: calc(18px + .85vh);
    font-family: 'David Libre', serif;
    
    justify-content: center;
    align-items: center;
    text-align:center;

    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);    
}

.info_summary {
    display:inline-block;
}

.bottom_row {
    clear:both;
    width:100%;
    font-size:calc(3.8px + ((.5vh + 1vw) / 2));
    font-family: 'David Libre', serif;
}

.bottom_row_mobile {
    clear:both;
    width:100%;
    font-size:calc(10px + (.5vh + 1vw));
    font-family: 'David Libre', serif;
}

.bottom_row_entry_left {
    width:68.5%;
    float:left;
    padding:5px;
    padding-right:15px;
    padding-left:15px;
    border-radius:5px;
    background-color:rgba(255, 255, 255, 0.55);
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
}

.bottom_row_entry_left_mobile {
    float:left;
    padding:5px;
    padding-right:15px;
    padding-left:15px;
    border-radius:5px;
    background-color:rgba(255, 255, 255, 0.70);
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
    clear:both;
    font-size:calc(10px + (.5vh + 1vw));
    font-family: 'David Libre', serif;
}

.bottom_row_entry_right {
    width:25%;
    text-align: center;
    float:right;
    border-radius:5px;;
    padding-top:5px;
    padding-bottom:5px;
    background-color:rgba(255, 255, 255, 0.55);
    
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
}

.bottom_row_entry_right_mobile {
    text-align: center;
    float:right;
    border-radius:5px;;
    padding-top:5px;
    padding-bottom:5px;
    background-color:rgba(255, 255, 255, 0.70);
    
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
    clear:both;
    font-size:calc(8px + (.5vh + 1vw));
    font-family: 'David Libre', serif;
}

hr {
    color:rgba(255, 255, 255, 0.6);
}

h2 {
    margin-bottom:1px;
    line-height: calc(5px + 1.1vh);
}

.info_icon {
    padding-right:4px;
    height:9px;
}

.weight_info {
    float:right;

    display: flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    width: 25%;
    height:2.3%;

    margin-top:5px;

    border-radius:5px;;
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    
    background-color:rgba(255, 255, 255, 0.55);

    font-size:calc(3.8px + ((.5vh + 1vw) / 2));
    font-family: 'David Libre', serif;
    
}

.rating_info {
    float:right;

    display: flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    width: 25%;
    height:2.3%;

    margin-top:7px;

    border-radius:5px;;
    border-style: solid;
    border-color: rgba(170,170,170,.3);
    border-width: 1px;
    box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -webkit-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    -moz-box-shadow: 9px 9px 17px -1px rgba(0,0,0,0.32);
    
    background-color:rgba(255, 255, 255, 0.55);

    font-size:calc(3.8px + ((.5vh + 1vw) / 2));
    font-family: 'David Libre', serif;
}

ul {
    display:inline-block;
    list-style:none;
    column-count: 4;
    -moz-column-count: 4;
    -webkit-column-count: 4;
    font-size:8px;
    padding:2%;
    margin:2%;
    width:92%;
}

a:link {
    color: black;
    text-decoration: none;
}
a:visited {
    color: black;
    text-decoration: none;
}
a:hover {
    color: blue;
    text-decoration: none;
}
a:active {
    text-decoration: none;
}