@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}
html {
    background: #333 url('./IceBkg.png') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
  }
.main-page
{
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
body
{   
    font:1.0rem "Roboto",sans-serif;
    min-height: 100vh;
}
header
{
    
    font: 1.50em "Roboto",sans-serif;
    border: 1px solid black;
    margin: 0;
    padding: .5rem;
    display: flex;
    justify-content: space-between;
    height:100px;
    align-items: center;
}
.header-title
{
    font: "Roboto",sans=serif;
    font-size:2.0rem;
    font-weight: bolder;
}
.header-logo
{
    width:75px;
    height: auto;    
    font:1.0rem
}
ul
{
    list-style-type: none;        
}
li a, li a:visited
{
    text-decoration: none;
    color: black;
}
li a:hover, li a:focus
{
    background: whitesmoke;    
    cursor: pointer;
}
.header-nav
{        
    font: "Roboto",sans-serif;  
    font-size: .75rem;  
    
}
.better-player
{
    text-align: center;
    margin: 10px;
    font-size: 1.0em;
    font-weight: bold;
}
.play-for-fun
{
    text-align:center;
    font-size:.75em;
    margin: 10px;
}

.video-div
{
    display: flex;
    justify-content: center;
    align-items: center;
}
video 
{
    width: 75%;
}
.button-div
{
    display:flex;
    justify-content: center;
    align-items: center;
}
.play-button 
{    
    margin: 10px;
    background-color: black;  /* Black background */
    color: white;             /* White text for visibility */
    border: none;             /* Removes default button border */
    padding: 15px 40px;       /* Keeps width significantly larger than height */
    border-radius: 50%;       /* Creates the smooth oval curve */
    cursor: pointer;          /* Cursor changes to pointer on hover */
    text-decoration: none;
  }

 @media (min-width: 577px) 
 {
    .mobile { display: none; }
 }
 @media (max-width : 576px)
 {
    .desktop {display: none;}
 }
     


/* .video-container
{
    position: relative;
    width: 640px;

} */
/* video {
    width: 100%;
    height:100%;
    object-fit: cover;
} */
/* * {
    box-sizing: border-box;
}
.all-columns{
    float: left;
    width: 33.33%;
    padding: 13px;
    min-height: 350px;
    border: 1px solid;
    text-align: center;
}

.all-rows:after{
    content:"";
    display: table;
    clear:both;
}

@media  screen and (max-width:768px) {
    .all-columns{
        width:100%;
    }
    
} */