/* defaults */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Raleway', sans-serif;
}

html,
body {
  padding: 0;
}

a,
button,
input {
  text-decoration: none;
  outline: none;
  transition: all 0.3s;
}

button {
  -webkit-appearance: button;
  cursor: pointer;
}

input {
  line-height: normal;
}

h2,
.h3,
.h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 400;
  line-height: 1.2;
}

h2 {
  font-size: calc(1.35rem + 1.2vw);
}

@media (min-width: 1200px) {
  h2 {
    font-size: 2.25rem;
  }
}

.h3 {
  font-size: calc(1.3125rem + 0.75vw);
}

@media (min-width: 1200px) {
  .h3 {
    font-size: 1.875rem;
  }
}

.h4 {
  font-size: calc(1.275rem + 0.3vw);
}

@media (min-width: 1200px) {
  .h4 {
    font-size: 1.5rem;
  }
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Pages Styles */

#introView,
#mainView {
    max-width: 600px;
    margin: 3rem auto;
}

#mainView {
    min-height: 50vh;
}

.position-centering {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#gameView {
    max-width: 600px;
    margin: 4rem auto;
}

.w3-light-card-inset {
	box-shadow: inset 0 0 2px 1px #dbdce4;
}

.w3-sans-serif {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.w3-agency {
  font-family: "Agency FB",sans-serif, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.w3-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* adjustments */
.w3-button {
text-overflow: ellipsis !important; 
}
/* cards */
.w3-light-card {
box-shadow: 0 0 2px 1px #dbdce4;
}
.w3-light-card-hover:hover {
box-shadow: 0 5px 5px 2px #e5e5e5;
}
.w3-light-card-1,.w3-light-card-1-hover:hover {
  box-shadow:0 0.46875rem 2.1875rem rgba(4,9,20,0.03),0 0.9375rem 1.40625rem rgba(4,9,20,0.03),0 0.25rem 0.53125rem rgba(4,9,20,0.05),0 0.125rem 0.1875rem rgba(4,9,20,0.03);
  border-width:0;
  transition:all .2s;
}

@media screen and (max-width: 600px) {
    .w3-light-card,
    .w3-light-card-1 {
        box-shadow: none;
    }
    #introView,
    #mainView {
        max-width: 600px;
        margin: 0 auto;
    }
}