rotybase.css

@font-face {
  font-family: 'Taman Kanak-Kanak';
  src: url('font/Font-Tali-Pusar.otf') format('opentype');
        url('font/Font-Tali-Pusar.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* {
  font-family: 'Taman Kanak-Kanak';
  margin: 0;
  padding: 0;
  touch-action: manipulation;
}

body {
  background-color: #0052ff;
}


ul {
  display: block;
  list-style-type: disc;
  padding-inline-start: 20px;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bigText {
  font-size: 28px;
  color: white;
}

.bigText-style {
  width: 100%;
  text-align: center;
}

.mediumText {
  font-size: 23px;
  color: yellow;
}

.regularText {
  font-size: 18px;
  color: white;
}

#regularText-style {
  width: 100%;
  text-align: center;
  height: 50px;
  line-height: 50px;
  position: relative;
}

#regularText-footer {
  text-align: center;
  font-size: 18px;
}

.bigStretch {
  width: 100%;
  left: 0px;
  position: relative;
}

#bigStretch-imgDisplay {
  height: 100%;
}

.innerStetchHalf {
  width: calc(60% - 30px);
  height: calc(100% - 40px);
  position: relative;
  margin-left: 20px;
  top: 20px;
  display: inline-block;
}

.innerOtherHalf {
  width: calc(40% - 30px);
  height: calc(100% - 40px);
  position: relative;
  margin-left: 20px;
  top: 20px;
  display: inline-block;
}

.innerStetch {
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  position: relative;
  margin-left: 20px;
  top: 20px;
}

@media only screen and (min-width: 1200px) {
  .bigStretch {
    width: 1200px;
    margin-left: calc(50% - 600px);
    position: relative;
  }
}

#mobile-div {
  height: 300px;
}

#logo1 {
  top: 20px;
  height: 140px;
  width: 280px;
  left: calc(50% - 140px);
  position: absolute;
  object-fit: contain;
}

#logo2 {
  top: 20px;
  height: 140px;
  width: 280px;
  left: 20px;
  position: absolute;
  object-fit: contain;
}

#social-pool {
  top: 180px;
  left: 20px;
  width: calc(100% - 40px);
  text-align: center;
  position: absolute;
  color: white;
}

#social-button {
  top: 220px;
  left: calc(50% - 150px);
  width: 300px;
  position: absolute;
}

#discord1 {
  top: 20px;
  right: 20px;
  height: 60px;
  width: 280px;
  position: absolute;
  line-height: 60px;
  border: 2px solid white;
  color: white;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
}

#discord2,
#discord3 {
  top: 0px;
  left: 0px;
  height: 60px;
  width: 140px;
  position: absolute;
  line-height: 60px;
  border: 2px solid white;
  color: white;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

#discord1-button,
#discord2-button,
#discord3-button,
#twitter1-button,
#twitter2-button,
#twitter3-button {
  width: 60px;
  height: 60px;
  background-color: yellow;
  position: absolute;
}

#discord1-img,
#discord2-img,
#discord3-img,
#twitter1-img,
#twitter2-img,
#twitter3-img {
  object-fit: contain;
  width: 40px;
  height: 40px;
  top: 10px;
  left: 10px;
  position: absolute;
}

#discord1-text,
#discord2-text,
#discord3-text,
#twitter1-text,
#twitter2-text,
#twitter3-text {
  top: 0px;
  right: 0px;
  height: 60px;
  width: calc(100% - 60px);
  position: absolute;
  font-size: 18px;
  cursor: pointer;
  object-fit: contain;
  background-color: black;
}

#twitter1 {
  top: 100px;
  right: 20px;
  height: 60px;
  width: 280px;
  position: absolute;
  line-height: 60px;
  border: 2px solid white;
  color: white;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
}

#twitter2,
#twitter3 {
  top: 0px;
  right: 0px;
  height: 60px;
  width: 140px;
  position: absolute;
  line-height: 60px;
  border: 2px solid white;
  color: white;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

#opensea-buy,
#opensea-sell {
  width: 290px;
  height: 60px;
  border-radius: 10px;
  /* border: 2px solid #00b7ff; */
  border: 2px solid mintcream;
  overflow: hidden;
  position: relative;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  /* color: #00b7ff; */
  color:mintcream;
  margin-left: calc(50% - 145px);
  /* background-color: rgba(0, 183, 255, 0.2); */
  background-color: black;
  font-family: 'Taman Kanak-Kanak';
}

#previewImg1,
#previewImg2,
#previewImg3,
#previewImg4 {
  width: 100%;
}

