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

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

a {color: #FDC201; transition: all ease 0.5s; font-family: "basiil"}
a:hover {color: #ffe26a; 
        font-size: larger; 
        }
h1, h2, h3 {color: #FDC201; background-color: #4c5417; border-radius: 5px; font-family: "DigitalDisco"; letter-spacing: 0.1em;} 
h3 {margin-bottom: 0.1em;}
p, b, i, li {color: #FDC201; font-family: "basiil"; word-spacing: 0.1em}
p {margin: 0.1em;}

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

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

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

.container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin: 1em 12em;
    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: #6D7A1E;
    max-height: 4em;
    align-items: center;
    justify-content: space-between ;
    padding-left: 10em;
    padding-right: 10em;
}

nav a {margin-top: 0.3em; margin-bottom: 0.3em;}

.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: #6D7A1E;
    color: white;
    padding: 10px;
    text-align: center;
}

main p {
    border-radius: 10px;
    background-color: #5C6525;
}

main i {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;}
}

.green {
    width: 100%;
    margin-top: 0.5em; 
}

aside {
    display: flex;
    flex: 1;
    flex-direction: column;
    border-radius: 1em;
    gap: 1em;
}

aside > * {
    display: flex;
    flex: 1;
    flex-direction: column;
    border: 5px #C29728 double;
    border-radius: 1em;
    background-color: #6D7A1E;
    padding: 10px;
    text-align: center;
}

.s-2 {display: flex; justify-content: center; flex:2;}

.s-2 > * p, li {background-color:#5C6525; border-radius: 5px; margin-top: 0.3em;}

.gold {
    height: auto;
    width: 7em;
    margin: auto;
}

.blinkies {
    margin-top: 0.3em;
}

.item2 {
    display: flex;
    flex: 1 1 100%;
    flex-flow: column wrap;
    align-content: center;
}

.item3 {
    max-height: fit-content;
}

.item4 {padding: 1em; position: relative;}
.item4::after {
    content: ''; 
    position: absolute;
    top: -4em;
    left: -4.5em;
    width: 90%;
    height: 7em;
    background-image: url(https://goldnerb.neocities.org/fshsick.gif);
    background-repeat: no-repeat; 
    background-size: cover;
}

.sites {
    margin-top: 0.3em;
    opacity: 0.8;
    transition: transform 0.3s ease-in-out;
}

.sites:hover {
    opacity: 1;
    transform: scale(1.3);
    filter: drop-shadow(0 0 0.5rem white);
    cursor: pointer;
}

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

/*--------------------------------ADAPTIVE SETTINGS--------------------------------*/

@media (max-width: 450px) {
    
    a:hover {color: #ffe26a; font-size: large;}
    
    .container {margin: 1em 3em; min-height: 10em;}
    
    .container .nerb {width: 22em; height: fit-content; margin: auto;}
    
    .container.second section {flex-direction: column;}
    
    nav { 
    flex-direction: column;
    padding-left: 2em;
    padding-right: 2em;
    }
    
    nav a {margin: 0;}
    
    .green {
    height: 0.5em;
    margin-top: 0.5em; 
    }
    
    aside {
        flex-direction: row;
    }
    
    aside > * {text-align: center;}
    
    .gold {width: 7em;}
    
    footer{max-height: 4em;}
}