.hidden-window {
    display: none;
}

body { 
    background: #1b676d;
    background: url('./img/Avatar-BG-Web3.jpg');
    background-position: 50% 50%;
    background-size: contain;
    font-family: 'Lato', sans-serif;
    color: #474770;
    margin: 0;
    padding: 0 0 80px;
}

body::before {
    width: 100%;
    height: 100%;
    content: '';
    background: linear-gradient(90deg, #1b676d00, #1b676d, #1b676d00);
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: -2;
}

body::after {
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    content: '';
    background: linear-gradient(0deg, #0006, #0000 );
    position: fixed;
    z-index: -1;
}

body i:hover {
    cursor: pointer;
    
}

.intro-header {
    text-align: center;
    color: #fff;
    font-family: 'Indie Flower', cursive !important;
    margin: 0 0 20px 0;
    font-weight: normal;
    font-size: 32px;
    padding-top: 32px;
    text-shadow: #0008 0px 2px 5px;
}

#main {
    background: #fff;
    margin: 0 auto;
    width: 1000px;
    padding: 24px;
    display: flex;
    border-radius: 10px;
    align-items: flex-start;
    position: relative;
    box-shadow: #0009 0 0 60px;
}

#loading {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background: #1b676d;
    opacity: 1;
    transition: opacity 1s;
    z-index: 999999;
    color: #fff;
    font-size: 1.5em;
}

#loading img {
    max-width: 50px;
    opacity: .5;
    display: block;
}

.col {
    width: 50%;
    padding: 24px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.col.options-col {
    position: relative;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 32px;
}

#color-selector {
    display: none; 
    background: #000e;
    padding: 24px;
    position: absolute;
    justify-content: center;
    top: 0;
    border-radius: 24px;
    flex-wrap: wrap;
    box-shadow: 0 0 12px #0003;
    z-index: 1000;
    max-width: 80%;
}

#option-selector {
    display: none; 
    background: #edf6f5;
    padding: 24px;
    position: absolute;
    justify-content: space-evenly;
    top: 0;
    border-radius: 24px;
    flex-wrap: wrap;
    box-shadow: 0 0 12px #0003;
    z-index: 1000;
    max-width: 90%;
    max-height: 100%;
}

.options .option {
    width: 100px;
    height: 100px;
    margin: 6px;
    border-radius: 6px;
    box-shadow: #0003 0 5px 5px;
    background-color: #fff;
    outline: solid 1px #0e7dc266;
}

.options .option:hover {
    background-color: #0001;
}

#color-selector.skintones {
    width: 50%;
}

#color-selector.hairtones {
    width: 80%;
}

#color-selector.accessories {
    width: 115%;
}

#option-selector {
    width: 100%;
}

#option-selector img {
    width: 96px;
    padding: 2px;
    border-radius: 6px;
    background: #fff;
}

#option-selector img:hover {
    background: #eee;
}

#option-selector .options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 500px;
    overflow-y: auto;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  #option-selector .options {
    /* scrollbar-width: thin; */
    scrollbar-color: #1b7ec0 #0002;
  }

  /* Chrome, Edge, and Safari */
  #option-selector .options::-webkit-scrollbar {
    width: 10px;
  }

  #option-selector .options::-webkit-scrollbar-track {
    background: #0000;
  }

  #option-selector .options::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 10px;
    border: 0px solid #fff;
  }

#color-selector i, #option-selector i {
    margin: 5px;
    color: rgb(227, 25, 26);
    font-size: 32px;
}

i.color-selector-option:hover {
    text-shadow: 0 0 5px #fff;
}


i.selector-exit {
    font-size: 18px !important;
    position: absolute;
    margin: 0;
    top: 4px;
    right: 4px;

}

#avatar-container {
    background: #c1f0ee;
    /* background-image: linear-gradient( 174.2deg,  #c1f0ee 7.1%, #badddb, 67.4% ); */
    position: relative;
    width: 500px;
    height: 500px;
    outline: solid 1px #c1f0ee;
    border-radius: 10px;
    overflow: hidden;
}

#avatar-container object, #avatar-container svg {
    position: absolute;
    opacity: 1;
    transition: opacity 500ms;
    top: 0;
}

