/* fonts */
 @font-face {
     font-family: heylouie;
     src: url(../font/heylouie.otf);
}

/* fonts */
 @font-face {
     font-family: rimouski;
     src: url(../font/rimouski.otf);
}

:root {
    /* Fonts */
    --titlefont:'heylouie', Georgia, serif;
    --headerfont:'rimouski', serif;
    --bodyfont:'rimouski', serif;

    /* Images - change paths if necessary */
    --backgroundimage:url(../img/record/vinyls-background.png);
    --headerimage:url(../img/record/45-rpm-records.png);
    --boximage:url(../img/record/#.jpg);
    --contentimage: url(../img/bg/riso-black.png);
    
    /* Colors */
    --backgroundcolor:#3e2308;
    --contentcolor:#c6b299;
    --footercolor:#ffffff;

    --title:#401E07;
    --header1:#401E07;
    --header2:#401E07;
    --header3:#401E07;

    --navlink:#401E07;
    --navlinkhover:#ffffff;

    --link:#232C21;
    --linkhover:#ffffff;

    --formbackground:#ffffff;
    --formcolor:#000000;
    --formborder:#000000;

    --boxbackground:#3e2308;
    --boxcolor:#ffffff;
    --boxborder:#516146;

    --footerlink:#c6b299;
    --footerlinkhover:#ffffff;
    
}

* { /*reset margin and padding*/
    margin:0;
    padding:0;
    border:0;
}

body {
    background: fixed var(--backgroundimage);
    background-size: cover;
    font:1rem var(--bodyfont);
    line-height:1.5;
    background-color: #3e2308;

}

img {
    image-rendering: pixelated;
}

ul {
    color: #000000;
}

#container {
    margin:50px auto 20px auto;
    background: var(--contentcolor);
    max-width:1000px;
    width:90%;
    border-radius: 50px;
    border: 4px solid #516146;
    filter: drop-shadow(4px 5px #516146);
}

#banner {
    width:100%;
    height:200px;
    background:var(--headerimage) no-repeat center;
    background-size:cover;
}

#title {
    font:4em var(--titlefont);
    color:var(--title);
    text-transform:lowercase;
    text-align:center;
    padding:5px;
    text-shadow: 4px 3px #516146;
    word-spacing: 0.4em;
}


#navigation {
    width:calc(100% - 10px);
    text-align:center;
    padding:5px;
    text-transform: uppercase;
}

#navigation ul li {
    display:inline-block;
    list-style:none;
    padding: .25em .5em .25em 0;
}

#navigation ul li a {
    font:1.4em var(--headerfont);
    color:var(--navlink);
    text-decoration:none;
    text-shadow: 1.5px 1.5px #516146;
    
}

#navigation ul li a:hover, #navigation ul li a:focus {
    color:var(--navlinkhover);
}

#content {
    text-align:justify;
    color:var(--contentcolor);
    padding:0 20px 20px 20px;
    width:var(100% - 40px);
}

    #content p {
        margin:1em 0 1em 0;
        color: #000000;
    }
    
    #content h1 {
        font:1.7em var(--headerfont);
        color:var(--header1);
        margin:0.25em 0 0.25em 0;
    }
    
    #content h2 {
        color:var(--header2);
        font:1.5em var(--headerfont);
        text-transform:lowercase;
        margin:0.25em 0 0.25em 0;
        text-transform: uppercase;
    }

    #content h3 {
        font:1.3em var(--headerfont);
        font-style:italic;
        color:var(--header3);
        margin:0.25em 0 0.25em 0;
    }
    
    #content a {
        color:var(--link);
        text-decoration:underline;
    }
    
    #content a:hover {
        color:var(--linkhover);
    }
    
    #content li {
        margin:.5em 0 .5em 1.5em;
        list-style-position:outside;
    }
    
    #content blockquote, #content .box {
        background:var(--boximage) var(--boxbackground);
        color:var(--boxcolor);
        border:1px solid var(--boxborder);
        padding:15px;
        text-align: center;
        width: fit-content;
        margin: auto;
            border-radius: 25px;
    filter: drop-shadow(2px 2px #516146);
    }
    
    #content input, #content textarea, #content select, #content button {
        background:var(--formbackground);
        color:var(--formcolor);
        border:1px solid var(--formborder);
        padding:5px;
        margin-top:5px;
        font:1em var(--bodyfont);
    }

#footer {
    text-align:center;
    color:var(--footercolor);
    max-width:100%;
}
    
    #footer a {
        color:var(--footerlink);
        text-decoration:none;
    }
    
    #footer a:hover, #footer a:focus {
        color:var(--footerlinkhover);
    }

    #footer p {
        margin:0.5em 0 0.5em 0;
    }

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--contentbackground);
    color:var(--link);
    z-index:1000;
    padding:5px;
    text-decoration:none;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

textarea {
    height: 150px;
    border-radius: 10px;
}

iframe {
    width: 100%;
    height: 300px;
}

/* code for the club START */

  .pixelrecords {
    display: inline-flex;
    align-items: center;
    margin: 10px;
    padding: 15px;
    image-rendering: pixelated;
    width: fit-content;
  }

  .vinyl {
    margin-left: -60px;
    margin-bottom: 7px;
    padding: 10px;
    position: relative;
  }

    .vinyl:hover {
    right: -55px;    
  }
  
/* alt spin (optional): animation: spin 2.5s infinite; */

  .cover {
    position: relative;
    z-index: 1;
  }


/* code for the club END */