/**** BASICS *****/

    body {
        margin: 0;
        background-image: url(/backgrounds/dot.jpg);
        background-repeat: repeat;
        background-color: sienna;
    }

    @font-face {
        font-family: fake receipt;
        src: url(/fonts/Fake\ Receipt.otf);
    }

    @font-face {
        font-family: karrik;
        src: url(/fonts/karrik_fonts-main/fonts/Web/TFF/Karrik-Regular.ttf);
    }

/***** LAYOUT ****/

    #grid {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 3px;
        margin: 50px auto;  
        margin-left: 185px;
    }
    

    .title {
        width: 200px;
        height: 200px;
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .title img {
        transition: all 0.3s; 
    }

    .title img:hover {
        transform: rotate(7deg);
    }

    .menu {
        border: 2px forestgreen dotted;
        width: 250px;
        height: 650px;
        grid-column: 1 ;
        grid-row: 2 / 5;
        background-image: url(/backgrounds/pop.png);
        font-family: fake receipt;
        overflow: scroll;
        margin-left: -20px;
    }

    .menu h3 {
        text-align: center;
        color: darkmagenta;
    }

    .menu li {
        list-style-type: circle;
        padding: 10px;
    }

    .menu a {
        text-align: left;
        text-decoration: none;
        font-size: 0.8em;
        color: black;
        word-spacing: -5px;
    }

    a:hover {
        color: sienna;
        text-decoration: underline;
        font-style: italic;
    }

    hr {
        border-top: forestgreen 1px dotted;
    }

    [id] {
	    display: none;
    }

    [id]:target {
        display:block;
    }

    .main-content {
        border: 2px #000 solid;
        max-width: 736px;
        height: 850px;
        grid-column: 2 / 4;
        grid-row: 1 / 3;
        background-image: url(/backgrounds/tabelt.jpg);
    }

    section {
        border: #000 1px solid;
        max-width: 550px;
        height: 650px;
        margin-left: 85px;
        margin-top: 150px;
        background-image: url(/backgrounds/pop.png);
        padding: 10px;
        font-family: Courier;
        line-height: 1.2;
        overflow: scroll;
    }

    section h2 {
        font-family: fake receipt;
    }
    
    .wip {
        border: #000 1px dotted;
    }