/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  
  background-image: url("Images/tile1.png");
  color: #00ffb3;
  font-family: "DBStylezExtended";
  src: url(fonts/DBStylez.woff2) format("woff2"),
  url(fonts/DBStylez.woff) format("woff"),
  url(fonts/DBStylez.ttf) format("truetype");
  max-width : 1065px;
  margin-left:auto;
  margin-right:auto;
  margin-top: 100px;

  a:link {
  color: #19efb4;
}

a:visited {
  color: #19efb4; /* Purple */
}
  
.parent {
    display: grid;

    grid-template-columns: repeat(4, 256px);
    grid-template-rows: repeat(14, 67px);
    gap: 8px;
    
}

.NavBarParent{
      display: grid;

    grid-template-columns: repeat(4, 256px);
    grid-template-rows: repeat(2, 67px);
    gap: 8px;
}

.BodyParent{
        display: grid;
    grid-template-columns: repeat(4, 256px);
    grid-template-rows: minmax();
    gap: 8px;
}





.Inner {
  border-radius: inherit;
  background-color: black;
  height: 100%;
  width: 100%;
  background-size: 100%, 100%;
  
  
  overflow: hidden;
}
    
.MainLogo {
  border: 2px solid #333333;
  vertical-align: middle;
  border-style:ridge solid solid ridge;
  background-image: linear-gradient(black, #02180e00);;
  border-radius: 0 50px 15px 0;
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
  align-content: center;
}

.GamesTray {
  border-radius: 0 15px 15px 0;
  background-image: linear-gradient(black, #02180e00);;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #333333;
    grid-row: span 6 / span 6;
    grid-column-start: 1;
    grid-row-start: 3;
}

.Button{
  border: 2px solid #004141;
  border-radius: 50px;
transition: transform .1s ease-in-out;
width: auto;
max-width: fit-content;
height: 31px;
overflow: hidden;
background-image: url(Buttons/ButtonBlank2.png);
text-align: center;
align-items: center;
display:flex;
justify-content: center;
-webkit-user-drag: none;
padding: 0px 20px;
}
.Button:hover{
  transform: translate(0px, 2px);
  transform: scale(1.1);
}

.GameButton
{
  border: 2px solid #333333;
  width: 192px;
  height: 55px;
  border-radius: 50px;
  overflow: hidden;
  padding: 0;
  transition: transform .1s ease-in-out;
}
.GameButton:hover{
  transform: translate(5px);
}

.HeadLine {
  background-color: black;
  border: 2px solid #333333;
  border-radius: 25px;
    grid-column: span 2 / span 2;
    grid-row: span 4 / span 4;
    grid-column-start: 2;
    grid-row-start: 3;
}

.MainContent {
  background-image: linear-gradient(black, #02180e00);
  border: 2px solid #333333;
  border-radius: 12px;
    grid-column: span 3 / span 3;
    grid-row: span 11 / span 11;
    grid-column-start: 2;
    grid-row-start: 3;
    padding: 25px;
    display: block;
    overflow: auto;
    scrollbar-width: none;
    position: relative; top: -8px;
    min-height: 388px;
}


.RandomAd {
  border: 2px solid #333333;
  border-radius: 15px 0 0 15px;
  grid-row: span 2 / span 2;
    grid-column-start: 4;
    grid-row-start: 3;
}

.PollArea {
  border: 2px solid #333333;
  border-radius: 15px 0 0 15px;
    grid-row: span 5 / span 5;
    grid-column-start: 4;
    grid-row-start: 5;
    background-image: linear-gradient(black, #02180e00);;
}



.BottomTray {
  border: 2px solid #333333;
    grid-column: span 4 / span 4;
    grid-column-start: 1;
    grid-row-start: 11;
    grid-row: span 2;
    background-image: linear-gradient(black, #02180e00);
    border-radius: 50px;
}

.TopBorder {
  border: 2px solid #333333;
    grid-column: span 2 / span 2;
    /*border-radius: 50px 0 0 15px;*/
    grid-column-start: 3;
    grid-row-start: 1;
    background-image: linear-gradient(black, #00000000);
}

.ButtonRow {
    grid-column: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 2;
    display:flex;
    justify-content: center;
}

.PatreonTray {
  border: 2px solid #333333;
    grid-column-start: 1;
    grid-row-start: 9;
    border-radius: 0 50px 50px 0;
    overflow: hidden;
    transition: transform .1s ease-in-out;
    transform-origin: left;
}
.PatreonTray:hover
{
  transform-origin: left;
  transform: scaleX(1.05);
}

.NewsFeed {
  border: 2px solid #333333;
    grid-column: span 2 / span 2;
    grid-row: span 6 / span 6;
    grid-column-start: 2;
    grid-row-start: 7;
    background-image: linear-gradient(black, #00000034);
    scrollbar-width: none;
    scroll-behavior: smooth;
    overflow: hidden;
}

.ScreenShot {
margin: 5px;
border: 2px solid #08a155;
border-radius: 12px;
background-color: black;
float: left;
width: 225px;
height: 125px;
overflow: hidden;
transition: transform .1s ease-in-out;
justify-content: center;
}

.ScreenShot:hover {
border: 2px solid #acb9b6;
transform: scale(1.2);

}

.ScreenShotParent {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
justify-content: center;
}

        
}