/* -   Code maintained by:  Michael "Saint" Griffith 
   -         Last updated:  April 23rd, 2024
   - Designed specifally for Waccoon World's Splash Page
*/
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400&display=swap');

/* CSS RESET START */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, menu, nav, section, time {
  display: block;
}

body {
  line-height: 1;
  color: black;
  background: white;
  zoom: reset;
}

a {
  color: inherit;
  text-decoration: none;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* CSS RESET END */

textarea:focus, input:focus {
  outline: 0;
}

input {
  border-width: 0;
}

em {
  font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
}

.group:before,
.group:after {
  content: " ";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1; /* ie 6/7 */
}

embed,
img,
object,
video {
  max-width: 100%;
}
sup {
  font-size: 58.3%;
  vertical-align: text-top;
}
sub {
  font-size: 58.3%;
  vertical-align: text-bottom;
}
.no-space-between-inline-blocks {
  *letter-spacing: normal; /*reset IE < 8*/
  letter-spacing: -0.31em; /*webkit*/
  word-spacing: -0.43em; /*IE < 8 && gecko*/
}
/*restore spacing on inner elements*/
.no-space-between-inline-blocks > * {
  letter-spacing: normal;
  word-spacing: normal;
}
.displace {
  left: -5000px;
  position: absolute;
}
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*,
*:after,
*:before {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}
body {
  color: #000000;
  font-size: 1em;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0;
  text-decoration: none;
  background-color: #000000;
}

@keyframes fadeInUp {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes floating {
  0% { transform: translate(0,  0em); }
  50%  { transform: translate(0, 1em); }
  100%   { transform: translate(0, 0em); } 
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.global_container_ {
  float: none;
  height: 100%;
  margin: 0 auto;
  min-height: 100%;
  position: absolute;
  width: 100%;
  background: url(images/background.png);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

/* <--- dznBySaint <3 ---> */
.dznBySaint{
  z-index: 999;
  position: absolute;
  opacity: 0.3; 
  transition: all 0.5s;
  bottom: 0.2em;
  left: 0.2em;
  font-family: 'Pixelify Sans', cursive;
  font-size: 0.75rem;
  color: #fff;
}
.dznBySaint:hover{
  opacity: 0.8;
}

/* <--- POP UPS ---> */
.popUp {
  display: none;
  position: fixed;
  padding: 20px;
  width: 32.5vw;
  left: 33.75vw;
  float: left;
  margin: 20% 0 0 0%;
  margin: 0vw;
  height: 35vh;
  top: 37.5vh;
  margin-top: -100px;
  background: #000000f0;
  z-index: 20;
  color: #fff;
  opacity: 0;
  animation: popUpfadeIn ease 1s;
  border-top-right-radius: 35px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 5px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  box-shadow: 0px 0px 8px #000000f0;
}
.comingsoonText {
  padding-top: 5%;
}
#btn {
  display: inline-block;
  margin-top: 7.5vh;
  background-color: #000000f0;
  border: 2px solid #cccccc00;
  color: white;
  padding: 1.5rem 6.25rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  -webkit-transition: border-color 0.3s ease;
  -moz-transition: border-color 0.3s ease;
  -o-transition: border-color 0.3s ease;
  -ms-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;  
}

#btn:hover {

  background-color: #000000ff;
  box-shadow: 0px 0px 8px #000000f0;
  border-color:#ccc;
}

#comingsoon {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  opacity: 1;
}

#survival {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  opacity: 1;
  height: 41.5vh;
}

#plotguild {
  -webkit-box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  opacity: 1;
  height: 38vh;
}

b#waccoon {
  font-weight: 800;
}

#serverIP {
  background-color: rgba(42, 42, 42, 0.645);
  border-radius: 10px;
  padding: 20px;
  max-width: 400px;
  border: 2px solid #ccccccf0;
}

#serverIP:hover {
  cursor:grab;
}

#custom-tooltip {
  display: none;
  margin-left: 40px;
  padding: 5px 12px;
  background-color: #000000df;
  border-radius: 4px;
  color: #fff;
}

i#italic {
  font-style: italic;
}
@keyframes popUpfadeIn{
  from {
    opacity: 0%;
    display: none;
  }
  to {
    opacity: 100%;
    display: block;
  }
}

@keyframes popUpfadeOut{
  from {
    opacity: 100%;
    display: block;
  }
  to {
    opacity: 0%;
    display: none;
  }
}


.discord-icon {
  position: fixed;
  bottom: 20px;
  left: 49vw;
  cursor: pointer;
  z-index: 1000;
  opacity: 0.6;
  transition: 0.4s ease;
}

.discord-icon:hover {
  opacity: 1;
  scale: 1.1;
}
/* <--- SECTORS ---> */
.sector {
  position: fixed;
  width: 50vw; /* 50% of viewport width */
  height: 50vh; /* 50% of viewport height */
  background-color: rgba(0, 0, 0, 0.5); /* Black overlay */
  z-index: 0; /* Behind other content */
}

