/* colors */
:root {
                --color1: #074047;
                --color2: #074047;
                --encart1: #F4EADD;
                --encart2: #A4CFD5;
                --bg: #61969D;
            }

            /* if you have the URL of a font, you can set it below */
            /* feel free to delete this if it's not your vibe */

            /* this seems like a lot for just one font and I would have to agree
    but I wanted to include an example of how to include a custom font.
    If you download a font file you can upload it onto your Neocities
    and then link it! Many fonts have separate files for each style
    (bold, italic, etc. T_T) which is why there are so many!

    */


    @font-face {
        font-family: "OrtiesWeirdZines";
        src: url('https://ortie-pnk.neocities.org/font/OrtiesWeirdZines-Regular.ttf');
    }


            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Regular.ttf');
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Bold.ttf');
                font-weight: bold;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-Italic.ttf');
                font-style: italic;
            }

            @font-face {
                font-family: Nunito;
                src: url('https://sadhost.neocities.org/fonts/Nunito-BoldItalic.ttf');
                font-style: italic;
                font-weight: bold;
            }

            body {
                font-family: 'Nunito', sans-serif;
                margin: 0;
                background-color: var(--bg);
                color: var(--color2);
                background-image: url("https://xixxii.neocities.org/images/bgs/2.png");
            }

            * {
                box-sizing: border-box;
            }

            /* below this line is CSS for the layout */

            /* this is a CSS comment
    to uncomment a line of CSS, remove the * and the /
    before and after the text */


            /* the "container" is what wraps your entire website */
            /* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
            #container {
                max-width: 1050px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                /* this centers the entire page */
            }



            .box {
                background-color: var(--encart1);
                border:solid;
                border-top-left-radius:30px;
                border-top-color: var(--color2);
                border-right-color: var(--color2);
                border-bottom-color: var(--color1);
                border-left-color: var(--color1);
                margin-bottom:15px;
                padding: 17px;

                img {
                    max-width:200px;
                }
            }

            .left {
                margin-right:15px;
                float: left;}

            .right {
                margin-left:15px;
                float: right;}

            .menu {
                position: sticky;
                top: 40px;
            }


            .button {
                background-color: var(--encart1);
                box-shadow: -2px 2px 0px 0px var(--color2);
                border:1px solid;
                border-bottom-right-radius:10px;
                border-top-color: var(--color2);
                border-right-color: var(--color2);
                color: var(--color2);
                padding: 5px 10px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 14px;
                cursor: pointer;
                margin:7px
            }

            .button:hover {
                background-color: #FFFFFF99;
                box-shadow: -5px 5px 0px 0px var(--color1);
                text-decoration: underline dotted;
                position:relative;
                top:-2px;
                left:-2px;
            }

            .button:active {
                background-color: var(--color2);
                box-shadow: -5px 5px 0px 0px var(--color1);
                color:white;
                text-decoration: none;
                border-bottom: none;
                position:relative;
                top:-2px;
                left:-2px;
            }

            .smallbutton {
                background-color: var(--encart1);
                box-shadow: -1px 1px 0px 1px var(--color1);
                border: 1px solid;
                border-top-left-radius:15px;
                border-top-color: var(--color2);
                border-right-color: var(--color2);
                color: var(--color2);
                padding: 5px 10px;
                text-align: center;
                text-decoration: none;
                display: sticky;
                font-size: 14px;
                cursor: pointer;
                margin:10px;;
                width:88px;
            }

            .smallbutton:hover {
                text-decoration: underline dotted;
                position:relative;
                top:-2px;
                left:-2px;
            }

            .smallbutton:active {
                background-color: var(--color1);
                box-shadow: -5px 5px 0px 0px var(--color2);
                text-decoration: none;
                color: white;
                border-bottom: none;
                position:relative;
                top:-2px;
                left:-2px;
            }

            .webbutton {
                box-shadow: 1px 1px 0px 1px var(--color1);
                border: none;
                display: inline-block;
                cursor: pointer;
                margin:3px;;
                width:88px;
            }

            .webbutton:hover {
                text-decoration: underline dotted;
                border: none;
                position:relative;
                top:-2px;
                left:-2px;
            }

            .webbutton:active {
                background-color: var(--color1);
                box-shadow: 5px 5px 0px 0px var(--color2);
                text-decoration: none;
                color: white;
                border-bottom: none;
                position:relative;
                top:-2px;
                left:-2px;
            }


            #flex {
            display: flex;
            }

            /* this colors BOTH sidebars
             *    if you want to style them separately,
             *    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-color: var(--encart2);
                width: 180px;
                padding: 5px;
                border:solid;
                border-radius:20px;
                border-top-color: var(--color2);
                border-right-color: var(--color2);
                border-bottom-color: var(--color1);
                border-left-color: var(--color1);
                font-size: smaller;
                /* this makes the sidebar text slightly smaller */
            }


            /* this is the color of the main content area,
             *    between the sidebars! */
            main {
                flex: 1;
                padding: 0px;
                order: 2;

            }

            p {
                text-align: start;
            }




            /* what's this "order" stuff about??
             *    allow me to explain!
             *    if you're using both sidebars, the "order" value
             *    tells the CSS the order in which to display them.
             *    left sidebar is 1, content is 2, and right sidebar is 3! */

            */ #leftSidebar {
                order: 1;
                width: 180px;
            }

            #rightSidebar {
            order: 3;
            width: 250px;
            }

            #footer {
            width: 100%;
            height: 40px;
            margin-top:10px;
            padding: 10px;
            /* this centers the footer text */
            }

            h1,h2,h3 {
    color: var(--color2);
    text-align:center;
    font-family: "OrtiesWeirdZines", courier;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.3rem;
}

h4 {
    text-align:center;

}

strong {
    /* this styles bold text */
    color: var(--color1);
}


/* Chansons */
.chanson {
    display:none;
}

.chanson:target {
    display:inline;
}


/* CSS for extras */

#topBar {
width: 100%;
height: 30px;
padding: 10px;
font-size: smaller;
background-color: #13092D;
}



/* RESPONSIVE */

/* so you wanna change the width of your page?
 *    by default, the container width is 900px.
 *    in order to keep things responsive, take your new height,
 *    and then subtrack it by 100. use this new number as the
 *    "max-width" value below
 */

@media only screen and (max-width: 900px) {
    #flex {
    flex-wrap: wrap;
    }

    aside {
        width: 95%;
        margin-top:10px;
        margin-left:10px;
        margin-right:10px;
    }

    /* the order of the items is adjusted here for responsiveness!
     *      since the sidebars would be too small on a mobile device.
     *      feel free to play around with the order!
     */
    main {
        order: 1;
    }

    #leftSidebar {
    order: 3;
    }

    #rightSidebar {
    order: 2;
    }

    #navbar ul {
    flex-wrap: wrap;
    }
}