<!DOCTYPE html>
<html>
    <!-- head -->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width = device-width, initial-scale = 1.0">
        <!-- change name of site in browser tab-->
        <title>Small Stories</title>
        <!-- stylesheet -->
        <style>
            /*
            --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(https://www.smallstories.io/Olondon_.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: #E4DACE;
                --mainText: #000000;
                --accText: #554436;
            }

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

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

            html{
                color: var(--mainText);
                background-color: var(--mainColor);
                font-family: "main";
                font-size: 1em;
            }

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

            }

            #container{
                width: 70%;
                margin: 0 auto;
            }

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

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

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

            #navigation{
                border-top: var(--mainText) 3px solid;
                border-bottom: var(--mainText) 3px solid;
                display: flex;
                flex-direction: row;
            }
            #navigation a{
                display: block;
                padding: 3px 5px;
                margin: 0px 10px;
                color: var(--mainText);
                text-decoration: none;
                text-align: center;
                font-size: 1.1em;
            }
            #navigation a:hover{
                color: var(--accText);
            }

            #grid3{
                grid-column: 1/3;
                grid-row: 3/4;
            }

            #grid4{
                grid-column: 3/4;
                grid-row: 3/4;
            }

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

            #grid6{
                grid-column: 2/4;
                grid-row: 4/5;
            }

            .title{
                font-family: "title";
                font-size: 1.2em;
            }

            .header{
                font-family: "header";
                text-align: center;
                font-size: 2em;
            }
            .header h1{
                margin: 10px;
            }
            .header h2{
                margin: 5px;
            }
          

            @media screen and (max-width : 896px) {
                #mainGrid{
                    display: flex;
                    position: relative;
                    flex-direction: column;
                }
                #navigation{
                    flex-direction: column;
                }
            }
            ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: #9cdecb;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #9cdecb;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
        </style>