@font-face {
    font-display: swap;
    font-family: 'CowboyslangW00';
    font-style: normal;
    font-weight: normal;
    src: url('./fonts/CowboyslangW00-Regular.woff') format('woff2'),
        url('./fonts/CowboyslangW00-Regular.woff2') format('woff');
}

@font-face {
    font-display: swap;
    font-family: 'Draw me the Rainbow';
    font-style: normal;
    font-weight: normal;
    src: url('./fonts/DrawmetheRainbow.woff2') format('woff2'),
        url('./fonts/DrawmetheRainbow.woff') format('woff');
}
@-webkit-keyframes marquee {
	from {
		left: 100%;
	}

	to {
		left: -100%;
	}
}
@keyframes marquee {
	from {
		left: 100%;
	}

	to {
		left: -100%;
	}
}


* {
    font-family: CowboyslangW00, sans-serif;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

body {
    box-sizing: border-box;
    height: 100%;
    margin: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    padding: 0;
    position: fixed;
    width: 100vw;
}
.bg {
    background: url(./bg.jpg);
    background-attachment: fixed;
    background-position: left top; 
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    height: calc(100vh - calc(100vh - 100%));
    position:absolute;
    width: 100%;
    z-index: -2;
}
input {
    border: 4px solid transparent;
    font-size: 2rem;
    margin: 0 5px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 1.5rem
  }
  input[type=number]:focus {
    border: 4px solid lightcoral;
    box-shadow: 0 0 10px 2px lightcoral;
    outline: none;

  }

  .newgame:hover, .settingsapply:hover {
    color: indianred;
    cursor: pointer;
    rotate: 5deg;
    text-decoration: underline;
  }
  .newgame:active, .settingsapply:active {
    color: lightcoral;
    cursor: pointer;
    text-decoration: underline;
  }

  .wrapper {
    align-items: center;

    display:flex;
    flex-flow: column nowrap;
    padding: 20px;
  }

  .newgame, .settingsapply {
    font-size: 3rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)
  }


  .box {
	display: flex;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)

}

.box .inner {
    align-items: center;
    box-shadow: inset 0 0 14px 2px rgba(101, 101, 101, 0.336);
    display: flex;
	height: 160px;
	overflow: hidden;
	white-space: nowrap;
	width: 200px;
}

.box .inner:first-child {
	background-color: #f7f5f6;
	color: #3b3130;
	transform: perspective(100px) rotateY(-15deg);
	transform-origin: right;
}

.box .inner:last-child {
	background-color: #3b3130;
	color: #f7f5f6;
	transform: perspective(100px) rotateY(15deg);
	transform-origin: left;
}

.box .inner span {
	-webkit-animation: marquee 5s linear infinite;
	        animation: marquee 5s linear infinite;
	position: absolute;
}

.box .inner:first-child span {
	-webkit-animation-delay: 2.5s;
	        animation-delay: 2.5s;
	left: -100%;
}
h1 {
    font-family: 'Draw me the Rainbow',sans-serif;
    font-size: 3rem;
    line-height: 3rem;
    margin: 0;
    padding: 0;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)
}
h1:hover {
    cursor: default;
    scale:1.2;
}
.box:hover {
    rotate: 5deg;
}
.win {
    color: indianred;
    font-size: 2.5rem;
    width: 100%;
}
.logwrapper {
    font-size: 1.5rem;
    margin-top: 30px;
    max-width: 600px;
    text-align: center;
}
.output {
    background-color: rgba(249, 249, 249, 0.596);
    border-radius: 12px;
    color: #3b3130;
    font-size: 1.2rem;
    max-height: 400px;
    overflow-y:auto;
    padding: 0 1rem;
}
.hidden {
    bottom: 200%;
    /* display: none; */
    opacity: 0;
    position: absolute;
}
.settings {
    align-items: center;
    background-color: #f8cecf;
    border: 2px solid black;
    display:flex;
    flex-flow: column nowrap;
    height: 200px;
    justify-content: space-evenly;
    max-width: 600px;
    min-width: 300px;
    transition: all 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 60vw

}

.hidewrapper {
    position: absolute;
    transform: translateY(120%);
    transition: all 1.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
svg {
    height: 30px;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: all 1.4s cubic-bezier(0.175, 0.885, 0.32, 1);
    width: 30px;
    z-index:2;


}

svg:hover {
    cursor: pointer;
    fill: white;
    scale:1.2;
    transform: rotate(280deg);
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  border-radius: 19px;
  margin: 0;

}
input[type=number] {
  -moz-appearance: textfield;
  border-radius: 19px;
}
input[type=range] {
    /* -moz-appearance: textfield; */
    /* border-radius: 19px; */
    width: 200px;
  }
a {
    background-color: rgba(71, 71, 71, 0.429);
    bottom: 1px;
	color: #f7f5f6;
    position:absolute;
    right: 2px;
    text-decoration: none;
}
a:hover {
    color: rgb(220, 238, 255);
    rotate: 1deg;
    -webkit-text-decoration: underline dashed rgb(255, 255, 255) 1px;
            text-decoration: underline dashed rgb(255, 255, 255) 1px;
}