styles.css

@import url(https://cdn.yapper.shop/custom-collectibles/marketing.css);

:root {
    --background-primary: #313338;
    --background-secondary: #2B2D31;
    --background-tertiary: #1E1F22;
    --note-border: #1f6feb;
    --note-text: #4493f8;
    --tip-border: #238636;
    --tip-text: #3fb950;
    --important-border: #8957e5;
    --important-text: #ab7df8;
    --warning-border: #9e6a03;
    --warning-text: #d29922;
    --caution-border: #da3633;
    --caution-text: #f85149;
}

@font-face {
    font-family: ABC Ginto Nord;
    src: url('https://cdn.yapper.shop/assets/fonts/097b737553f77c92.woff2') format('woff2');
}

@font-face {
    font-family: gg sans;
    src: url('https://cdn.yapper.shop/assets/fonts/ggsansSemibold.ttf') format('woff2');
}

@font-face {
    font-family: gg sans four;
    src: url('https://cdn.yapper.shop/assets/fonts/ggSansFour.woff2') format('woff2');
}

@font-face {
    font-family: gg sans five;
    src: url('https://cdn.yapper.shop/assets/fonts/ggSansFive.woff2') format('woff2');
}

@font-face {
    font-family: gg sans six;
    src: url('https://cdn.yapper.shop/assets/fonts/ggSansSix.woff2') format('woff2');
}

@font-face {
    font-family: gg sans seven;
    src: url('https://cdn.yapper.shop/assets/fonts/ggSansSeven.woff2') format('woff2');
}

@font-face {
    font-family: gg sans eight;
    src: url('https://cdn.yapper.shop/assets/fonts/ggSansEight.woff2') format('woff2');
}

body {
    color: white;
    margin: 0;
    background-color: var(--background-primary);
    display: flex;
    height: 100vh;
    font-family: gg sans, sans-serif;
}

.sidebar {
    width: 300px;
    background-color: var(--background-secondary);
    border-right: 1px solid var(--background-tertiary);
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

.sidebar h2 {
    margin-top: 0;
}

.content-container {
    position: fixed;
    background-color: var(--background-primary);
    height: 900px;
    width: 1400px;
    bottom: 0;
    right: 0;
    border-radius: 10px 0px 0px 0px;
}


  

.article-link {
    display: block;
    padding: 10px;
    margin-bottom: 8px;
    background: var(--background-primary);
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
}

.article-link:hover {
    background: var(--background-tertiary);
}

.article-link.selected {
    background: var(--background-tertiary);
}

.content {
    flex: 1;
    padding: 30px;
    overflow: hidden;
    overflow-y: auto;
    width: 100%;
}

.content h2 {
    margin-top: 0;
}


.note-block {
    margin-top: 16px;
    margin-bottom: 16px;
    border-left: 5px solid var(--note-border);
    padding: 1px;
}

.note-block .title {
    color: var(--note-text);
}

.note-block p, .note-block div {
    margin: 0;
    margin-left: 10px;
    margin-top: 6px;
    margin-bottom: 6px;
}


.important-block {
    margin-top: 16px;
    margin-bottom: 16px;
    border-left: 5px solid var(--important-border);
    padding: 1px;
}

.important-block .title {
    color: var(--important-text);
}

.important-block p, .important-block div {
    margin: 0;
    margin-left: 10px;
    margin-top: 6px;
    margin-bottom: 6px;
}


.caution-block {
    margin-top: 16px;
    margin-bottom: 16px;
    border-left: 5px solid var(--caution-border);
    padding: 1px;
}

.caution-block .title {
    color: var(--caution-text);
}

.caution-block p, .caution-block div {
    margin: 0;
    margin-left: 10px;
    margin-top: 6px;
    margin-bottom: 6px;
}



.inline-text {
    line-height: 1.5;
    display: flex;
}

.inline-text p {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.inline-text b {
    font-family: gg sans eight;
}

.inline-text u {
    text-decoration: underline;
}

.inline-text a {
    color: #40afff;
    text-decoration: underline;
    cursor: pointer;
}

.inline-text * {
    margin-right: 5px !important;
}


.grid-1 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    width: 100%;
    gap: 10px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    width: 100%;
    gap: 10px;
}

.grid-card {
    background-color: #232427;
    padding: 10px;
    border-radius: 5px;
}

.grid-card h3 {
    margin: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: auto;
}



/* width */
::-webkit-scrollbar {
    width: 5px;
}
  
/* Track */
::-webkit-scrollbar-track {
    background: none;
}
  
/* Handle */
::-webkit-scrollbar-thumb {
    background: #1E1F22;
    border-radius: 10px;
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #1E1F22;
}

.clickable {
    cursor: pointer;
}

[disabled] {
    cursor: not-allowed;
}

button:focus {
    outline: none;
    box-shadow: none;
}

input:focus {
    outline: none;
    box-shadow: none;
}

select:focus {
    outline: none;
    box-shadow: none;
}

textarea:focus {
    outline: none;
    box-shadow: none;
}

.hidden {
    display: none !important;
}

body {
    overflow-x: hidden;
}