:root{
    --red1: #1b0200;
    --red2: #3b0408;
    --cool1: #10634b;
    --cool2: #2c7a53;
    --cool3: #3f985e;
    --warm1:#82c361;
    --warm2:#7ed268;
    --yellow:#cde283;
}

@font-face {
    font-family: 'teenbold_italic';
    src: url('teen_bd_it-webfont.woff2') format('woff2'),
         url('teen_bd_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'teenitalic';
    src: url('teen_it-webfont.woff2') format('woff2'),
         url('teen_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'teenlight_italic';
    src: url('teen_lt_it-webfont.woff2') format('woff2'),
         url('teen_lt_it-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'teenlight';
    src: url('teen_lt-webfont.woff2') format('woff2'),
         url('teen_lt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'teenbold';
    src: url('teen_bd-webfont.woff2') format('woff2'),
         url('teen_lt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'teenregular';
    src: url('teen-webfont.woff2') format('woff2'),
         url('teen-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
		

		body {
			background: var(--cool2);
			align-content: center;
			margin: auto;
			width: 1920px;
			height: 0px;
			position: center;

		}

		.title {
			color: var(--yellow);
			margin: auto;
			margin-top: 0px;
			margin-bottom: 0px;
			font-family: 'teenbold';
			justify-content: middle;
			font-size: 50px;
			width: 860px;


		}

		.grid-container {
			margin: auto;
			background: var(--cool3);
			height: 850px;
			width: 850px;
			border-radius: 4px;
			font-family: 'smooth';
			font-size: 22px;
			border: 5px solid var(--cool1);
			display: grid;
			overflow: hidden;
	    	grid-template-columns: 620px 150px;
        	grid-template-rows: 235px 1fr;		
		}

		.grid-container>div {
			background: var(--warm1);
			border-radius: 4px;
			border: 5px solid var(--cool1);
			display: flex;
			margin: 20px;
			height: 100%;
		}

		.grid-container>.one {
			height: 235px;
			grid-column: 1;
	        grid-row: 1;
	        width: 620px;
}
        .hhh{
            display: inline-block;
        }
        .music {
            width: 120px;
            height: 65px;
            display: inline-block;
            margin-top: 0px;
            margin-left: 10px;
            background: var(--warm2);
            border: 5px solid var(--yellow);
        }
		.grid-container>.one>p {
		    margin: 10px;
		    font-size: 23px;
		    margin-left:0px;
		    font-family: 'teenregular';
		    color: var(--red1);
		}
		    
		.grid-container>.two {
		margin-left: 0px;
		width: 150px;
		height: 235px;
		flex-direction: column;
	    align-items: center;
	    grid-column: 2;
	    grid-row: 1;

		}


		.grid-container>.three {
			background: var(--yellow);
			margin-top: 0px;
			width: 150px;
			grid-column: 1;
	        grid-row: 2;
		}

		.grid-container>.four {
			align-content: center;
			margin-top: 0px;
			width: 620px;
			overflow: scroll;
			grid-column: 2;
        	grid-row: 2;
		}

		.pfp {
			height: 120px;
			margin: 10px;
			float: inline-start;
			border: 5px solid var(--yellow);
			

		}

		button {
		    margin: auto;
		    width: 100px;
		    



		}

		button:hover {
		}

		.post {
			margin: auto;
			background-color: #f3782a;
			padding: 15px;
			margin: 15px;
			clear: both;
			z-index: 1;
			border-radius: 5px;
		}

		.post>header {
			width: px;
			border-bottom: 2px solid var(--darkgreen0);
			text-shadow: 0px 0px 0px transparent;
		}

		.post>header>h3 {
			font-size: 30px;
			margin: 0px;
			width: px;
			padding: 0px;
			font-family: "teenbold";
			color: var(--darkgreen);
		}

		.post>header>.td {
			font-size: 20px;
			margin: 0px;
			color: var(--white0);
		}

		.post>.main {
			margin-top: 15px;
			font-size: 20px;
			padding: 15px;
			border-radius: 5px;
			background: var(--blue0);
			text-shadow: 0px 0px 0px transparent;



		}

		.post>.main>h4 {
			margin: 0px;
			margin-bottom: 5px;
			margin-top: 15px;
			font-size: 22px;
			color: var(--navy);

		}

		.main>p {
			font-size: 20px;
			margin: 0px;
			font-family: "teenregular";
			color: var(--navy);
		}