
body > .website {
    max-width:  none;
    max-width:  1024px;
}

.website .acnh-home-island {
    display:  block;
    margin:  0 auto;
    border-radius:  6px;
    overflow:  hidden;
    text-align:  center;
    width:  auto;
    height:  0;
    padding-bottom:  calc((1 / 4) * 100%);
    position: relative;
    transition: padding-bottom 0.3s;
    transition-timing-function: linear;
}
.website .acnh-home-island:before,
.website .acnh-home-island > .wrapper {
    display:  block;
    position: absolute;
    top:  0;
    left:  0;
    right:  0;
    bottom:  0;
    width:  auto;
    height:  auto;
    border:  0 none transparent;
    background-color:  transparent;
    border-radius:  6px;
}
.website .acnh-home-island:before {
    content:  "";
    z-index: 1;
    background-color:  #dedede;
    background-color:  rgba(0, 0, 0, 0.05);
}
.website .acnh-home-island > .wrapper {
    z-index: 2;
}
.website .acnh-home-island .zone,
.website .acnh-home-island .background {
    display:  block;
    position:  absolute;
    z-index:  0;
    left:  0;
    right:  0;
    top:  0;
    bottom:  0;
    width:  auto;
    height:  auto;
}

.website .acnh-home-island .sprite {
    display:  block;
    position:  absolute;
    transform:  translate(0, 0);
    z-index:  1;
    left:  0;
    bottom:  0;
    right:  auto;
    top:  auto;
    width:  auto;
    height:  auto;
    transition:  width 1s, opacity 1s, transform 1s;
    border:  0 none transparent;
    background-color:  rgba(0, 0, 0, 0);
}
.website .acnh-home-island .sprite img {
    display:  block;
    width:  100%;
    height:  auto;
    position:  relative;
    transition:  none;
    z-index:  2;
    transition:  opacity 0.3s, transform 0.3s;
}
.website .acnh-home-island .sprite img.shadow {
    position:  absolute;
    z-index:  1;
    filter: brightness(0);
    transform: skewX(70deg) scaleY(0.2);
    opacity:  0.2;
    margin-top:  -150%;
}

.website .acnh-home-island .zone {
    z-index:  49;
    left:  0;
    bottom:  0;
    top:  auto;
    right:  auto;
    border:  1px dotted rgb(184 45 118);
    background-color:  rgb(184 45 118 / 15%);
}
.website .acnh-home-island .zone.v2 {
    background-color:  rgb(255 195 0 / 30%);
}


.website .acnh-home-island .zone.v2.sky {
    display:  none;
}

.website .acnh-home-island .background {
    z-index:  1;
}
.website .acnh-home-island .background.sky {
    z-index:  10;
    bottom:  76%;
    background-color:  #6fbcff;
    background-image: none;
    background-position:  0 0;
    background-size:  1000% 400%;
    filter: blur(1px);
    transition: background-position 3s;
    transition-timing-function: linear;

}
.website .acnh-home-island .background.sea {
    z-index:  20;
    top:  auto;
    height:  78%;
    background-color:  #3398bb;
    background-image: url(../images/island/Sea_NH_01.jpg);
    background-size: 100%;
    background-position: center center;
    filter:  drop-shadow(0 0px 3px rgba(0, 0, 0, 0.3));
    transition: filter 10s, background-size 10s;
    transition-timing-function: linear;
}
.website .acnh-home-island .background.beach {
    z-index:  30;
    top:  auto;
    bottom: 14%;
    left: 5%;
    right: 5%;
    height: 60%;
    border-radius: 50%;
    background-repeat:  no-repeat;
    background-size:  100% 100%;
    background-color:  transparent;
    filter:  drop-shadow(0 0 15px white);
    transition:  filter 5s;
}
.website .acnh-home-island .background.sea[data-tide="low"] + .background.beach {
    filter:  drop-shadow(0 0 30px rgba(255, 255, 255, 0.7));
}
.website .acnh-home-island .background.sea[data-tide="mid"] + .background.beach {
    filter:  drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}
.website .acnh-home-island .background.sea[data-tide="high"] + .background.beach {
    filter:  drop-shadow(0 0 10px rgba(255, 255, 255, 0.9));
}
.website .acnh-home-island .background.land {
    z-index:  40;
    top:  auto;
    bottom: 22%;
    left: 10%;
    right: 25%;
    height: 48%;
    border-radius: 50%;
    background-repeat:  no-repeat;
    background-size:  100% 100%;
    background-color:  transparent;
}

.website .acnh-home-island .sprite {
    z-index:  9000;
}

