@font-face {
    font-family: 'Tahyp-rahy-ter 22';
    src: url('Fonts/Tahyprahyter Font/Tahyp-rahy-ter22.woff2') format('woff2'),
        url('Fonts/Tahyprahyter Font/Tahyp-rahy-ter22.woff') format('woff'),
        url('Fonts/Tahyprahyter Font/Tahyp-rahy-ter22.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ball Tongue';
    src: url('Fonts/BallTongue Font/BallTongue.woff2') format('woff2'),
        url('Fonts/BallTongue Font/BallTongue.woff') format('woff'),
        url('Fonts/BallTongue Font/BallTongue.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'dob';
    src: url('Fonts/DobFiletype Font/DobFiletype.woff2') format('woff2'),
        url('Fonts/DobFiletype Font/DobFiletype.woff') format('woff'),
        url('Fonts/DobFiletype Font/DobFiletype.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --background-colour: #0E0E0E;
    --dark-grey: #1F1F1E;
    --dark-brown: #332d24;
    --light-brown: #4D4438;
    --light-grey: #525251;
    --whiteish: #e8e8e8;
    
background-color: var(--background-colour);
color: var(--whiteish);
font-family: "Tahyp-rahy-ter 22", "Times New Roman", Times, serif;}

    

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
}

.Left {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 0.5fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0em;
  grid-auto-flow: row;
  grid-area: 1 / 1 / 10 / 5;

}

.title {
  grid-area: 1 / 2 / 4 / 7;
  object-fit: cover;
  overflow: hidden;
  background-image: url("https://imgur.com/RFvjnly.png");
  
}

.title img {
    grid-area: 1 / 2 / 4 / 7;
    max-width: 100%;
    min-height: 50%;
    object-fit: cover;
    height: auto;
    display: block;
    object-position: right;

}

.bottomleft {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr .5fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-area: 4 / 1 / 8 / 7;
}



.Right {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0em 0.75em;
  grid-auto-flow: row;
  grid-area: 1 / 5 / 10 / 22;
}

.Top bit { grid-area: 1 / 1 / 1 / 16; }

.leftpost {  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  gap: 0em 0px; 
  grid-area: 3 / 2 / 12 / 8;
  overflow-y: scroll;
  overflow-x: hidden;
}

.lpheader {  
  display: flex;
  position:relative;

}

.lptitle { display: flex;
padding-left: 10px;
width:75%; 
font-size: 40px;
flex-wrap: wrap;
overflow-wrap: break-word;}

.lpdate { 
display: flex;
padding-right: 10px;
width: 25%;
align-items: flex-end;
justify-content: flex-end;}


.rightpost {  display: grid; 
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; 
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
  gap: 0px 0px; 
  grid-area: 2 / 9 / 11 / 15;
  overflow-y: scroll;
  overflow-x: hidden;
}

.rpheader { 
display: flex;
position: relative;
}

.rptitle { 
display: flex;
width:75%; 
font-size: 40px;
flex-wrap: wrap;
overflow-wrap: break-word;
padding-left: 10px; }

.rpdate { 
display: flex;
padding-right: 10px;
width: 25%;
align-items: flex-end;
justify-content: flex-end;
}




html,
body,
.container {
  height: 100%;
  margin: 0;
}



 .postspacer {
    width: 38vw;
    height: 75px;
    display: inline-flex;}

.gallerylayout{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
    }

.gallerysquare {
    width: 47%;
    padding: 1%;
}
  
.gallerysquare img {
    width: 100%;
  height: auto;
}



.postmainframe {
display: flexbox;
flex-wrap: wrap;
word-break: normal;
}

.postbodywords {
display: flexbox;
padding: 10px;
flex-wrap: wrap;
word-break: normal;
}

.wrapper > div img {
    display: block;
}

.lbody { grid-area: 1 / 1 / 8 / 7; }
.rbody { grid-area: 1 / 1 / 8 / 7; 
display: flexbox;
flex-wrap: wrap;
word-break: normal;}


.menu { 
  position: relative;
  grid-area: 1 / 2 / 8 / 7;
  text-align: center;
; }

.menucontent {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}

.button {
    padding-top: 5%;
}