CrazyChickensCSS.css

@font-face {
    font-family: 'daydreamthin';
    src: url('daydream-webfont.woff2') format('woff2'),
         url('daydream-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


img {
  width: auto ;
  max-width: 100% ;
  height: auto ;
}





.content {
    margin-top: 17.5%;
margin-left: 2%;

}


.column {
  float: left;
  width: 25%;
display: inline;
margin-top: 10%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


.column1 {
  float: left;
  width: 25%;


margin-top: 5%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.column2 {
  float: left;
  width: 25%;
display: inline;
margin-top: 5%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
margin-top: 10%;
}

.column3 {
  float: left;
  width: 25%;
display: inline;

margin-top: 5%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'daydreamthin' , sans-serif;
    font-weight: 400;
    margin: 10px 0;
	color: #cc7040;

}

h1{
		-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;	
}

h2 { 
		-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

body {background-color: #4d2c2d;}

body, html {
  height: 100%;
  

}

.iframe{
    border-radius: 20px;
    border: 2px solid #ff9100;
    margin-top: 25px;
    padding: -20px;

}

.bg {
  width: 100%;
  z-index: 0;
}

.bg2 {
	margin-top: -30px;
	background-color: #4d2c2d;
color: white;
}



.openingtext {
margin-left: 5px;
font-family: 'daydreamthin' , sans-serif;
text-align:left;
width: 33%;
  
 

}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #f2d2b0;
}

li {
  float: right;
}

li a {
  display: block;
  color: rgb(255, 144, 0);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'daydreamthin' , sans-serif;
  	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
		 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #eec17b;
}

.slideshow {
margin-left: -15%;
	
}


.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;

  padding: 10px;
}

.grid-item {

  padding: 20px;
  font-size: 30px;
  text-align: center;
}


.text1 { 
font-size: 0.5em;
}

@media (min-width: 1000px) {
  #timeline .demo-card:nth-child(odd) .head::after, #timeline .demo-card:nth-child(even) .head::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }

  #timeline .demo-card:nth-child(odd) .head::before, #timeline .demo-card:nth-child(even) .head::before {
    position: absolute;
    content: "";
    width: 9px;
    height: 9px;
    background-color: #e69e55;
    border-radius: 9px;
    box-shadow: 0px 0px 2px 8px #f2d2b0;
	
  }
}
/* Some Cool Stuff */
.demo-card:nth-child(1) {
  order: 1;
}

.demo-card:nth-child(2) {
  order: 4;
}

.demo-card:nth-child(3) {
  order: 2;
}

.demo-card:nth-child(4) {
  order: 5;
}

.demo-card:nth-child(5) {
  order: 3;
}

.demo-card:nth-child(6) {
  order: 6;
}

/* Border Box */
* {


}

/* Fonts */
body {
  font-family: Roboto;
}

#timeline {
  padding: 100px 0;
  background: #4d2c2d;
  border-top: 1px solid rgba(191, 191, 191, 0.4);
  border-bottom: 1px solid rgba(191, 191, 191, 0.4);
 
}
#timeline h1 {
  text-align: center;
  font-size: 3rem;
  font-weight: 200;
  margin-bottom: 20px;
}
#timeline p.leader {
  text-align: center;
  max-width: 90%;
  margin: auto;
  margin-bottom: 45px;
  color: #cc7040;
  font-family: 'daydreamthin';
  font-size: 10px;
  	-webkit-text-stroke-width: 0.8px;
    -webkit-text-stroke-color: black;
}
#timeline .demo-card-wrapper {
  position: relative;
  margin: auto;
}
@media (min-width: 1000px) {
  #timeline .demo-card-wrapper {
    display: flex;
    flex-flow: column wrap;
    width: 1170px;
    height: 1650px;
    margin: 0 auto;
  }
}
#timeline .demo-card-wrapper::after {
  z-index: 1;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px solid rgba(191, 191, 191, 0.4);
}
@media (min-width: 1000px) {
  #timeline .demo-card-wrapper::after {
    border-left: 1px solid #e69e55;
  }
}
#timeline .demo-card {
  position: relative;
  display: block;
  margin: 10px auto 80px;
  max-width: 94%;
  z-index: 2;
}
@media (min-width: 480px) {
  #timeline .demo-card {
    max-width: 60%;
    box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
  }
}
@media (min-width: 720px) {
  #timeline .demo-card {
    max-width: 40%;
  }
}
@media (min-width: 1000px) {
  #timeline .demo-card {
    max-width: 450px;
    height: 400px;
    margin: 90px;
    margin-top: 45px;
    margin-bottom: 45px;
  }
  #timeline .demo-card:nth-child(odd) {
    margin-right: 45px;
  }
  #timeline .demo-card:nth-child(odd) .head::after {
    border-left-width: 15px;
    border-left-style: solid;
    left: 100%;
  }
  #timeline .demo-card:nth-child(odd) .head::before {
    left: 491.5px;
  }
  #timeline .demo-card:nth-child(even) {
    margin-left: 45px;
  }
  #timeline .demo-card:nth-child(even) .head::after {
    border-right-width: 15px;
    border-right-style: solid;
    right: 100%;
  }
  #timeline .demo-card:nth-child(even) .head::before {
    right: 489.5px;
  }
  #timeline .demo-card:nth-child(2) {
    margin-top: 180px;
  }
}
#timeline .demo-card .head {
  position: relative;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 400;
}
#timeline .demo-card .head .number-box {
  display: inline;
  float: left;
  margin: 15px;
  padding: 10px;
  font-size: 35px;
  line-height: 35px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.17);
  color: #f2d2b0;
}
#timeline .demo-card .head h2 {
  text-transform: uppercase;
  font-size: 1.3rem;
  font-weight: inherit;
  letter-spacing: 2px;
  margin: 0;
  padding-bottom: 6px;
  line-height: 1rem;
}
@media (min-width: 480px) {
  #timeline .demo-card .head h2 {
    font-size: 165%;
    line-height: 1.2rem;
	color: #c66c3f;
  }
}
#timeline .demo-card .head h2 span {
  display: block;
  font-size: 0.6rem;
  margin: 0;
}
@media (min-width: 480px) {
  #timeline .demo-card .head h2 span {
    font-size: 0.8rem;
	margin-bottom: 10px;
  }
}
#timeline .demo-card .body {
  background: #eec17b;
  border: 1px solid rgba(191, 191, 191, 0.4);
  border-top: 0;
  padding: 15px;
}
@media (min-width: 1000px) {
  #timeline .demo-card .body {
    height: 315px;
  }
}
#timeline .demo-card .body p {
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 15px;
}
#timeline .demo-card .body img {
  display: block;
  width: 100%;
}
#timeline .demo-card--step1 {
  background-color: #e69e55;
}
#timeline .demo-card--step1 .head::after {
  border-color: #e69e55;
}
#timeline .demo-card--step2 {
  background-color: #e69e55;
}
#timeline .demo-card--step2 .head::after {
  border-color: #e69e55;
}
#timeline .demo-card--step3 {
  background-color: #e69e55;
}
#timeline .demo-card--step3 .head::after {
  border-color: #e69e55;
}
#timeline .demo-card--step4 {
  background-color: #e69e55;
}
#timeline .demo-card--step4 .head::after {
  border-color: #e69e55;
}
#timeline .demo-card--step5 {
  background-color: #e69e55;
}
#timeline .demo-card--step5 .head::after {
  border-color: #e69e55;
}

