@font-face {
    font-family:'oceanside typewriter';
    src: url(https://the-shulamite.neocities.org/fonts/Oceanside%20Typewriter.ttf);
	}

    @font-face {
    font-family: modern;
    src: url('https://the-shulamite.neocities.org/fonts/MODERN%20TYPEWRITER.ttf');
	 }
      
    @font-face {
	  font-family: friedolin;
	  src: url('https://the-shulamite.neocities.org/fonts/Friedolin.ttf');
	 }

	    body {
        color: #3D3515;
        background-image: url('');
        background-color: #e9e2c0;
        background-size: 50px;
        background-position: center;
        background-repeat: repeat;
        background-attachment: scroll;
        padding-left: 100px;
        font-family: modern;
	      }

	    header {
        border: ;
        width: 100%;
        height: 25;
        position: center;
        align-content: start;
	      }

	    #flex {
         display: flex;
        }

/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
/* font-size makes the sidebar text slightly smaller */
	    aside {
        background-color: #e9e2c0;
        width: 30%;
        padding: 0px;
        font-size: smaller;
	      }

/* what's this "order" stuff about??
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;
	           }

            #rightSidebar {
            order: 3;
	         }

	    main {
        order: 2;
        position: center;
        color: #3D3515;
        font-size: 1em;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 5px;
        width: 50%;
        height: fit-content;
        border: ;
        padding: 50px;
	      }

/* background color for footer */
	    footer {
        color:  #8F7D32;
        padding: 25px;
        border: ;
        width: 100%;
        height: fit-content;
        position: center;
        text-align: center;
	    }

        h1
        {
        color: #3D3515;
        font-family: friedolin;
        font-size: 7rem;
	    text-shadow: 1px 1px .5px #6A7061;
		}

        h2,
        h3 {
        color: #3D3515;
        }

        h3 {
        color: #3D3515;
        }

        a:link {
        color: #3D3515;
        font-weight: bolder;
        text-decoration: underline overline;
        }
  /* if you want to remove the underline
  you can add a line below here that says:
  text-decoration:none; */

        button {
	    color: #3D3515
        border: solid;
        border-width: thin;
        border-radius: 6.5px;
        background-color: #e9e9ed;
        padding: 5px 5px;
        text-align: center;
        display: inline-block;
        font-size: 13px;
        font-family: modern;
        margin: 2px 2px;
        cursor: pointer;
        text-decoration: underline overline;
		}

        button:hover {
        color: #3D3515
        border: solid;
        border-width: thin;
        border-radius: 6.5px;
        background-color: gray;
        padding: 5px 5px;
        text-align: center;
        display: inline-block;
        font-size: 13px;
        font-family: modern;
        margin: 2px 2px;
        cursor: cell;
        text-decoration: underline overline;
		}


    </style>