#welcome_container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  
  box-sizing: border-box;
}
#welcome {
  width: 30%;
  max-height: 70vh;
  overflow-y:auto;
  text-align: center;
  padding: 15px;
  border: 2px solid rgb(242, 255, 0);
  border-radius: 10px;
  background-color: white;
  font-family: monospace;
  cursor: pointer;
}
#welcome h1 {
  margin-bottom: 10px;
  color: black;
  font-size: 18px;
}
#welcome p {
  line-height: 2;
  color: black;
  font-size: 15px;
  text-align: left;
}





#legal {
  position: absolute;
  bottom: 2%;
  left: 4.8%;
  line-height: 1.5;
}
#legal a {
  color: rgba(255,255,255,1); 
  font-size: 13px;
  font-weight: normal;
  text-decoration: none;
  font-family: "monospace";
}


#legal a:hover {
  background-color: white;
  color: black;
  font-size: 15px;
}

body {
  margin: 0;
  padding: 0;
  background-color: rgba(90,11,33,255);
  background-image: url('./bg/displace.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: normal;
  overflow: hidden;
  border: 22px solid rgba(56,12,48,255); 
  box-sizing: border-box;
  height: 100vh;
}

    #fields_container {
      top: 45px;
      right: 37px;
      position: absolute;
      flex-wrap: nowrap;   
      z-index: 0;
      white-space: nowrap;
    }
    #cards_remaining {
      color: grey;
      font-size: 50px;
      border: 6px solid black;
      padding: 2px 35px;
      font-family:  monospace, sans-serif, 'Tanohe Sans';
      font-weight: initial;
      display: inline;
      padding-left: 80px; 
      background-image: url('./bg/cards2red.svg');           
      background-repeat: no-repeat;
      background-position: 10% center; 
      margin: 10px;
      background-color: black;
      border-radius: 10px;
    }
    #money {
      border: 6px solid black;
      display: inline;
      padding: 2px 35px;
      font-family: monospace, sans-serif, 'Tanohe Sans';
      font-weight: initial;
      color: grey;
      font-size: 50px;  
      background-color: black;
      border-radius: 10px;
    }




    @media only screen and (orientation: landscape) {
    }

    /* For very small landscape screens width 974-1199 */
    @media only screen and (min-width: 974px) and (max-width: 1199px) and (orientation: landscape) {
        
      #cards_remaining, #money {
        font-size: 38px;   
	      background-size: 25%;      
      }	   
      #money {
        padding: 2px 15px;
	      border: 6px solid black;
      }	    
      #cards_remaining {
        padding-left: 49px;
	      padding-right: 15px;     
	      margin: 0px;  
	      margin-right: 5px; 
	      border: 6px solid black;    
      }	      
    }
    /* For small landscape screens width 1200-1300 */
    @media only screen and (min-width: 1200px) and (max-width: 1300px) and (orientation: landscape) {


      body {
        background-size: 75%;
      }
      #cards_remaining, #money {
	      font-size: 42px;   
	      background-size: 25%;      
      }	   
      #money {
        padding: 2px 25px;
	      border: 6px solid black;
      }	    
      #cards_remaining {
        padding-left: 65px;
	      padding-right: 25px;     
	      margin: 0px;  
	      margin-right: 5px; 
	      border: 6px solid black;    
      }	 
    }
    /* For very large PC screens */
    @media only screen and (min-width: 1700px ) and (orientation: landscape) {
     
    }



    /* For Smartphones and Portrait Tablets*/
    @media only screen and (orientation: portrait) {
      
      #welcome {
        width: 50%;
      }

      #legal {
        position: fixed;
  	    bottom: 0%;
        left: 10%;
      }

      #cards_remaining, #money {
	      font-size: 25px;   
	      background-size: 25%;      
      }	     
      #money {
        padding: 2px 15px;
	      background-color: rgba(56,12,48,255);     
	      border: 6px solid rgba(56,12,48,255);       
      }	    
      #cards_remaining {
        padding-left: 35px;
	      padding-right: 15px;     
	      margin: 0px;  
	      margin-right: 5px; 
	      background-color: rgba(56,12,48,255);     
	      border: 6px solid rgba(56,12,48,255);     
      }	      
      body {
	      overflow-y: visible;  
	      background-image: url('./bg/displace.svg');
        background-size: 150%;  
	      background-position: center;   
        border: 22px hidden rgba(56,12,48,255);    
      }	    
	      	   
      #fields_container {
        top: 20px; 
      }	
    } 

    /* For thin Smartphones */
  @media only screen and (max-width: 400px) and (orientation: portrait) {
    #welcome {
      width: 80%;
    }
  }
   /* For very thin Smartphones */
   @media only screen and (max-width: 320px) and (orientation: portrait) {
     
    #welcome {
      width: 80%;
    }
     #legal {
       position: fixed;
       bottom: 0%;
       left: 10%;
     } 
     #legal a {
       font-size: 12px;
     }  
     body {
       overflow-y: visible;  
       background-image: url('./bg/displace.svg');  
       background-position: center;    
     }     
   }

   /* For small smartphones smaller cards */
   @media only screen and (max-width:600px) and (max-height: 690px) and (orientation: portrait) {
    #welcome {
      width: 60%;
    }
   } 

  /* For smartphones with long height 830-950 */
  @media only screen and (max-width: 600px) and (min-height: 830px) and (max-height: 950px) and (orientation: portrait) {
    #welcome {
      width: 60%;
    }
  }

  
  /* For portrait tablets 768 x 1024 / 820 x 1180 / 1024 x 1366 / 912 x 1368 / 853 x 1280 */

  @media screen and (min-width: 750px) and (orientation: portrait) {
      body {
        background-image: url('./bg/displace.svg');     
        background-size: 150%;
      }	    
      #cards_remaining, #money {
        font-size: 40px;   
	      background-size: 25%;       
      }	    
      #cards_remaining {
        padding-left: 60px; 
      }	     
  }
  @media screen and (min-width: 750px) and (max-height: 1250px) and (orientation: portrait) {
    	       
  } 
  @media screen and (min-width: 750px) and (max-height: 1150px) and (orientation: portrait) {
    	       
  } 

     

/*
ALL Media Queries:

------------------------------------------------

max-width 320 and orientation portrait
very thin smartphones

max-width: 600 and max-height 690 and orientation: portrait
small smartphones

max-width: 600 and orientation: portrait (implying height 691-829)
280-540 x 653-932 	(usual width 360-430)
smartphones 375 x 667 / 414 x 896 / 390 x 844 / 430 x 932 / 412 x 915 / 360 x 740 / 412 x 915 / 540 x 720 (surface duo) / 280 x 653 (galaxy fold)

max-width: 600 and min-height: 830 and max-height 950 and orientation: portrait
long smartphones

min-width: 750 and orientation: portrait
768-1024 x 1024-1366
portrait tablets 768 x 1024 / 820 x 1180 / 1024 x 1366 / 912 x 1368 / 853 x 1280 


landscape screen 974-1200 width
tablet 1024 x 600 

landscape screen 1200-1300 width
tablet 1280 x 800

all screens (implying inbetween 1300-1700 max-width)

landscape screens Min-width: 1700

--------------------------------------------------------------
*/