.sector-topleft {
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for top left */
  transition: transform .2s;
}

.sector-topright {
  top: 0;
  right: 0;
  transition: transform .2s;
}

.sector-bottomleft {
  bottom: 0;
  left: 0;
  transition: transform .2s;
}

.sector-bottomright {
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Darker overlay for bottom right */
  transition: transform .2s;
}

.sector {
  position: fixed;
  width: 50vw; /* 50% of viewport width */
  height: 50vh; /* 50% of viewport height */
  z-index: 0; /* Behind other content */
  overflow: hidden; /* Ensure images within sectors don't overflow */

}

.text {
  left: 50vw;
  position: absolute;
  top: 1.8125em;
  width: 75.875em;
  margin-left: -36.375em;
}

/* <--- LOGO & COLUMNS ---> */
.col {
  float: left;
  margin: 1.25em 0 0;
  position: relative;
  width: 25.375em;
  animation: 1.5s fadeInUp;
}

.col-2 {
  float: left;
  margin: 0 0 0 1.625em;
  position: relative;
  width: 25.1875em;
  animation: 1.5s fadeInUp;
}

.logo {
  float: left;
  margin: 27.5vh 0 0 1vw;
  -webkit-mask-image: linear-gradient(45deg,#fff 25%,rgba(0,0,0,.4) 50%,#fff 75%);
  mask-image: linear-gradient(45deg,#fff 25%,rgba(0,0,0,.4) 50%,#fff 75%);
  -webkit-mask-size: 500%;
  mask-size: 500%;
  -webkit-mask-position: 0;
  mask-position: 0;
  animation-name: fadeInUp, floating;
  animation-duration: 1000ms, 3000ms;
  animation-delay: 00ms, 1003ms;
  animation-timing-function: ease-in, ease-out;
  animation-iteration-count: 1, infinite;
  width: 20.125em;
  height: 20.625em;
}

.logo:hover {
  transition: mask-position 1.25s ease,-webkit-mask-position 1.25s ease;
  -webkit-mask-position: 130%;
  mask-position: 130%;
  opacity: 1;
}

/* <--- SECTOR 1 ---> */
.sector-1 {
  position: relative;
  transition: all .2s;
  opacity: 0.7;
  left: -3.125em;
}
.sector-1:hover { transform: scale(1.1); opacity: 1.0; }
.sector-1-plank {
  margin: -8.75em 0 0;
  padding: 2.375em 3.375em 3.125em;
  position: relative;
  width: 25.375em;
  background: url(images/sector_1_plank.png) no-repeat;
}
.survival {
  display: block;
  left: 0.28125em;
  margin: 0 auto;
  position: relative;
}

.survival-hover {
  display: block;
  margin: 0 0 0 0.3125em;
  position: relative;
}

/* <--- SECTOR 2 ---> */
.sector-2 {
  margin: 0 auto;
  position: relative;
  width: 23em;
  transition: all .2s;
  right: -2.5em;
  opacity: 0.7;
}
.sector-2:hover { transform: scale(1.1); opacity: 1.0; }
.plot-guild-hover {
  display: block;
  left: 1.40625em;
  margin: 0 auto;
  position: relative;
}
.sector-2-plank {
  margin: -6.5625em 0 0;
  padding: 3.4375em 2.0625em 3.875em;
  position: relative;
  width: 23em;
  background: url(images/sector_2_plank.png) no-repeat;
}
.plot-guild {
  display: block;
  margin: 0 auto;
  position: relative;
  right: 2.5px;
}

/* <--- SECTOR 3 ---> */
.sector-3 {
  left: -25px;
  margin: 130px auto 0;
  position: relative;
  width: 364px;
  transition: all .2s;
  opacity: 0.7;
}
.sector-3:hover { transform: scale(1.1); opacity: 1.0; }
.sector-3-plank {
  margin: -72px 0 0;
  padding: 49px 15px 61px;
  position: relative;
  width: 364px;
  background: url(images/sector_3_plank.png) no-repeat;
}
.coming-soon-hover {
  display: block;
  margin: 0 auto;
  position: relative;
  right: 7px;
}
.coming-soon-copy {
  display: block;
  left: 5px;
  margin: 0 auto;
  position: relative;
}

/* <--- SECTOR 4 ---> */
.sector-4 {
  margin: 138px auto 0;
  position: relative;
  transition: all .2s;
  opacity: 0.7;
}
.sector-4:hover { transform: scale(1.1); opacity: 1.0; }
.coming-soon-hover {
  display: block;
  left: 17px;
  margin: 0 auto;
  position: relative;
}
.sector-4-plank {
  margin: -38px 0 0;
  padding: 39px 27px;
  position: relative;
  width: 403px;
  background: url(images/sector_4_plank.png) no-repeat;
}
.coming-soon {
  display: block;
  margin: 0 auto;
  position: relative;
  right: 2.5px;
}

/* For tablets */
@media screen and (max-width: 768px) {
  /* Your tablet specific CSS here */
}

/* For mobile devices */
@media screen and (max-width: 480px) {
  .global_container_ {
    float: none;
    height: auto;
    margin: 0 auto;
    min-height: 100%;
    position: absolute;
    width: 100%;
    background: url(images/background.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
         -moz-animation: fadein 1s; /* Firefox < 16 */
          -ms-animation: fadein 1s; /* Internet Explorer */
           -o-animation: fadein 1s; /* Opera < 12.1 */
              animation: fadein 1s;
  }
  .col {
    float: left;
    margin: 50% 0 0;
    position: relative;
    width: 50%;
    animation: 1.5s fadeInUp;
  }
  
  .col-2 {
    float: left;
    margin: 0 0 0 50%;
    position: relative;
    width: 50%;
    animation: 1.5s fadeInUp;
  }
  
  .logo {
    float: left;
    margin: 22.5% 0 0 -12.5%;
    -webkit-mask-image: linear-gradient(45deg,#fff 25%,rgba(0,0,0,.4) 50%,#fff 75%);
    mask-image: linear-gradient(45deg,#fff 25%,rgba(0,0,0,.4) 50%,#fff 75%);
    -webkit-mask-size: 500%;
    mask-size: 500%;
    -webkit-mask-position: 0;
    mask-position: 0;
    animation-name: fadeInUp, floating;
    animation-duration: 1000ms, 3000ms;
    animation-delay: 00ms, 1003ms;
    animation-timing-function: ease-in, ease-out;
    animation-iteration-count: 1, infinite;
    width: 20%;
    height: 20%;
  }
  
  .logo:hover {
    transition: mask-position 1.25s ease,-webkit-mask-position 1.25s ease;
    -webkit-mask-position: 130%;
    mask-position: 130%;
    opacity: 1;
  }
  
  /* <--- SECTOR 1 ---> */
  .sector-1 {
    position: relative;
    transition: all .2s;
    opacity: 0.7;
    left: -3.125em;
  }
  .sector-1:hover { transform: scale(1.1); opacity: 1.0; }
  .sector-1-plank {
    margin: -8.75em 0 0;
    padding: 2.375em 3.375em 3.125em;
    position: relative;
    width: 25.375em;
    background: url(images/sector_1_plank.png) no-repeat;
  }
  .survival {
    display: block;
    left: 0.28125em;
    margin: 0 auto;
    position: relative;
  }
  
  .survival-hover {
    display: block;
    margin: 0 0 0 0.3125em;
    position: relative;
  }
  
  /* <--- SECTOR 2 ---> */
  .sector-2 {
    margin: 0 auto;
    position: relative;
    width: 23em;
    transition: all .2s;
    right: -2.5em;
    opacity: 0.7;
  }
  .sector-2:hover { transform: scale(1.1); opacity: 1.0; }
  .plot-guild-hover {
    display: block;
    left: 1.40625em;
    margin: 0 auto;
    position: relative;
  }
  .sector-2-plank {
    margin: -6.5625em 0 0;
    padding: 3.4375em 2.0625em 3.875em;
    position: relative;
    width: 23em;
    background: url(images/sector_2_plank.png) no-repeat;
  }
  .plot-guild {
    display: block;
    margin: 0 auto;
    position: relative;
    right: 2.5px;
  }
  
  /* <--- SECTOR 3 ---> */
  .sector-3 {
    left: -25px;
    margin: 130px auto 0;
    position: relative;
    width: 364px;
    transition: all .2s;
    opacity: 0.7;
  }
  .sector-3:hover { transform: scale(1.1); opacity: 1.0; }
  .sector-3-plank {
    margin: -72px 0 0;
    padding: 49px 15px 61px;
    position: relative;
    width: 364px;
    background: url(images/sector_3_plank.png) no-repeat;
  }
  .coming-soon-hover {
    display: block;
    margin: 0 auto;
    position: relative;
    right: 7px;
  }
  .coming-soon-copy {
    display: block;
    left: 5px;
    margin: 0 auto;
    position: relative;
  }
  
  /* <--- SECTOR 4 ---> */
  .sector-4 {
    margin: 138px auto 0;
    position: relative;
    transition: all .2s;
    opacity: 0.7;
  }
  .sector-4:hover { transform: scale(1.1); opacity: 1.0; }
  .coming-soon-hover {
    display: block;
    left: 17px;
    margin: 0 auto;
    position: relative;
  }
  .sector-4-plank {
    margin: -38px 0 0;
    padding: 39px 27px;
    position: relative;
    width: 403px;
    background: url(images/sector_4_plank.png) no-repeat;
  }
  .coming-soon {
    display: block;
    margin: 0 auto;
    position: relative;
    right: 2.5px;
  }
}