@charset "UTF-8";
* {
  	box-sizing: border-box;
	margin: 0;
    padding: 0;
}

html{
	background-size: cover;
}

body {
  margin: 0;
}

#display{
    position:relative;
}

/*preloading animation*/
#loader {
	position: absolute;
	width: 100%;
	height: 100vh;
	background: url(loading_goldfish.gif) no-repeat center;
	background-color: #094D86;
	background-size: 70%;
}

/*Gacha contents*/
#blue_nekoi{
    position:relative;
    display: none;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

#blue_nekoi.hidden {
    opacity: 0;
  }

#red_darumiao{
    position: relative;
    display: none;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

#red_darumiao.hidden{
    opacity: 0;
}

#yellow_taneko{
    position: relative;
    display: none;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

#yellow_taneko.hidden{
    opacity: 0;
}

#green_senbazuko{
    position: relative;
    display: none;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

#green_senbazuko.hidden{
    opacity: 0;
}

#red_omamori{
    position: relative;
    display: none;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

#red_omamori.hidden{
    opacity: 0;
}

#red_goldfish{
    position: relative;
    display: none;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

#red_goldfish.hidden{
    opacity: 0;
}

#red_manekineko{
    position: relative;
    display: none;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}

#red_manekineko.hidden{
    opacity: 0;
}


/*Video (contents)*/
#Video {
    position:fixed;
    align-content: center;
    bottom: 0;
    width: 100%; 
    height: 100%;
}


Video::-webkit-media-controls {
	display:block!important;
}

Video::-webkit-media-controls-enclosure {
	height: 0;
	overflow: hidden;
}

Video::-webkit-media-controls-panel {
	height: 0;
	overflow: hidden;
}


/*container*/
.container{
    position: relative;
    min-width: 100%;
    height: 100vh;
	padding: 0;
	margin: 0;
}

 .center {
	display: block;
	margin-top: auto;
	margin-bottom: auto;
	padding: 0%;
	height: 100%;
}

/*make the video to be responsive within the container */
.container Video {
	width: 100%;
	height: 100%;
    position:relative;
    overflow: hidden;
	display: block;
	margin: auto;
	object-fit: cover;
    object-position: 50% 50%;
}

.container .hover {
	color: transparent;
}

/*style the button (spin) and place it within the container/image*/
.container .btn {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-230%, 100%);
    background-color: #555;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
	outline: none;
	color: white;
    cursor: pointer;
    border-radius: 5px;
    z-index: 100;
}

#spin{
    background-color: transparent;
    width:100px;
    height:100px;
}

/*style the button (draw) and place it within the container/image*/
.container .btn1 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-120%, 455%);
    background-color: #555;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
	color: transparent;
    cursor: pointer;
    border-radius: 5px;
    z-index: 100;
}

.btn1 {
	width: 200px;
	float: left;
}

#draw{
    background-color: transparent;
}

/*style the button (again) and place it within the container/image*/
.container .btn2 {
  position: fixed;
    top: 50%;
    right: 50%;
    transform: translate(120%, 455%);
    background-color: #555;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
	color: transparent;
    border-radius: 5px;
    z-index: 100;
}

.btn2 {
	width: 200px;
}

#again{
	background-color: transparent;
}

#button:focus:after {
    border-color: transparent;
    webkit-box-shadow: none;
    box-shadow: none;
	border: none;
	outline: none;
}