#prevImg-arrow1 {
  width: 50px;
  height: 30px;
  left: 10px;
  top: 10px;
  position: absolute;
  cursor: pointer;
  object-fit: contain;
}

#prevImg-arrow2 {
  width: 50px;
  height: 30px;
  right: 10px;
  top: 10px;
  position: absolute;
  cursor: pointer;
  object-fit: contain;
}

#previewable-img1 {
  width: calc(50% - 5px);
  display: inline-block;
}

#previewable-img2 {
  width: calc(50% - 5px);
  display: inline-block;
  margin-left: 10px;
}

#previewable-img3 {
  width: calc(50% - 5px);
  display: inline-block;
  margin-top: 5px;
}

#previewable-img4 {
  width: calc(50% - 5px);
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
}

#desktop-div {
  height: 180px;
}

#innerOtherHalf-style {
  height: 100%x;
}

#text-preview {
  width: 100%;
  text-align: center;
  height: 50px;
  position: relative;
}

#minting-img {
  width: 100%;
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 20%;
  left: 0%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.ndrenges .image {
  margin-top: -147px;
  margin-bottom: -197px;
  -webkit-transform: rotate(0deg) scale(.7);
	transform: rotate(0deg) scale(.7);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.ndrenges:hover .image {
  margin-top: -17px;
  margin-bottom: -27px;
  margin-left: -57px;
	-webkit-transform: rotate(14.7deg) scale(1);
	transform: rotate(14.7deg) scale(1);
  opacity: 1;
}

.ndrenges:hover .middle {
  opacity: 1;
}

#melting-img {
  width: 100%;
}

#sneakpeaks1 {
  width: calc(25% - 7.5px);
  display: inline-block;
}

#sneakpeaks2 {
  width: calc(25% - 7.5px);
  display: inline-block;
  margin-left: 10px;
}

#sneakpeaks3 {
  width: calc(25% - 7.5px);
  display: inline-block;
  margin-top: 5px;
}

#sneakpeaks4 {
  width: calc(25% - 7.5px);
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
}

#teammate1 {
  width: calc(50% - 7.5px);
  display: inline-block;
}

#teammate2 {
  width: calc(50% - 7.5px);
  display: inline-block;
  margin-left: 10px;
}

#teammate3 {
  width: calc(50% - 7.5px);
  display: inline-block;
  margin-top: 5px;
}

#teammate4 {
  width: calc(50% - 7.5px);
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
}

#logo-footer {
  top: 20px;
  height: 200px;
  width: 280px;
  margin-left: calc(50% - 140px);
  object-fit: cover;
  object-fit: contain;
}

#parlay-footer {
  margin-left: calc(50% - 150px);
  width: 300px;
  position: relative;
  height: 60px;
}

#imgDisplay {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  background-color: rgba(0,0,0,0.85);
  display: none;
}

#imgDisplay-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

#imgDisplay-div {
  width: calc(100% - 20px);
  max-width: 500px;
  height: 50px;
  position: relative;
  cursor: pointer;
}

#imgDisplay-img {
  left: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  position: absolute;
}

#imgDisplay-text {
  left: 50px;
  top: 10px;
  line-height: 30px;
  position: absolute;
  color: white;
  text-align: left;
}

#innerImg {
  max-width: 500px;
  width: 100%;
}

#innerText {
  width: calc(100% - 20px);
  max-width: 480px;
  margin-top: 10px;
  color: white;
  text-align: left;
}

.chaos-button {
  width: 290px;
  height: 60px;
  border-radius: 10px;
  /* border: 2px solid #00b7ff; */
  border: 2px solid mintcream;
  overflow: hidden;
  position: relative;
  line-height: 60px;
  text-align: center;
  cursor: pointer;
  /* color: #00b7ff; */
  color:mintcream;
  /* margin-left: calc(50% - 145px); */
  /* background-color: rgba(0, 183, 255, 0.2); */
  background-color: black;
  font-family: 'Taman Kanak-Kanak';
}

#panicroom {
  max-width: 100%;
  background-image: url(img/the-melting-land-00.gif);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: contain;
}

#myImg {
  width: 200px;
  height: 400px;
  object-fit: cover;
  object-position: 0% 0%;
  animation: mymove 5s infinite;
}  

@keyframes mymove {
  0% {
    object-position: 0% 0%;
  }
  25% {
    object-position: 20% 0%;
  }
  100% {
    object-position: 100% 100%;
  }
}

.strikeT {
  text-decoration: line-through;
}

/** for copyleft symbol **/
.copy-left {
  display: inline-block;
  text-align: right;
  margin: 0;
  font-size: 1em;
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: FlipH;
}