#timeline .demo-card--step6 {
  background-color: #e69e55;
}

#timeline .demo-card--step6 .head::after {
  border-color: #e69e55;
}

.Banner {
	text-align: center;
	font-family: 'daydreamthin';
	color: #e69e55;
	-webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
	

}

.titletext {
	font-family: 'daydreamthin' , sans-serif;
	margin-top: -25%;
	margin-bottom: 15%;
	color: rgb(255, 144, 0);
	-webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: black;
	font-size: 400%;
	 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
	



.Subtitle1{
margin-top: -14%;
margin-bottom: 14%;
	 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

}

#slider {
  position: relative;
  width: 500px;
  height: 265px;
 
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  margin-left: 33%;
}

#slider ul {
  position: relative;
  list-style: none;
  height: 100%;
  width: 10000%;
  padding: 0;
  margin: 0;
  transition: all 750ms ease;
  left: 0;
}
#slider ul li {
  position: relative;
  height: 100%;
 
  float: left;
}
#slider ul li img{
  width: 500px;
  height: 265px;
}

#slider #prev, #slider #next {
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 150ms ease;
}


#slider #prev {
  left: 10px;
}
#slider #next {
  right: 10px;
}


#slider #prev:hover, #slider #next:hover {
  background-color: rgba(0, 0, 0, 0.5);
  text-shadow: 0;
}

img {
  width: 100%;
}

h1 {
  margin: 0.5rem 0;
}

/* container and cards */
.container {
	
position: relative;
	
width: 1000px;
	
height: 211px;
	
overflow: hidden;
	
cursor: grab;
	
/* border-top: 10px solid #f00; */
	
margin-bottom: 100px;
	
margin-top: 12px;
	
margin-left: 5%;
}

.cards {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(6, 300px);
  grid-gap: 50px;
  pointer-events: none;
  /* border-bottom: 10px solid #00f; */
  
}

.card {
  border: 1px solid #ff9000;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.1);
}

