:root {
    --dk-color:#e8c088;
    --mid-color:#E4E6C3;
    --lt-color:#F7F7F2;
    --dkest-color:#261C15;
    --accent:#4b7ed7;
    --hover-color: #ffeab9; 
 }

body{
   width: 100%;
   max-width: unset; 
 }

 .home_bar{
   width: 100%;
   margin: auto;
   height:30px;
   background-color: none;
}

.back_to_home{
	position: block;
   display: inline-block;
   margin: 1% 0%;
	padding: 3px;
	border-radius: 4px;
	border: 2px solid var(--dk-color);
   background-color: var(--dk-color);
}

.back_to_home:hover{
	background: var(--hover-color);
}

 h2{
    font-family: disco;
    line-height: unset;
    font-size: 40px;
}

.floating-img{
  position: fixed;
  animation-name: travel;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  cursor: pointer;
}

.floaty-fades{
  animation: 3s hide ease infinite;
}

.floaty-hides{
  display: none;
}

.pop_02{
  content: url("free_with_ads/999999th_visitor_2.gif")
}
.pop_03{
  content: url("free_with_ads/999999th_visitor_3.gif")
}
.pop_04{
  content: url("free_with_ads/999999th_visitor_4.gif")
}
.pop_05{
  content: url("free_with_ads/999999th_visitor_5.gif")
}
.pop_06{
  content: url("free_with_ads/999999th_visitor_6.gif")
}
.pop_07{
  content: url("free_with_ads/999999th_visitor_7.gif")
}
.pop_08{
  content: url("free_with_ads/999999th_visitor_8.gif")
}

@keyframes hide{
  from{opacity: 100%;
  left:50%;
  top: 45%}
  to {opacity: 0%;
  left:50%;
  top: 45%}
}

@keyframes travel{
   from {left: 100px;
   top: 100px;}
  to {right: 100px;
   top: 300px}
 }

.game_wrapper{
   text-align: center;
   margin: auto;
   cursor: pointer;
 }

.main-container{
   width: 90%;
   margin: auto;
   display: flex;
   flex-direction: row;
 }
 
.sidebar{
   display: flex;
   flex-direction: column;
   width: 25%;
 }

.side-block{
   width: 100%;
   margin: 5% 0%;
}

.pattern-container{
   width: 48%;
   display: flex;
   flex-direction: column;
   margin: auto;
}

.pattern-page{
   width: 90%;
   height: fit-content;
   background-color: white;
   margin: auto;
   padding: 1%;
   border-radius: 4px;
   margin-top: 1%;
   margin-bottom: 1%;
}

.pattern-piece{
  width: 100%;
}

.center-block{
   text-align: center;
   padding: 1%

}


.center-img{
   margin: auto;
   max-width: 90%;
   
}


#game_needle{
   padding-right: 90px;
   width: 800px;
   height: 200px;
}

.mobile-img{
  display: none;
}

@media only screen and (max-width: 720px) {

.mobile-img{
  display: unset;
}

body{
   width:100%;
}

 .main-container{
   width: 100%;
   flex-direction: column;
 }

 .floating-img{
   z-index: 0;
   max-width: 150px;
   position: fixed;
   animation-name: travel;
   animation-duration: 10s;
   animation-iteration-count: infinite;
 }

  @keyframes travel{
   from {left: 100px;
   top: 100px;}
  to {right: 100px;
   bottom: 100px}

 }

.game_wrapper{
   width: fit-content;
   margin: auto;
   display: flex;
   position: relative;

   -ms-zoom: calc(.5);
   -moz-transform: scale(.5);
   -moz-transform-origin: 0 0;
   -o-transform: scale(.5);
   -o-transform-origin: 0 0;
   -webkit-transform: scale(.5);
   -webkit-transform-origin: 0 0;
}

 .sidebar{
   display: grid;
   grid-template-columns: auto auto;
   width: 100%;
 }

.side-block{
  width:98%;
  margin: 2% 0%;
}

 .third-img{
   display: none;
 }

 .fourth-img{
   display: none;
 }


 .pattern-container{
   width: 100%;
}



@keyframes cycle_one{
  0% {content: url("/free_with_ads/ad_dripping_cup.gif")}
  33% {content: url("/free_with_ads/ad_hilbert_snap.gif")}
  67% {content: url("/free_with_ads/ad_merge_thimbles.gif");}
}

@keyframes cycle_two{
  0% {content: url("/free_with_ads/ad_thimble.gif")}
  50% {content: url("/free_with_ads/ad_cash4orts.gif")}
}

@keyframes cycle_three{
  0% {content: url("/free_with_ads/ad_triple_needle.gif")}
  50% {content: url("/free_with_ads/ad_dont_tell_your_wife.gif")}
}

@keyframes cycle_four{
  0% {content: url("/free_with_ads/ad_skin_hat.gif")}
  50% {content: url("/free_with_ads/ad_we_buy_junk.gif")}
}

}