:root {
	        --title-color: #839da9;
	        --title-border: #416499;
	        --title-font-size: 6em;
	        --title-font: 'Instrument Serif';
	        --body-font: 'Instrument Sans';
	        --body-font-color: #343434;
	        --box-color: #f4f4f4;
	        --bg-image: url('carlos-torres-MHNjEBeLTgw-unsplash.jpg');
        }

		.instrument-serif-regular {
  			font-family: "Instrument Serif", serif;
  			font-weight: 400;
  			font-style: normal;
		}

		.instrument-serif-regular-italic {
  			font-family: "Instrument Serif", serif;
  			font-weight: 400;
  			font-style: italic;
		}


		.instrument-sans {
  		font-family: "Instrument Sans", sans-serif;
  		font-optical-sizing: auto;
  		font-weight: 400;
  		font-style: normal;
		}

        body, html {
	        scroll-behavior: smooth;
	        margin: 0;
	        padding: 0;
        }

        *, *::before, *::after {
	        box-sizing: border-box;
        }     

        body {
	    height: 100vh;
	    background: var(--bg-image) center / cover no-repeat;
		background-attachment: fixed;
	    font: 0.9em var(--body-font);
	    color: var(--body-font-color);
	    scrollbar-color: var(--box-border-color) var(--title-color); /* Mozilla scrollbar fallback */
        }


        @font-face {
	        font-family: 'Instrument Sans';
            src: url('https://fonts.google.com/specimen/Instrument+Sans');
        }

        a {
	        color: var(--title-border);
        }

        a:hover {
            color: var(--title-border);
        }

        h1, h2, h3, h4, h5, h6 {
	        font-family: var(--title-font);
	        color: var(--title-border);
        }

        ::selection {
	        color: var(--title-border);
	        background: var(--title-color);
        }

        code {
	        background-color: var(--title-color);
	        color: var(--title-border);
	        padding: 0 5px;
	        border: 1px solid  var(--title-border);
	        border-radius: 5px;
        }

        #title {
	        font-family: var(--title-font);
	        color: var(--title-color);
	        font-size: var(--title-font-size);
	        -webkit-text-stroke: 2px var(--title-border);
	        text-align: center;
	        letter-spacing: 5px;
        }

        ::-webkit-scrollbar {
	        width: 0.5em;
        }

        ::-webkit-scrollbar-thumb {
	        background-color: var(--title-color);
	        outline: 1px solid var(--title-border);
        }

        #middle {
	        width: 33vw;
        }

        #box {
	        background-color: var(--box-color);
	        border: 2px dashed var(--title-border);
	        overflow-y: scroll;
	        max-height: 10em;
	        width: 30vw;
	        padding: 0em 1em;
	        margin: auto;
        }


        header {
			margin: 0 auto;
            grid-row: 1 / 2;
            grid-column: 1 / 3;
            height: max-content;
        }

        nav {
            border: #416499 2px dashed;
            background-color: #f4f4f4;
            grid-row: 2 / 3;
            grid-column: 1 / 2;
            height: max-content;
            padding-top: 5px;
            padding-right: 10px;
            padding-bottom: 5px;
            padding-left: 10px
        }

        main {
            border: #416499 2px dashed;
            background-color: #f4f4f4;
            grid-row: 2 / 3;
            grid-column: 2 / 3;
            height: max-content;
            padding-top: 10px;
            padding-right: 30px;
            padding-bottom: 10px;
            padding-left: 30px
        }

        footer {
            border: #416499 2px dashed;
            background-color: #f4f4f4;
            grid-row: 3 / 4;
            grid-column: 1 / 3;
			padding-left: 15px;
			padding-right: 15px;
			margin-bottom: 15px;
            height: max-content;
        }

        .box {
            max-width: 1000px;
            margin: 50px auto;
            display: grid;
            grid-gap: 20px;
            grid-template-columns: 250px minmax(0, 1fr);
        }

        .img-nav {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        .img-taeng {
            max-width: 50%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

		.toggle {
			margin: 0 auto;
			background-color: #839da9;
			color: #416499;
			cursor: pointer;
			width: 225px;
			margin: 0 auto;
			border-radius: 50px;
		}

		.active, .toggle:hover {
			background-color: rgb(155, 231, 231);
		}

		.content {
			overflow: hidden;
		}

  /* MOBILE */
        @media only screen and (max-width: 800px) {

	        .box {
				max-width: auto;
            	padding-top: 20px;
            	padding-right: 20px;
            	padding-bottom: 20px;
            	padding-left: 20px
	        }

			header {
            	margin: 0 auto;
            	grid-row: 1 / 2;
            	grid-column: 1 / 3;
            	height: max-content;
			}

			nav {
				grid-row: 2 / 3;
            	grid-column: 1 / 3;
				max-width: 800px;
				display: grid;
			}

			main {
				grid-row: 3 / 4;
            	grid-column: 1 / 3;
				margin: 0 auto;
				display: grid;
			}

			footer {
            	grid-row: 4 / 5;
            	grid-column: 1 / 3;
				padding-left: 15px;
				padding-right: 15px;
            	height: max-content;
			}

			.img-logo {
            	max-width: 150px;
            	height: auto;
            	display: block;
            	margin: 0 auto;
			}

			.img-nav {
            	max-width: 150px;
            	display: flex;
            	margin: 0 auto;
			}
        }