.topright{
position: absolute;
top:5%;
color:white;
height:25%;
padding-top:5%;
right:10%;
width:30%;
float:right;
opacity:.75;
}
.hori{
display:flex;
flex-direction:row;
}
.verti{
display:flex;
flex-direction:column;
}
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 26px 26px 0 rgba(0,0,0,0.2);
}
/* Add some padding inside the card container */
.cardcontainer {
padding: 2px 16px;
}
.container-fluid::after{
min-height:100%;
content:"";
display:block;
}
.footer,.container-fluid::after{}
.center {
position: absolute;
top:50%;
left:100%;
transform: translate(-50%,-50%);
}
#cloud {
background: rgba(255, 255, 255);
width: 150px;
height: 50px;
border-radius: 75px;
box-shadow: 10px 10px rgba(0,0,0,0.2);
animation: move 3s infinite;
}
@keyframes move {
0% {
transform: translatex(0);
}
50% {
transform: translatex(-40px);
}
}
.xpanding-content {
padding: 0 18px;
max-height: 0px;
overflow: hidden;
transition: max-height .0s ease-out;
}
/* Add a green text color and a checkmark when the requirements are right */
.validcp {
color: green;
}
.validcp:before {
position: relative;
left: -35px;
}
.invalidcp {
color: red;
}
.invalidcp:before {
position: relative;
left: -35px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.modal2 {
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content2 {
padding: 0%;
border: 1px solid #888;
}
/***SLOT MACHINE******/
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
border: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
#app {
width: 100%;
height: 100%;
background: #212121;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.doors {
display: flex;
}
.door {
background: #fafafa;
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.4) inset;
width: 100px;
height: 150px;
overflow: hidden;
border-radius: 1ex;
margin: 1ch;
}
.boxes {
/* transform: translateY(0); */
transition: transform 1s ease-in-out;
}
.box {
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
}
.buttons {
margin: 1rem 0 2rem 0;
}
button {
cursor: pointer;
font-size: 1.2rem;
text-transform: uppercase;
margin: 0 0.2rem 0 0.2rem;
}
.info {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
/**************Flame****/
.trvlcrd:hover{
background-color:RGB(208,255,254);
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 1;
}
@media screen and (min-width: 601px) {
div.largeFonts {
font-size: 5vw;
}
}
@media screen and (max-width: 600px) {
div.largeFonts {
font-size: 15vw;
color:purple;
}
}
@media screen and (min-width: 601px) {
div.justText {
font-size: 2vw;
}
}
@media screen and (max-width: 600px) {
div.justText {
font-size: 6.5vw;
}
}
@media screen and (min-width: 601px) {
div.shift {
display: flex;
flex-direction: row;
}
}
@media screen and (max-width: 600px) {
div.shift {
display: flex;
flex-direction: column;
}
}
@media screen and (min-width: 601px) {
div.csize {
width:33%;
}
}
@media screen and (max-width: 600px) {
div.csize {
width:75%;
}
}
@media screen and (min-width: 601px) {
div.shownly {
width:33%;
}
}
@media screen and (max-width: 600px) {
div.shownly {
width:75%;
}
}
@media screen and (min-width: 601px) {
div.switchtxt {
font-size:2vw;
padding-top:5%;
}
}
@media screen and (max-width: 600px) {
div.switchtxt {
font-size:5vw;
padding-top:10%;
}
}
@media screen and (min-width: 601px) {
div.modal-content2 {
width: 50%; /* Could be more or less, depending on screen size */
margin:5% auto; /* 15% from the top and centered */
}
}
@media screen and (max-width: 600px) {
div.modal-content2 {
width: 100%; /* Could be more or less, depending on screen size */
margin:10% auto; /* 15% from the top and centered */
}
}
/**Large Screen*/
@media screen and (min-width: 601px) {
img.mobile-only{
max-width:80%;
}
text.mobile-only{
font-size:1.5vw;
}
text.mobile-only2{
font-size:1vw;
}
div.logodiv{
width:15%;
}
.logotxt{
padding-top:10%;
}
div.mainpic{
height:65vh;
}
.intropg{
font-size:1vw;
}
a.holdbk{
font-size:5vw;
}
}
/**Mobile Screen**/
@media screen and (max-width: 600px) {
a.holdbk{
font-size:20vw;
}
img.mobile-only{
max-width:80%;
}
text.mobile-only{
font-size:6vw;
}
text.mobile-only2{
font-size:4vw;
}
div.logodiv{
width:70%;
}
.logotxt{
padding-top:10%;
}
div.mainpic{
height:;
}
.intropg{
font-size:5vw;
}
}