body {
    background-color:  #0d001a ;
    color: rgb(27, 28, 33);
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    height:auto;
    margin:0px;
  }
  
  @font-face {
  font-family: 'Montserrat';
  src: url("/fonts/Montserrat-Regular.woff");
  }
  
    @font-face {
  font-family: 'Montserrat Bold';
  src: url("/fonts/Montserrat-Bold.woff");
  }
  
  @font-face {
  font-family: 'Montserrat Italic';
  src: url("/fonts/Montserrat-Italic.woff");
  }
  
  * { scrollbar-color: #0d001a #6ceded ; }
  
  .foryou{
    position:fixed;
  top:0px;
  right:0px;
    
  }

  #gamesplayed {font-size:30px;
margin:auto;
text-align:center;
color:#6ceded ;}

  h1 {
    color: white;
    text-align: center;
      font-family: 'Montserrat Bold';
    font-size:28px;
    background-color:  #6cb9c9  ;
    height:auto;
    width:50%;
    margin:auto;
    margin-bottom: 10px;
    margin-top:50px;
      border: #6ceded   3px double;
  }
  
  
  .title {
    color: white;
    text-align: center;
    font-size:30px;
   font-family: 'Montserrat Bold';
    background-color:  #6f1d5c ;
    border: #4f1446 3px double;
    height:auto;
    z-index: 100;
  width:50%;
  margin:50px auto 10px;
  }

  .sidebar {
    position:fixed;
    float:left;
    height:auto;
    top:25%;
    font-size: 15px;
    padding:10px;
    border-radius: 10px;
    overflow: hidden;
     width:200px;
  }

  .star {
color:gold;
font-size: 24px !important;}

  #thumb {width:180px;
height:143px;
image-rendering: pixelated;}

  #recs {display:flex;
    flex-direction: row;
    gap:20px;
    width:70%;
    flex-wrap:wrap;
    margin:50px auto 50px;
    padding:25px;
    justify-content: center;
    align-items:flex-start;}

    #main2 { max-height:500px;
      background-color: #f4fdff ;
      padding:15px;
      column-rule:#0d001a 1px solid;
      position: static;
      width:90%;
      column-count:2;
      column-width:100px;
      overflow: auto;
   margin:auto;
   margin-top:20px;
   margin-bottom:20px;
    scrollbar-color: #0d001a #6ceded;
scrollbar-width: thin;}

  .game {border:#6ceded 1px solid;
width:225px;
font-size:15px;
text-align: center;
background-color:rgb(255,255,255);
padding:10px;}

.game:hover {box-shadow:0px 0px 15px #6ceded;
scale:1.2;}

details {text-align: justify;}
summary {  font-family: 'Montserrat Bold';
text-align:left;}

  h3 {  font-family: 'Montserrat Bold';
text-align: center;
font-size:18px;
margin-top:10px;
margin-bottom:5px;}
  
  .pp {
  background-color: #0d001a;
     color:#effbfb;
    padding:15px;
    width:166px;
    border-radius: 2px;
    border:#6ceded solid 2px;
     overflow: auto;
     margin-bottom:2px;
  }
  
  .linkbutton {

    border-radius: 2px;
    color: #fbf5ef ;
    text-align: center;
  font-family:verdana;
    font-size:27px;
    background-color:   
    #6e5181    ;
    height:auto;
    width:200px;
    padding-bottom:2px;
    margin-bottom:2px;
    
  }
  
  .linkbutton a:link {
    text-decoration:none;
      color:white;
        font-family: 'Montserrat Bold';
  }
  
  .linkbutton a:visited {
    text-decoration: none;
      font-family: 'Montserrat Bold';
    color:white;
  }
  
  .linkbutton a:hover {
    text-decoration: line-through;
      font-family: 'Montserrat Bold';
    color: #0d001a ;
  }
  
  .linkbutton a:active {
   text-decoration: none;
      font-family: 'Montserrat Bold';
    color:white;
  }
  
  #main {
    height:auto;
    background-color: #f4fdff ;
    padding-left:15px;
    padding-right:15px;
    position: static;
    width:90%;
    overflow: auto;
 margin:auto;
 margin-top:20px;
 margin-bottom:20px;
 
  }

  .box1 {width:50%;
margin:auto;
background-color:#6f1d5c ;
border: #4f1446 3px double;}

.box2 {width:50%;
    margin:auto;
    margin-bottom:10px;
    background-color:#6cb9c9 ;
    border:  #6ceded    3px double;}
  
  p{
      display:block;
      position: relative;
      
  }
  
  summary {
    display: block;
  }
  
  a:link {
    text-decoration:none;
      color:#6cb9c9 ;
        font-family: 'Montserrat Bold';
  
  }
  
  a:visited {
    text-decoration: none;
      font-family: 'Montserrat Bold';
    color:#6d85a5 ;
  
  }
  
  a:hover {
    text-decoration: line-through;
      font-family: 'Montserrat Bold';
    color:#6e5181 ;
  
  }
  
  a:active {
   text-decoration: none;
      font-family: 'Montserrat Bold';
    color:#6e5181 ;
    
  }