/*==============================================================================
 * $Revision: #21 $                            $DateTime: 2020/08/03 18:40:00 $
 * $File: //dev/main/games.com/pages/games/cardgames/welcomeDlg/style.css $
 * $Author: kevinj $
 *========================-=====================================================
 * Style sheets for Terms of Service agreement page
 *==============================================================================
 * Copyright (c) 2024 Masque Publishing, Inc. All rights reserved.
 *==============================================================================
 */
html { /* Page canvas and body expand to viewport height */
    height: 100%;
}
body {
    position: relative;
    height: 100%;
    overflow: hidden;
    color: whitesmoke;
    font-family: "Source Sans Pro", sans-serif;
    background: url(tile.png) center / contain black repeat no-repeat;
}
#main {
    position: relative;
    height: 100%;
    z-index: 0;
    padding-right: max(env(safe-area-inset-right), 1rem);
    padding-left: max(env(safe-area-inset-left), 1rem);
    padding-bottom: max(env(safe-area-inset-bottom), 1rem);
}
#main::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    content: "";
    background: radial-gradient(black, transparent 85%);
}
.runner::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    margin: auto;
    content: "";
    background: url(runner.png) center bottom / auto 30% no-repeat;
}
#foreground {
    height: 100%;
    margin: auto;
    display: table;
}
#foreground > * {
    display: table-cell;
    vertical-align: middle;
}
.dialog {
    max-width: 640px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 12pt;
}
@media (max-width: 640px) and (min-aspect-ratio: 1/1) {
    .dialog {
        font-size: min(2.5vw, 5.5vh);
    }
}
@media (max-width: 640px) and (max-aspect-ratio: 1/1) {
    .dialog {
        font-size: min(5.5vw, 2.5vh);
    }
}
.dialog-heading {
    color: gold;
    font-weight: bold;
    font-size: 200%;
}
.dialog-body {
    text-align: center;
}
/**
 * Button styles
 */
#agree-button {
    font-size: 150%;
    font-weight: bold;
    padding: 0pt 30pt 0pt 30pt;
    margin-bottom: 30pt;
    color: #001168;
    background: #FCF032;
    background: linear-gradient(to bottom,
                                #FCF032 0%,
                                #FFB400 2%,
                                #FCD22D 35%,
                                #FCD22D 70%,
                                #FFB400 90%);
                                #FCF032 95%);
    border: 1pt solid #F6E162;
}
#agree-button.hover,
#agree-button:hover {
    border-color: #FFFFFF;
}

a:link {
  color: gold;
  text-decoration: none;
}

a:visited {
  color: gold;
  text-decoration: none;
}

a:hover {
  color: gold;
  text-decoration: underline;
}

a:active {
  color: #3D67FF;
  background-color: transparent;
  text-decoration: none;
}