#avatar-container svg {
    width: 100%;
    height: 100%;

}

#avatar-container object.hidden {
    opacity: 0;
    transition: opacity 500ms;
}


.btn {
    margin-top: 24px;
    background: #1b7ec0;
    color: #fff;
    font-size: 1.25em;
    padding: 12px 24px;
    border-radius: 30px;
    border: #0e7dc2 solid 1px;
    min-width: 120px;
    margin: 12px 5px 0 ;
}

.btn:hover {
    cursor: pointer;
    background: #439bd6;
}

.option-name {
    min-width: 150px;
    text-align: center;
    position: relative;
}

.option-control {
    width: 100%;
    display: flex;
    margin: 0 0 40px 0;
    font-size: 1.3rem;
}

label {
    display: inline-block;
}


.option-color {
    margin-left: 24px;
    text-shadow: 0 0 1px black;
    color: white;
    
}

.col-1, .col-2, .col-3 {
    display: inline-block;
    text-align: center;
}

.col-1 {
    width: 250px;
    text-align: center;
    position: relative;
}

.col-2, .col-3 {
    width: 80px;
}

.option-control sub {
    display: block;
    position: absolute;
    margin-top: 4px;
    font-size: .8rem;
    width: 180px;
    text-align: center;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.nose-object, .nose-rendered {
    z-index: 999;
}

.mouth-object, .mouth-rendered {
    z-index: 997;
}
.hair-object, .hair-rendered {
    z-index: 998;
}
.eyes-object, .eyes-rendered {
    z-index: 996;
}

.head-object, .head-rendered {
    z-index: 995;
}

.outfit-object {
    z-index: 994;
}

.hairback-object {
    z-index: 993;
}

.background-object {
    z-index: 992;
}

#output {
    width: 500px;
    height: 500px;
    background: #0001;
    position: absolute;
    background: #c1f0ee;
    border-radius: 4px;
}

#output svg {
    position: absolute;
    top: 0;
    width: 100% !important;
    height: 100% !important;
}

#output svg g {
    width: 500px;
    height: 500px;
}

#end-screen {
    position: absolute;
    background: #fff;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: inherit;
    text-align: center;
    z-index: 1000;
}

#end-screen img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    margin: 24px;
    box-shadow: #3332 0 4px 8px;
}

.btn-mobile {
    display: none;
}

.color-check {
    animation-name: color-check;
    animation-duration: 200ms;
}

@keyframes color-check {
    0% {background: none;}
    100%{background: none;}
}


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

    p{
        padding: 16px;
    }


    .btn-desktop {
        display: none;
    }

    .btn-mobile {
        display: unset;
    }

    .mobile-btns {
        margin-bottom: 32px;
    }
    
    #main {
        flex-wrap: wrap;
        width: 500px;
        padding: 0;
    }

    .col {
        width: 100%;
        padding: 0;
    }

    .col.options-col {
        margin-top: 24px;
    }

    .option-control {
        width: 50%;
        margin-bottom: 32px;
    }

    #avatar-container {
        outline: none;
        border-radius: 10px 10px 0 0;
    }

    #option-selector {
        max-width: 90%;
        
    }

}

@media screen and (max-width: 501px) {
    body {
       padding: 0px;
       background: #1b676d;
   }

   .option-control {
    width: 90%;
}

.intro-header {
    margin-top: 20px;
}

 #main {
    width: 100vw;
 }


 #avatar-container {
    height: 100vw;
    border-radius: unset;
 }

 #main {
    border-radius: unset;
 }

 #option-selector {
    padding: 24px 0;
 }

 #option-selector .options{
    height: 400px;
 }

 .options .option {
    width: 80px;
    height: 80px;
}

 #end-screen img {
    margin: 24px 0 0 0;
    max-width: 95vw;
    height: auto;
 }

}

 /* ICON TWEAKS */
.option.hair {
    background-size: 200%;
    background-position: 50% 5%;
}

.option.eyes {
    background-size: 250%;
    background-position: 50% 30%;
}

.option.mouth {
    background-size: 450%;
    background-position: 50% 50%;
}

