@font-face {
    font-family: 'w7ui';
    src: url('src/font/segoe-ui.ttf');
    font-weight: normal;
    font-size: normal;
}

@font-face {
    font-family: 'AnalogueOS';
    src: url('src/font/AnalogueOS-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #211035;
}

::-webkit-scrollbar-thumb {
    background: #a15cfa;
}

::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

html {
    min-height: 100%;
}

body {
    background: #020024;
    background: radial-gradient(circle, rgba(2, 0, 36, 1) 0%, rgb(86, 77, 255) 57%, rgba(43, 43, 43, 1) 100%);
}

.banner {
    border: 0.15em solid #313131;
    border-style: ridge;
    border-radius: 5px;
    width: 98.5%;
    height: 20%;
    background: #020024cc;
    margin-bottom: 1%;
}

.banner img{
    margin-top: 1%;
    margin-bottom: 0;
    padding: 0;
    max-width: 100%;
    height: auto;
}

.wrapper {
    width: 70%;
    height: 80%;
    margin: 0;
    margin-top: 0.5%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -0%);
    z-index: 1;
}

.navbar, .content, .sidebar {
    background: #09060fa4;
    float: left;
    border: 0.15em solid #313131;
    border-style: ridge;
    border-radius: 5px;
    height: 85%;
}

.navbar {
    width: 21%;
    margin-right: 1%;
}

.content {
    width: 54%;
}

.sidebar {
    width: 21%;
    margin-left: 1%;
}

.menu {
    
    border: 0.125em solid #575757;
    border-style: ridge;
    width: 80%;
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    background: #09060f6e;
    
}

.menu #featured {
    height: 94%;
    width: 94%;
    margin-top: 5%;
    margin-left: 2%;
    margin-bottom: 3%;
    border: 0.125em solid #a251ff;
}

.topper {
    background: #09060f6e;
    border: 0.125em solid #575757;
    border-style: none none ridge none;
    padding-top: 1%;
}

.menu h2 {
    color: #3c31ff;
    margin-top: 1%;
    margin-bottom: 0;
    text-align: center;
    font-family: AnalogueOS;
    font-weight: lighter;
    
}

.menu ul {
    list-style-type: none;
    margin: 0;
    margin-bottom: 2%;
    padding: 0;
    text-align: center;
    font-family: AnalogueOS;
    font-size: large;
}

.menu a {
    color: #a251ff;
    text-decoration: none;
}

.menu a:hover {
    color: #8543cf;
}

.menu li {
    margin-top: 2%;
}

marquee {
    margin-top: 3%;
}

marquee img {
    height: 40%;
    width: 40%;
}

.leftimg, .rightimg {
    z-index: 2;
    position: fixed;
    bottom: 10%;
    width: 14%;
}

.leftimg img, .rightimg img {
    max-width: 80%;
    height: auto;
}

.leftimg {
    left: 6%;
}

.rightimg {
    right: 4%;
}

h1, p {
    color: #9994ff;
    font-family: AnalogueOS;
    font-weight: lighter;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 0;
}

#titletext {
    font-size: 60px;
    margin-top: 3%;
}

p {
    font-size: 20px;
}

#update {
    font-size: 16px;
}

#updates {
    height: 20%;
    overflow: scroll;
    overflow-x: hidden;
}

.buttonrow {
    margin-bottom: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#pfp {
    float: right;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px;
    width: 70px;
    margin-right: 90px;
    margin-top: 8%;
}

.gallery {
    display: grid;
    grid-template-columns: auto auto auto;
    width: 92%;
    height: 75%;
    margin: auto;
    overflow-y: scroll;
}

.gallery img {
   width: 90%;
   border: 0.125em solid #575757;
   border-style: groove;
   
}

#blogcontainer, #blogentry {
    width: 95%;
}

#blogcontainer {
    overflow-y: scroll;
}