/* mobile style */
@media screen and (max-width:720px) {

	h1 {
		font-size:1.5em!important;
	}

	#topbar-content {
		flex-wrap: wrap;
	}

	#title-cont {
		width:100%;
		display:flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
        background-color:rgba(0,0,0,0.5);
	}

	#title {
		font-size:2em;
        padding: 0px 10px 0px 10px;
	}

	#hamburger {
        display:flex;
	}

	#menu-items  {
        xborder: 3px solid #2b2f34;
        max-width:300px;
        width:100vw;
        height:50vh;
		xjustify-content: space-around;
		flex-direction: column;
  
        xpadding-top:10px;
        xpadding-bottom:10px;
        transition: left 0.2s;

		position: absolute;

        top: 4rem;
        background: #11171f;
		z-index: 1;

        box-shadow:    
            0px -5px 5px 0px  rgba(0,0,0,0.5),
            5px 5px 5px 0px rgba(0,0,0,0.5)
        ;
	}	


	#menu-items > .item   {
		xborder:1px solid red;
		xborder-top: 3px solid #2b2f34;
		xborder-radius:5px;
		padding:10px 10px 10px 20px;
        xpadding:5px;
        height:20%;
        justify-content: start;
       
	
		font-size:2em;
		xflex-grow:1;

        width:100%;
  
	}	

    #menu-items > .item.selected {
        xcolor:#00ff80;
    } 
	

	#content {
		xcolor:green;
		border-left: none;
		border-right: none;
		margin: 70px 0px 0px 0px;
		width:100vw;
		padding: 0px 5px 50px 10px;
		letter-spacing:	0px;	
		font-size: 1.3em;
	}

	.list-item > .image-cont {
		xbackground:red;
		xwidth:10%;
		xheight:auto;
	}

	.dialogue-box-cont > .image-cont > .image.layer {
		background-position: 50% 25%;
		xbackground-size: 150%;
	}

	.dialogue-box-cont > .text-cont > .name-cont {
		font-size:0.7em;
	}

	.dialogue-box-cont > .text-cont > .text {
		line-height:1.1;
		font-size:0.7em;
	}
}