/*
            --Fonts-- 
                These are the font faces used for this theme. 
                If you would like to change the fonts used, replace
                the source url with a new font file. do not change 
                the font family name, as this is used throughout 
                this stylesheet. 
            */
            @font-face {
                font-family: "header";
                src: url(/fonts/Olondon_.otf);
            }
            @font-face {
                font-family: "title";
                src: url(/fonts/NotoSerif-Bold.ttf);
            }
            @font-face {
                font-family: "main";
                src: url(/fonts/Typey.otf);
            }
            /*
                I have set up some variables for the colors 
                used throughout the theme. Here, you can easily change 
                the colors/values of multiple elements. These values are
                reffered to throughout this stylesheet, so please do not 
                change the names of the variables. 

                If you change these, please make sure to use colors with 
                a minimum contrast of 4.5 : 1 (can be checked in inspector under
                accessibility or with color contrast checker)
            */
            :root{
                --mainColor: #F2F0F0;
                --subColor: #DED9D9;
                --mainText: #0E0C0C;
                --accText: #8a071c;
            }

            *{
                scrollbar-color: var(--mainText) var(--mainColor);
            }

            a{
                color: var(--accText);
            }
            a:hover{
                color: var(--mainText);
            }

            html{
                background: url(/img/habsbg.jpg);
                background-size: cover;
	              background-repeat: repeat;
	              background-attachment: fixed;
                font-family: "main";
                font-size: 1em;
                scroll-behavior: smooth;
            }
            
            body{
                margin-top: 0px;
                margin-bottom: 0px;
            }

            footer{
                border-top: var(--mainText) 3px solid;
                padding: 5px;
                text-align: center;

            }
            
            blockquote{
                background-color: var(--subColor);
                margin-left: 16px;
                margin-right: 16px;
                padding: 10px;
                border-left-width: 3px;
                border-left-style: solid;
            }
            
            .star{
                list-style-type: "\2605 ";
                padding-left:5px;
            }
            
            .img-floatinganim {
              animation-name: floating; 
              animation-duration: 3s; 
              animation-iteration-count: infinite; 
              animation-timing-function: ease-in-out;
              } 
              
              @keyframes floating { 
              0% { 
              transform: translate(0,  0px); 
              } 
              
              50%  { 
              transform: translate(0, 15px); 
              } 
              
              100%   {
              transform: translate(0, -0px); 
              } 
              }    
              
            .gallery {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;
              gap: 10px;
              align-items:center;
            }
            
            .gallery img{
              width:20%;
              border-width: 7px;
              border-style: solid;
              border-image: url(img/stamp-border.png) 8 fill round;
              cursor: pointer;
            }
            
            .stamp{
              border-width: 7px;
              border-style: solid;
              border-image: url(/img/stamp-border.png) 8 fill round;
            }

            #container{
                width: 50%;
                background-color: var(--mainColor);
                padding: 1em 2.5em;
                margin: auto;
                box-shadow: 10px 0px 15px rgba(0, 0, 0, 0.2);
            }

            #mainGrid{
                display: grid;
                grid-template-columns: 33% 33% 33%;
                gap: 10px;
            }

            #grid1{
                grid-column: 1/4;
                grid-row: 1/2;
            }

            #grid2{
                grid-column: 1/4;
                grid-row: 2/3;
                margin-right: 10px;
            }

            #navigation{
                border-top: var(--mainText) 3px double;
                border-bottom: var(--mainText) 4px solid;
                display: flex;
                flex-direction: row;
                justify-content: center;
            }
            #navigation a{
                display: block;
                padding: 5px 5px;
                margin: 0px 10px;
                color: var(--mainText);
                text-decoration: none;
                text-align: center;
                font-size: 1.3em;
            }
            #navigation a:hover{
                color: var(--accText);
            }
            
            #volume{
                grid-column: 1/1;
                grid-row: 3/4;
                text-align: start;
                font-size: 1.1em;
                margin-top: 2px;
            }
            
            #today{
                grid-column: 2/3;
                grid-row: 3/4;
                text-align: center;
                font-size: 1.1em;
            }
            
            #price{
                grid-column: 3/3;
                grid-row: 3/4;
                text-align: end;
                font-size: 1.1em;
                margin-top: 2px;
                margin-right: 10px;
            }
            
            #date{
              margin-top: 2px;
            }

            #grid4{
                grid-column: 1/3;
                grid-row: 4/5;
                padding-top: 8px;
                margin-top: 5px;
            }

            #grid5{
                grid-column: 3/4;
                grid-row: 4/5;
                text-align:justify;
                padding-right: 15px;
                margin-top: 5px;
            }

            #grid6{
                grid-column: 1/3;
                grid-row: 5/5;
                padding-right: 15px;
                padding-top: 15px;
                text-align:justify;
            }

            #grid7{
                grid-column: 3/3;
                grid-row: 5/5;
                text-align:justify;
                padding: 15px;
                background-color: var(--subColor);
                border-style:double solid double solid;
                border-width: 3px 1px 3px 1px;
                border-color: var(--mainText);
                margin-right: 10px;
            }
            
            #grid8{
                grid-column: 1/4;
                grid-row: 6/6;
                padding-right: 15px;
                padding-top: 15px;
                text-align:justify;
            }
            
            #comments{
                grid-column: 1/4;
                grid-row: 6/6;
                padding: 15px;
                text-align:justify;
            }
            
            #post{
                grid-column: 1/4;
                grid-row: 5/5;
                padding-right: 15px;
                padding-top: 15px;
                text-align:justify;
            }
            
            .title{
                font-family: "title";
                font-size: 1.2em;
            }

            .header{
                font-family: "header";
                text-align: center;
                font-size: 2.2em;
                width:100%;
            }
            .header h1{
                margin: 5px;
            }
            
            h2{
              margin-top: 0px;
            }
             
    

            @media screen and (max-width : 896px) {
                #mainGrid{
                    display: flex;
                    position: relative;
                    flex-direction: column;
                }
                #navigation{
                    flex-direction: column;
                }
                .header{
                font-family: "header";
                text-align: center;
                font-size: 1.5em;
                width:100%;
                }
                #container{
                width: 75%;
                }
            }