.card__content {
  color: #4e4e4e;
  padding: 1rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html{
  height: 100%;
}



img{
  display: block;
  width: 100%;
  height: auto;
  
}

.slider{
  position: absolute;
  height: 25%;
  width: 100%;
  cursor: grab;

margin-left: 60px;


  
  &.is-grabbing{
    cursor: grabbing;
  }
}

.slider__inner{
  position: absolute;
  top: 125%;
  left: 0;
  height: 10vh;
  pointer-events: none;
  

}

.slide{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;	
  top: 40%;
  transform: translateY(-50%);
  width: 60vh;
  height: 60vh;
  padding: 0;


}

.slide__bg{
  position: absolute;
  top: 10%;
  left: 10%;
  bottom: 10%;
  right: 10%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 35%;
  height: 35%;
  max-width: 35%;
  
}

.slide__title{
  position: relative;
  color: #fff;
  font-size: calc(1rem + 3vw);
  font-weight: normal;
  z-index: 2;
}

.text{
  position: absolute;
  color: #666;
  left: 4rem;
  bottom: 3rem;
}

.cursor-wrap{
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}

.cursor{
  position: fixed;
  top: -30px;
  left: -30px;
}

.noselect {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}


img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

.fa {
    padding: 20px;
    font-size: 30px;
    width: auto;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    margin-left: 10px;
    margin-top: 10px;
}



/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */


/* Twitter */
.fa-twitter {
  background: #e69e55;
  color: white;

  

}


.border{


}

.discordicon{
 background-image: url("https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/discord-512.png");	
  background-repeat: no-repeat;
  background-size: 60px 60px;

 color:white;
 height:60px;
 width:60px;
 

}
.stakingtexts{
width:75%

} 

.picture{
width:60%;
border-radius:20px;border:2px solid #ff9100;margin-top:25px


}

.footer{

}

.button{  
    position: absolute;
    right: 10%; 
    bottom: -15%;}

.button2   {
    position: absolute;  
        right: 20%; 
    bottom: -15%;}

.Home_grid__GxQ85{width:1280px}

.Home_services__q4ZQr 

.Home_servicesin__9PWtZ{
  background:linear-gradient(120.16deg,#a88848 23.46%,#fceeb2 38.86%,#ddb55b 51.42%,#feefb1 73.71%);
  border-radius:10px
  width:98%!important;border:1px solid #ddb55b
  }
.Home_services__q4ZQr 
.Home_servicesbg__UrG5K{background:radial-gradient(80.71% 105.45% at 50% 82.61%,rgba(71,53,15,.8) 0,rgba(0,0,0,.8) 100%);margin:0 3px 3px;border-radius:10px;padding:20px;border:1px solid #ddb55b;display:flex;flex-wrap:wrap;justify-content:space-between}.Home_forth__TwGyE,.Home_restserv__1hz1v,.Home_restservf__e3ybY,.Home_stakooor__1rYCS,.Home_third__ealIf{background:hsla(48,97%,85%,.17);border:2px solid hsl(34deg 100% 50%);box-sizing:border-box;border-radius:10px;display:flex;padding:10px 40px 30px;font-family:Kanit!important}
.Home_forth__TwGyE,.Home_restserv__1hz1v,.Home_restservf__e3ybY,.Home_third__ealIf{width:32.5%;display:flex;flex-direction:column;align-content:center;justify-content:flex-start;align-items:center;margin-top:20px}.Home_forth__TwGyE{width:24%}.Home_forth__TwGyE h3,.Home_third__ealIf h3{margin:0}.Home_forth__TwGyE p,.Home_third__ealIf p{text-align:center;margin-bottom:0!important;font-family:Kanit!important;color:#d6c49a;font-size:20px;line-height:25px}.Home_stakooor__1rYCS div{margin-right:40px}

.Home_stakooor__1rYCS div img{border-radius:20px;border:2px solid #ff9100;margin-top:25px}

.Home_restserv__1hz1v,.Home_restservf__e3ybY,.Home_stakooor__1rYCS div{color:#d3c08e;font-size:18px}.Home_forth__TwGyE h3,.Home_restserv__1hz1v h3,.Home_restservf__e3ybY h3,.Home_stakooor__1rYCS div h3{font-size:50px;color:#ff9100;margin:30px 0;-webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;}.Home_stakooor__1rYCS div p{margin-bottom:100px; color:#ff9100;  font-weight: bold;
}.Home_stakooor__1rYCS div a{background:linear-gradient(to right, #ff9100, #ffe7a9);box-shadow:0 0 2px #000;border-radius:5px;padding:12px 50px;color:#7c5d1e;font-weight:700;}.Home_stakooorsingle__BPfl3 .Home_servicesbg__UrG5K{background:#000}