.website .acnh-home-island .sprite.plant  {

}
.website .acnh-home-island .sprite.plant.tree  {
    width:  8%;
    max-width:  329px;
}
.website .acnh-home-island .sprite.plant.flower  {

}
.website .acnh-home-island .sprite.plant.shrub  {

}
.website .acnh-home-island .sprite.plant img {
    transform-origin: bottom center;
    transition-timing-function: ease-in-out;
    position:  absolute;
    bottom:  0;
}

.website .acnh-home-island .sprite.plant.windy  {

}
.website .acnh-home-island .sprite.plant.windy img {
    transform:  skew(1deg, 0);
}

.website .acnh-home-island .sprite.critter  {
    width:  5%;
    max-width:  128px;
}
.website .acnh-home-island .sprite.critter.fish  {
    overflow:  hidden;
}
.website .acnh-home-island .sprite.critter img {
    filter:  drop-shadow(-2px 0 0 rgba(0, 0, 0, 0.3));
}



.website .acnh-home-island .sprite.critter.bug {
    transition-timing-function: linear;
}
.website .acnh-home-island .sprite.critter.bug[data-flags*="\"isFlutterLike\":true"] {
    transition-timing-function: ease-in-out;
}

.website .acnh-home-island .sprite.building  {
    width:  12%;
    max-width:  200px;
}
.website .acnh-home-island .sprite.building.restaurant {

}

.website .acnh-home-island-buttons {
    font-size:  80%;
    margin:  0 auto 10px;
}
.website .acnh-home-island-buttons .button,
.website .acnh-home-island-buttons .button-group {
    display:  inline-block;
    margin:  10px 5px 0;
    padding:  6px 12px;
    border-radius:  6px;
    background-color:  #464646;
    color:  #ffffff;
    font-size:  100%;
    line-height:  1;
    text-decoration: none;
}
.website .acnh-home-island-buttons .button-group {
    background-color:  #e0e0e0;
    color:  #696969;
}
.website .acnh-home-island-buttons .button {
    cursor:  pointer;
    transition:  background-color 0.3s;
}
.website .acnh-home-island-buttons .button:hover {
    background-color:  #565656;
    color:  #ffffff;
}
.website .acnh-home-island-buttons .button > span,
.website .acnh-home-island-buttons .button-group > label {
    display:  inline-block;
    vertical-align: middle;
    padding:  3px 6px;
}
.website .acnh-home-island-buttons .button-group > label:first-child {
    margin-right:  10px;
}
.website .acnh-home-island-buttons .button-group .button {
    margin:  0 5px 0 0;
    padding:  3px 6px;
    font-size:  80%;
    background-color:  #a3a3a3;
    color:  #f2f2f2;
    border-radius:  3px;
}
.website .acnh-home-island-buttons .button-group .button:hover,
.website .acnh-home-island-buttons .button-group .button.active {
    background-color:  #464646;
    color:  #ffffff;
}
.website .acnh-home-island-buttons .button-group .button > span {
    padding:  0;
}

.website .acnh-home-island .wrapper[data-debug*="show-sprites"] .sprite {
    border-left:  1px solid rgba(255, 0, 0, 0.2);
    border-bottom:  1px solid rgba(255, 0, 0, 0.2);
}
.website .acnh-home-island .wrapper[data-debug*="show-sprites"] .sprite:before,
.website .acnh-home-island .wrapper[data-debug*="show-sprites"] .sprite:after {
    content: "";
    display: block;
    position: absolute;
    z-index:  9999;
    background-color: red;
}
.website .acnh-home-island .wrapper[data-debug*="show-sprites"] .sprite:before {
    left:  0;
    top: 50%;
    width:  100%;
    height:  1px;
    transform:  translate(0, -50%);
}
.website .acnh-home-island .wrapper[data-debug*="show-sprites"] .sprite:after {
    top:  0;
    left: 50%;
    height:  100%;
    width:  1px;
    transform:  translate(-50%, 0);
}



.website .acnh-home-island:not(.loaded),
.website .acnh-home-island:not(.loaded) *,
.website .acnh-home-island:not(.loaded) .sprite,
.website .acnh-home-island:not(.loaded) .sprite img {
    transition:  none !important;
}

.website .acnh-home-island.no-transitions,
.website .acnh-home-island.no-transitions *,
.website .acnh-home-island.no-transitions .sprite,
.website .acnh-home-island.no-transitions .sprite img {
    transition:  none !important;
}


/*
.website .acnh-home-island,
.website .acnh-home-island *,
.website .acnh-home-island .sprite,
.website .acnh-home-island .sprite img {
    transition:  none !important;
}
*/