.option.nose {
    background-size: 500%;
    background-position: 50% 38%;
}

.option.hair.hair-0 {
    background-size: 150%;
    background-position: 50% 10%;

 }

.option.hair.hair-0 {
order:0;
 }

 .option.hair.hair-1 {
    order:40;
 }

 .option.hair.hair-2 {
order:39;
}
.option.hair.hair-3 {
    order:38;

}
.option.hair.hair-4 {
    order:37;

}
.option.hair.hair-5 {
    order:36;

}
.option.hair.hair-6 {
    order:35;

}
.option.hair.hair-7 {
    order:31;

}
.option.hair.hair-8 {
    background-position: 50% 0%;
order:32;

 }

.option.hair.hair-9 {
    order:33;

}
.option.hair.hair-10 {
    order:34;

}
.option.hair.hair-11 {
    order:29;

}

 .option.hair.hair-12 {
    background-position: 55% 20%;
order:30;

 }

 .option.hair.hair-13 {
    background-position: 50% 20%;
order:21;

 }

 .option.hair.hair-14 {
    background-position: 50% 0%;
order:22;

 }

 .option.hair.hair-15 {
    background-size: 150%;
    background-position: 50% -10%;
order:23;

 }

 .option.hair.hair-16 {
    background-size: 150%;
    background-position: 50% 0%;
order:24;

 }

 .option.hair.hair-17 {
    background-size: 160%;
    background-position: 50% 10%;
order:25;

 }

 .option.hair.hair-18 {
    background-size: 160%;
    background-position: 50% 10%;
order:26;

 }

 .option.hair.hair-19 {
    background-size: 160%;
    background-position: 50% 10%;
order:27;

 }

 .option.hair.hair-20 {
    background-size: 160%;
    background-position: 50% 10%;
order:28;

 }

 .option.hair.hair-21 {
    background-size: 160%;
    background-position: 50% 10%;
order:28;

 }

.option.hair.hair-22 {
    background-size: 150%;
    background-position: 50% 20%;
order:12;

 }

 .option.hair.hair-23 {
    background-size: 150%;
    background-position: 50% 10%;
order:7;

 }

 .option.hair.hair-24 {
    background-size: 150%;
    background-position: 50% 10%;
    order:1;
 }

 .option.hair.hair-25 {
    background-size: 130%;
    background-position: 50% 30%;
    order:2;
 }

 .option.hair.hair-26 {
    background-size: 160%;
    background-position: 50% 20%;
    order:3;
    display: none;
 }

 .option.hair.hair-27 {
    background-size: 110%;
    background-position: 50% 0%;
    order:4;
 }

 .option.hair.hair-28 {
    background-size: 110%;
    background-position: 50% 0%;
    order:5;
 }

 .option.hair.hair-29 {
    background-size: 120%;
    background-position: 50% 35%;
    order:6;
 }

 .option.hair.hair-30 {
    background-size: 150%;
    background-position: 50% 15%;
    order:7;
    display: none;
 }

 .option.hair.hair-31 {
    background-size: 120%;
    background-position: 50% 35%;
    order:9;
 }

 .option.hair.hair-32 {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 2px 8px;
    order:10;
 }

 .option.hair.hair-33 {
    background-size: 130%;
    background-position: 50% -20%;
    order:11;
 }

 .option.hair.hair-34 {
    background-size: 100%;
    background-position: 50% 35%;
    order:19;
 }

 .option.hair.hair-35 {
    background-size: 140%;
    background-position: 50% -20%;
    order:17;
 }

 .option.hair.hair-36 {
    background-size: 170%;
    background-position: 50% -20%;
    order:18;
 }

 .option.hair.hair-37 {
    background-size: 170%;
    background-position: 50% 10%;
    order:13;
 }
 .option.hair.hair-38 {
    background-size: 140%;
    background-position: 50% 10%;
    order:14;
 }

 .option.hair.hair-39 {
    background-size: 160%;
    background-position: 60% 0%;
    order:15;
 }

 .option.hair.hair-40 {
order:16;
 }

 .option.hair.hair-41 {
    order:20;
 }
 .option.mouth.mouth-13 {
    background-size: 300%;
 }