/* palettes */

:root {
    --willow-green: #acd56dff;
    --moss-green: #84c954ff;
    --fern: #426f2cff;
    --rosewood: #bd2d50ff;
    --razzmatazz: #ee2571ff;
    --blush-rose: #f0557fff;
    --cotton-candy: #f49bafff;

    --dusty-grape: #586282ff;
    --sky-blue: #8ec6ebff;
    --tea-green: #cadb94ff;
    --muted-olive: #bccb90ff;

    --shadow-grey: #2a2123ff;
    --faded-copper: #8e785bff;
    --faded-copper-2: #ab8a69ff;
    --pearl-beige: #f2e2c1ff;
    --mint-green: #ddedb7ff;

    --bright-amber: #fbcc2bff;
    --cobalt-blue: #1847a1ff;
    --royal-blue: #1b60e9ff;

    --these: #262324;
    --are: #38592e;
    --my: #5d732d;
    --colors: #9aa641;
    --yup: #8c6456;
}

/* styles */
a:any-link {
    color: #2a2123ff;
    text-decoration: none;
}
.text {
    width: 500px;
    padding: 10 0 10 0;
}

#about {
    background-color: #9aa641;
    width: 240px;
    padding: 10px;
    height: 200px;
    position: relative;
}

hr {
    border: none;
    margin: 20px;
   
}
.spoiler {
    background-color: #0a0b0c;
    color: transparent;

    cursor: pointer;
    transition: all;
}
.spoiler:hover {
    background-color: transparent;
    color: inherit;
    text-shadow: none;
}
#imfeelinglucky {
    font-size: 12;
}

#arukuma {
    height: 120px;
    margin: 10px;

    position: absolute;
    right: 0;
    bottom: 0;
}
#hoshiringo {
    height: 120px;
    margin: 10px;

    position: absolute;
    right: 0;
    bottom: 0;
}

#logo {
    height: 120px;
    margin: 10px;

    position: absolute;
    top: -10%;
}

/* containers*/
.page {
    background-color: #9aa641;
    
}

#page {
    /* border: solid;
     border-color: #527585; 
    border-width: 2px; 
   
    background-image: url("/images/bgbg.png");
    background-size: 680px 880px;
    background-blend-mode: darken;
    background-position: center -75px;
    background-repeat: no-repeat; */
    
    background-color: #f2e2c1ff;
    box-shadow: inset 0 0 30px #b8a275;
    
    align-items: center;
}

.content-center {
    height: 720px;
    width: 1000px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    

    color: #2a2123;
    font-family: helvetica;
    font-size: 12px;

    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.content {
    height: 720px;
    width: 1000px;

    display: flex;
    flex-direction: column;
    align-items: center;
    
 
    

    font-family: helvetica;
    font-size: 12px;

    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.container-m {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1000px;
    height: 720px;
    color: #2a2123ff;
    
}

.container {
    overflow: hidden;
    position: relative;
}

#months h1 {
    font: bold;
    font-size: small;
    color: #ca1247;
    margin: 0;
}

#months {
    height: 720px;
    width: 1000px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    margin-left: 10%;

    color: #2a2123;
    font-family: helvetica;
    font-size: 12px;

    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* NAVIGATION */

.nav-content {
    padding: 8px;

    background-color: #bd2d50ff;
}

.nav-bar {
    display: flex;
    left: -10em;
    top: 0;
    position: absolute;

    width: 100px;
    padding-right: 40px;

    height: auto;
    max-height: 220px;
    font-size: 12px;
    font-family: helvetica;
}
.nav {
    margin: 0;
    padding: 0;
}
.nav li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.nav-content ul {
    width: 70px;
}

.nav a:hover,
.nav a:focus {
    color: #fff;
    background: #ca1247;
}

.nav a:active {
    background: #000000;
    color: #fff;
}

.link:hover {
    color: #fff;
    background: #ca1247;
}