@font-face {
    font-family: diva_font;
    src: url(/assets/nintendo_NTLG.woff),
    url(/assets/nintendo_NTLG.woff2);
}

@import url("https://cdn.jsdelivr.net/npm/@mdi/font@7.1.96/css/materialdesignicons.min.css");

body {
    background-image: url('/assets/sekai.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;

    font-family: diva_font;
    font-size: 16px;
}

img {
    border-radius: 10px;
}
a {
    text-decoration: none;
}

.content {
    padding-left: 12%;
    padding-right: 12%;
    padding-top: 8%;

    text-align: center;

    font-weight: normal !important;
}

.footer {
    padding-left: 12%;
    padding-right: 12%;
    padding-top: 8%;

    font-weight: normal !important;
    font-size: 0.8em;

    text-align: left;
    align-items: end;
}


/* Latest commit */

.github-info {
    text-align: center;
    font-weight: normal !important;

    color: white;

    align-self: center;
    align-items: center;
    align-content: center;

    bottom:0px;

    width: 100%;
    padding: 10px;

    overflow: hidden;
    border-radius: 5px;
}
.github-info a {
    text-decoration: none;
    font-size: 1.2em;
    color: rgb(21, 255, 0);
}


/* Scroll Bar CSS */

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background-color: rgb(255, 255, 255)
}
::-webkit-scrollbar-thumb {
    background: rgb(216, 193, 237);
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(207, 151, 238);
}


/* Thumbnail */

.thumb {
    position: relative;
    text-align: center;
    color: white;
}

.thumb-icon {
    position: absolute;
    top: 8px;
    right: 5.5%;

    font-size: 0.8em;

    padding: 5px;
    border-radius: 5px;

    background-color: #8a31ff;
}

.thumb-icon-2 {
    position: absolute;
    top: 8px;
    right: 7%;

    font-size: 1em;

    padding: 8px;
    border-radius: 5px;

    background-color: #8a31ff;
}

/* Credits page */

.glowbox {
    background-color: #ffffff6e;
    border-radius: 10px;

    backdrop-filter: blur(8px);
    box-shadow: 0px 0px 16px rgba(255, 255, 255, 0.371);
  
    padding: 30px;

    text-align: left
}

/* Postbox & Credits */

.postcontainer {
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;
}

.postbox {
    background-color: #ffffff6e;
    border-radius: 10px;

    backdrop-filter: blur(8px);
    box-shadow: 0px 0px 16px rgba(255, 255, 255, 0.371);
  
    padding: 30px;
}

.postmaintable {
    width: 100%;
}
.postimage {
    width: 40%;
}
.postimage .links {
    width: 100%;
}
.postimage .links a {
    font-size: 1.3em;
}
.postdetails {
    width: 60%;
}
.postdetails h4 {
    line-height: 15px;
}

/* Work Icons */
.icon-yt-small {
    background: url('/assets/icon/icon-yt.png');
    background-size: cover;
    display: block;
    align-items: left;

    width: 22px;
    height: 22px;
}
.icon-nn-small {
    background: url('/assets/icon/icon-nn.png');
    background-size:cover;
    display: block;
    align-items: left;

    width: 22px;
    height: 22px;
}

.icon-yt-large {
    background: url('/assets/icon/icon-yt.png');
    background-size: cover;
    display: block;
    align-items: left;

    width: 30px;
    height: 30px;
}
.icon-nn-large {
    background: url('/assets/icon/icon-nn.png');
    background-size:cover;
    display: block;
    align-items: left;

    width: 30px;
    height: 30px;
}


/* Work Items */

.worktable {
    width: 100%;
}
.workitem {
    background-color: #ffffff6e;
    border-radius: 10px;

    backdrop-filter: blur(8px);
    box-shadow: 0px 0px 16px rgba(255, 255, 255, 0.371);
  
    padding: 10px;

    width: 33%;
}
.workitem-blank {
    background-color: #00000000
}
.links {
    width: 100%;
}
#youtube {
    color: rgb(163, 46, 46);
    padding-left: 50px;
}
#youtube2 {
    color: rgb(163, 46, 46);
}
#niconico {
    color: rgb(33, 99, 33);
    float:right;
    padding-right: 50px;
}
#niconico2 {
    color: rgb(33, 99, 33);
}


/* Add a black background color to the top navigation */
.topnav {
    background-color: #ffffff6e;
    overflow: hidden;
    border-radius: 10px;

    backdrop-filter: blur(8px);
    box-shadow: 0px 0px 16px rgba(255, 255, 255, 0.371);
}
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    color: #272727;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
    background-color: #eaeaea6e;
    color: black;
}
/* Right-aligned section inside the top navigation */
.topnav-right {
    float: right;
}
/* Hover colours */
#red:hover {
    background-color: #ff19196e;
    color: white;
}
#black:hover {
    background-color: #1717176e;
    color: white;
}
#blue:hover {
    background-color: #1994ff6e;
    color: white;
}