@font-face {
font-family: "DigitalDisco";
src: url(https://goldnerb.neocities.org/fonts/DigitalDisco.ttf) format("truetype");
        }

h1, h2, h3 {color: #6CBDEE; background-color: #35525F; border-radius: 5px; font-family: "DigitalDisco";} 
h2, h3 {letter-spacing: 0.1em;}

@font-face {
font-family: "basiil";
src: url(https://goldnerb.neocities.org/fonts/basiic.ttf) format("truetype");
        }

a {transition: all ease 0.5s;}
a:hover {color: #AEE0FF; font-size: larger;}

h3 {margin-bottom: 0.1em;}
a, p, b, i {color: #6CBDEE; font-family: "basiil";}
p {margin: 0.5em;}

ul { color: #C29728;}
li { margin-top: 0.3em; font-family: "basiil"; background-color: #6b4d00; border-radius: 8px;}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,.container {
    min-height: 100vh;
}

body {
    background-image: url(https://goldnerb.neocities.org/yaboi/radbak.jpg);
    background-repeat: no-repeat;
    background-size: cover;
  ;

.container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 1em 14em;
    min-height: 14em;
}

header {
    flex: 1 0 100%;
    border-radius: 1em;
    height: auto;
    contain: content;
}

header .nerb {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

nav {
    display: flex;
    flex: 1 0 100%;
    border: 5px #C29728 double;
    border-radius: 1em;
    background-color: #2D312D;
    max-height: 2em;
    text-align: center;
    justify-content: center;
}

nav a {margin-left: 1em; margin-right: 1em;}

.container.second {
    flex-direction: column;
    gap: 1em;
}

.container.second section {
    display: flex;
    flex: 4;
    flex-direction: row;
    gap: 1em;
}

main {
    flex: 4;
    border: 5px #C29728 double;
    border-radius: 1em;
    background-color: #2D312D;
    color: white;
    padding: 10px;
    text-align: center;
    justify-content: center;
}

main p {
    flex: 1;
    border-radius: 10px;
    background-color: #35525F;
}

.g {animation: pulse 2s infinite ease-in-out;}

@keyframes pulse {
    0% {text-shadow: 0px 0px 2px #ffe07b;}
    50% {text-shadow: 0px 0px 12px #ffe07b;}
    100% {text-shadow: 0px 0px 2px #ffe07b;}
}

.stripe {width: 100%; height: 0.4em;}

img {
    margin-top: 0;
    margin-bottom: 0;
}

.fav {
    display: flex;
    flex-flow: column;
    width: 100%;
    max-height: 12em;
    margin-top: 0.5em;
    border: white 1px solid;
    border-radius: 8px;
    text-align: center;
    overflow-y: scroll;
    overflow-x:hidden ;
}

.fav p {background-color: transparent; float: right;}
.chr {aspect-ratio: 1/1; margin: auto; height: 8em;}
.chr-2 { aspect-ratio: 1/1.5; margin: auto;}

.tag {
    margin: auto;
    width: 70%;
    height: fit-content;
    image-rendering: pixelated;
    transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.tag:hover {
    transform:scale(1.3) translateX(1em) skew(15deg);
}

aside {
    display: flex;
    flex: 1;
    flex-direction: column;
    border-radius: 1em;
    gap: 1em;
}
.s-2 {display: flex; flex: 2; justify-content: center;}
aside > * {
    display: flex;
    flex: 1;
    flex-direction: column;
    border: 5px #C29728 double;
    border-radius: 1em;
    background-color: #2D312D;
    padding: 10px;
    text-align: center;
}


.item2 p {margin-top: 0;}
.item3 {width: 100%; margin: auto;}
.item3 h3 { background-color: #6b4d00; color: #efbb35}

.blinkies {
    margin: 0 auto; 
    aspect-ratio: 8/1;
    image-rendering: pixelated;
}

footer {
    flex: 1 0 100%;
    border: 5px #C29728 double;
    border-radius: 1em;
    background-color: #2D312D;
    max-height: 3em;
    text-align: center;
}


@media (max-width: 960px) {
    
    nav {flex-direction: column;
        max-height: fit-content;
        padding-left: 5em;
        padding-right: 5em;
    }
    
    .container {margin: 1em 4em;}
    
    .container.second section {flex-direction: column;}
    aside{flex-direction: row;}
    
    .chr {aspect-ratio: 1/1; margin: auto; height: 8em;}
    
    .tag {width: 90%;}
    
    .blinkies {width: 100%; aspect-ratio: 6/1; margin: 0 auto;}
    
    .stripe {width: 100%; height: 0.4em;}
    
    footer {max-height: fit-content;}
    
}