@import url('https://fonts.googleapis.com/css2?family=Eater&family=Ewert&family=Flavors&family=Fleur+De+Leah&family=Nosifer&family=Press+Start+2P&family=Rubik+Beastly&family=Rubik+Burned&family=Rubik+Dirt&family=Rubik+Gemstones&family=Rubik+Glitch&family=Rubik+Microbe&family=Rubik+Moonrocks&family=Rye&family=Saira+Stencil+One&family=Shojumaru&family=VT323&display=swap');

:root {
    
    --terraria-green: #3ea13f;
    --terraria-dark-green: #1d4d1d;
    --terraria-brown: #6b4f2b;
    --terraria-light-brown: #a6824a;
    --terraria-sky-blue: #62b0ff;
    --terraria-light-blue: #a1d6ff;
    --terraria-white: #e6f7ff;
    --terraria-shadow: rgba(0, 0, 0, 0.5);
    --terraria-bg: #65ff6a;
    --terraria-text: #1b2e1f;
    --terraria-link: #2f7a0b;
    --terraria-link-hover: #74c72b;
    --terraria-border: #2b5d0b;
    --terraria-stone-1: #808080;
    --terraria-stone-2: #404040;
    --crimson-link: #dc143c;
    --crimson-color-1: #ac0000;
    --crimson-color-2:#ff6831;
    --corruption-color-1: #332384;
    --corruption-color-2: #7a57ba;
    --corruption-color-3: #6806ca;
    --corruption-color-4: #b79fff;
    --corruption-spike-1: #472F46;
    --corruption-spike-2: #3C2639;
    --lava-color-1: #E02E18;
    --lava-color-stone:#4B120D;
    --Ash-color: #ac9c9c;
    --terraria-ice-1: #99fffd;
    --terraria-ice-2: #00547b;
    --jungle-color-1: #fec214;
    --jungle-color-2: #7B6545;
    --jungle-color-3: #a04f4a;
    --jungle-color-4: #fef625;
    --jungle-color-5: #3a7663;
    --mushroom-color-1: #001aff;
    --mushroom-color-2: #0D315E;
    --mushroom-color-3: #6978ff;
    --desert-color-1:#AE9255;
    --desert-color-2:#4D4025;
    --desert-color-3:#f3fe56;
    --desert-color-4:#74f8ff;
    --halow-color-1:#dd00ff;
    --halow-color-2:#ffff00;
    --halow-color-3:#00fff2;
}

body, html {
    text-align: center;
    Margin: 0;
    Padding: 0;
    font-family: 'Press Start 2P', monospace;
    font-size: 16px;
    background-image: linear-gradient( var(--terraria-sky-blue)30%, var(  --corruption-color-1), var(--crimson-link));
    background-color: var(--terraria-bg);
    max-width: 100%;
    min-height: 100%;
    cursor: url(../IMG/cursor/Normal\ select.cur), default;
    
}
body{
    margin-right: 70px;
    margin-left: 30px;
}
p, span, h1, h2, h3, h4, h5, h6, a, li {
    cursor: url('../IMG/cursor/Text\ select.cur'), text;
  }
acronym{
    font-family: "Nosifer", sans-serif, system-ui, monospace;
    cursor: url('../IMG/cursor/Help_select_guide.cur'), help;
    text-decoration: none;
    color: var(--crimson-link);
}
a{
    cursor: url('../IMG/cursor/Power\ Glove.cur'), pointer;
}
#container{
    max-width: 1180px;
    text-align: center;     
    margin: 20px auto;
}
p{
    text-align: justify;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}

.intro h1{
    font-size: 2.8em;
    border-radius: 20px;
    border: 10px solid;
    border-color: var(--terraria-bg);
    border-image: url('../IMG/grass.avif') 30 round;
    background-image: radial-gradient(#291202, #5b2600) ;
    width: 50%;
    height: 30% ;
    min-height: 180px;
    min-width: 600px;
    padding: 0;
    margin: 0px auto ;
    text-transform: uppercase;
}
.intro h2{
    margin: 5px;
    background-image:url('../IMG/Leaf_Block_\(2\).webp');
    background-repeat: cover;
    align-self: self-start;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.intro h1 span{
    font-family: "VT323";
    background-image:url('../IMG/Stone_Block\ \(2\).png');
    padding: 0;
    margin: 0;
    background-repeat: round;
    background-position: center;
    align-self: self-start;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header{
    font-family: "Rubik Moonrocks",'Press Start 2P', system-ui, monospace, sans-serif;
    font-size: 3em;
    background-image: url('../IMG/Cirrocumulus_cloud_1.webp'), url('../IMG/Cirrocumulus_cloud_2.webp');
    padding: 10px;
	white-space: nowrap;
    background-repeat: round, round;
    background-size: 50%;
    background-attachment: fixed;
    border-radius: 20px;
    border: 3px solid ; 
    animation: moverFundoVer 15s linear infinite;
    
}
.header h2, h1{
    color: var(--terraria-dark-green);
    white-space: wrap;
}

#jar-intro{
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

#jar-summary{
    margin: 0px;
    height: auto;
    padding: 30px;
    border: 3px solid;
    border-color: black;
    border-radius: 30px ;
    background: url('../IMG/Desert_background_3-no-sky.png'),linear-gradient(var(--desert-color-4) 1%, var(--desert-color-3));
    background-attachment: fixed;
    background-repeat: round;
    background-size: contain;
    font-family: 'Rye', system-ui, monospace, serif;
    font-size: 25px;
    color: var(--desert-color-2);
    align-self: self-start;
    animation: moverFundoVer 30s linear infinite;
}

.summary acronym:hover, #jar-summary a:hover{
    color: var(--desert-color-1);
}
.summary a:link, .preamble a:link, .main.supporting a:link{
    font-size: 23px;
    color: var(--corruption-color-3);
    text-decoration: none;
    font-family: "Eater", monospace, sans-serif;

}


#jar-preamble {
  margin: 0;
  padding: 2%;
  border: 3px solid;
  border-radius: 30px ; 
  background-image: url('../IMG/Jungle_background_3.webp'),linear-gradient(var(--desert-color-4) 1%, var(--terraria-link-hover));;
  background-attachment: fixed;
  background-repeat: repeat-x;
  background-size: contain;
  animation: moverFundoVer 30s linear infinite;
  
}
#jar-preamble h3{
    font-family: 'Shojumaru', system-ui, monospace, sans-serif;
    color: var(--jungle-color-3);
    font-size: 3em;
    margin:0;
}
#jar-preamble p{
    font-family: 'Fleur De Leah', cursive, system-ui, monospace, sans-serif;
    font-size: 30px;
    color: var(--jungle-color-1)
}
.preamble acronym:hover, .preamble a:hover{
    color: var(--jungle-color-4);
}

#jar-explanation{
    display: flex;
    align-items: center;
    gap: 0px;
    flex-wrap: wrap;
}
#jar-explanation h3{
    flex:100%;
    box-sizing: border-box;
    align-self: center;
    margin: 0;
    padding: 15px;
    margin-top: 2%;
    font-size: 3em;
    border: 3px solid;
    border-radius: 30px 30px 0px 0px ;
    border-color: black  ;
    color: var(--terraria-stone-2);
    text-transform: uppercase;
    background-image: url('../IMG/Cirrus_cloud_1.webp'), url('../IMG/Cirrus_cloud_2.webp'), linear-gradient(var(--corruption-color-3) 1%, var(--terraria-sky-blue));
    background-attachment: center;
    background-repeat: round;
    animation: moverFundoVer 60s linear infinite;
    background-size: 25%;
}

#jar-explanation .p1, #jar-explanation .p2{
    flex: 1;
    box-sizing: border-box;
    margin: 2% 0% 2% 0% ;
    border: 3px solid;
}
#jar-explanation .p2{
    border-left: 0;
}
#jar-explanation .p1{
    border-right: 0;
}
#jar-explanation .p1{
    background-image: url('../IMG/Forest_background_15-no-sky.webp'), linear-gradient(var(--mushroom-color-2) 1%, var(--desert-color-4));
    background-attachment: fixed;
    background-repeat: round;
    background-size: contain;
    min-width: 500px;
    max-height: 580px;
    padding: 72px;
    font-size: 25px;
    border-color: black;
    font-family: 'Rubik Dirt', system-ui, monospace, sans-serif;;
    color: var(--terraria-bg);
    border-radius: 0px 0px 0px 30px;
    animation: moverFundoVer 30s linear infinite;
}
#jar-explanation .p1 acronym:hover{
    color: var(--terraria-link-hover);
}

#jar-explanation .p2{
    background-image: url('../IMG/Snow_biome_background_2-no-sky.webp'), linear-gradient(var(--terraria-light-blue) 1%, var(--terraria-white));
    background-attachment: fixed;
    background-repeat: round;
    background-size: contain;
    min-width: 500px;
    max-height: 580px;
    padding: 5%;
    font-size: 25px;
    border-color: #000000;
    font-family: 'Flavors', system-ui, monospace, sans-serif;;
    color: var(--terraria-ice-2);
    border-radius: 0px 0px 30px 0px;
    animation: moverFundoVer 30s linear infinite;
}
#jar-explanation .p2 acronym:hover{
    color: var(--terraria-ice-1);
}
#jar-explanation b{
    font-family: 'Rubik Moonrocks', system-ui, monospace, sans-serif;;
    color: #000;
}


#jar-participation{
    display: flex;
    align-items: row;
    gap: 0;
    flex-wrap: wrap;
}
#jar-participation h3{
    flex:100%;
    box-sizing: border-box;
    align-self: center;
    margin: 0;
    padding: 30px;
    font-size: 4em;
    border: 3px solid;
    border-radius: 30px 30px 0px 0px ;
    border-color: #000000  ;
    color: var(--lava-color-stone);
    text-transform: uppercase;
    background-image:  url('../IMG/Cummulus_cloud_4.webp'), linear-gradient( var(--corruption-color-3)10%, var(--halow-color-1), var(--crimson-color-1));
    background-attachment: center;
    background-repeat: round;
    animation: moverFundoVer 120s linear infinite;
    margin-bottom: 20px;
    background-size: 20%;
}

#jar-participation .p1, #jar-participation .p2, #jar-participation .p3{
    border: 3px solid;
    margin:0;
    padding: 18px;
    max-width: 355px;
    border-color: #000000;
    background-attachment: fixed;
    background-repeat: round;
    background-size: contain;
    font-size: 16px;
    animation: moverFundoVer 30s linear infinite;
}
#jar-participation .p1{
    background-image: url('../IMG/Crimson_background_5-no-sky.webp'), linear-gradient(var(--crimson-link) 1%, var(--jungle-color-1));
    font-family: 'Nosifer', system-ui, monospace, sans-serif;
    color: var(--crimson-color-2);
    border-radius: 0px 0px 0px 30px;
    border-right: 0;
}
#jar-participation .p1 acronym{
    font-family: 'Rubik Glitch', system-ui, monospace, sans-serif;
    color: var(--terraria-white);
}
#jar-participation .p1 a, #jar-participation .p2 a, #jar-participation .p3 a{
     font-size: 18px;
}
#jar-participation .p1 a:hover, #jar-participation .p1 acronym:hover{
    color: var(--crimson-link);
}

#jar-participation .p2 {
    background-image: url('../IMG/Corruption_background_3-no-sky.webp'), linear-gradient(var(--mushroom-color-2) 1%, var(--halow-color-1));
    font-size: 18px;
    font-family: 'Eater', system-ui, monospace, sans-serif;
    color: var(--corruption-color-2);
    border-right: 0;
    border-left: 0;
} 

#jar-participation .p2 a{
    font-family: 'Rubik Glitch', system-ui, monospace, sans-serif;
    color: var(--terraria-white);
    font-size: 19px;
}
#jar-participation .p2 a:hover, #jar-participation .p2 acronym:hover{
    color: var(--corruption-spike-1);
    
}
#jar-participation .p2 strong{
    color: var(--corruption-spike-2);
}

#jar-participation .p3{
    background-image: url('../IMG/Hallow_background_3-no-sky.webp'), linear-gradient(var(--halow-color-1) 1%, var(--halow-color-2));
    font-size: 25px;
    font-family: 'Rubik Glitch', system-ui, monospace, sans-serif;;
    color: var(--terraria-white);
    border-radius: 0px 0px 30px 0px;
    border-left: 0;
}
#jar-participation .p3 strong{
    font-family: 'Rubik Gemstones', system-ui, monospace, sans-serif;
    color: var(--halow-color-3);
}
#jar-participation .p3 a, #jar-participation .p3 acronym{
    font-size: 20px;
}
#jar-participation .p3 a:hover, #jar-participation .p3 acronym:hover{
    color: var(--jungle-color-4);
    
}


#jar-benefits h3{
    background-image: url('../IMG/Underground_background_9.webp');
    font-size: 4em;
    border-radius: 30px 30px 0px 0px;
    padding: 20px;
    background-attachment: fixed;
    margin: 20px 0px 20px 0px ;
    border: 3px solid;
    animation: moverFundoVer 160s linear infinite;
}
#jar-benefits .p1{
    padding: 30px;
    background-image: url('../IMG/Glowing_Mushroom_background_2.webp'), linear-gradient(var(--halow-color-1) 1%, var(--halow-color-2));
    background-attachment: fixed;
    background-repeat: round;
    background-size: contain;
    font-size: 25px;
    font-family: 'Rubik microbe', system-ui, monospace, sans-serif;;
    color: var(--mushroom-color-3);
    border-radius: 0px 0px 30px 30px;
    border: 3px solid;
    border-color: #000;
    animation: moverFundoVer 60s linear infinite;
}
#jar-benefits .p1 acronym:hover{
    color: var(--mushroom-color-1);
}


#jar-requirements{
    display: flex;
    align-items: row;
    gap: 0;
    flex-wrap: wrap;
}
#jar-requirements h3{
    flex:100%;
    box-sizing: border-box;
    align-self: center;
    margin: 0;
    padding: 030px;
    margin-top: 2%;
    font-size: 4em;
    border: 3px solid;
    border-radius: 30px 30px 0px 0px ;
    border-color: #000000  ;
    color: var(--lava-color-1);
    text-transform: uppercase;
    background-image:  url('../IMG/Cavern_background_5.webp'), linear-gradient( var(--corruption-color-3)10%, var(--halow-color-1), var(--crimson-color-1));
    background-attachment: center;
    background-repeat: round;
    animation: moverFundoVer 120s linear infinite;
    margin-bottom: 20px;
    background-size: 20%;
}
#jar-requirements .p1, #jar-requirements .p2, #jar-requirements .p3{
    border: 3.7px solid;
    margin:0;
    padding: 18px;
    max-width: 355px;
    border-color: #000000;
    background-attachment: scroll;
    background-repeat: round;
    background-size: auto;
    animation: moverFundoVer 30s linear infinite;
    border-bottom: 0;
}
#jar-requirements .p1{
    background-image: url('../IMG/Underground_crimson_background_2.webp'), linear-gradient(var(--terraria-light-blue) 1%, var(--terraria-white));
    font-size: 19px;
    font-family: 'Nosifer', system-ui, monospace, sans-serif;
    color: var(--crimson-color-2);
    border-right: 0;
}
#jar-requirements .p1 acronym{
    font-family: 'Rubik Gemstones', system-ui, monospace, sans-serif;
    color: var(--terraria-white);
    font-size: 25px;
    margin: 1px;
}
#jar-requirements .p1 a, #jar-requirements .p2 a, #jar-requirements .p3 a{
     font-size: 25px;
}
#jar-requirements .p1 a:hover, #jar-requirements .p1 acronym:hover{
    color: var(--crimson-link);
}

#jar-requirements .p2 {
    background-image: url('../IMG/Underground_corruption_background_1.webp'), linear-gradient(var(--terraria-light-blue) 1%, var(--terraria-white));
    font-size: 20px;
    font-family: system-ui, monospace, sans-serif;
    color: var(--corruption-color-4);
    border-right: 0;
    border-left: 0;
    font-family: 'Rubik Beastly', system-ui, monospace, sans-serif;
} 

#jar-requirements .p2 a{
    font-family: 'Rubik Gemstones', system-ui, monospace, sans-serif;
    color: var(--terraria-white);
    font-size: 19px;
}
#jar-requirements .p2 a:hover, #jar-requirements .p2 acronym:hover{
    color: var(--corruption-color-2);
    
}
#jar-requirements .p3{
    background-image: url('../IMG/Underground_hallow_background_1.webp'), linear-gradient(var(--halow-color-1) 1%, var(--halow-color-2));
    font-size: 20px;
    font-family: 'Rubik Glitch', system-ui, monospace, sans-serif;;
    color: var(--terraria-white);
    border-left: 0;
}
#jar-requirements .p3 a, #jar-requirements .p3 acronym{
    font-size: 23px;
    font-family: 'Rubik Beastly', system-ui, monospace, sans-serif;
    color: var(--corruption-color-4);
}
#jar-requirements .p3 a:hover, #jar-requirements .p3 acronym:hover{
    color: var(--jungle-color-4);
}
#jar-requirements .p4{
    background-image: url('../IMG/Underworld_background_2.jpg'), linear-gradient(var(--halow-color-1) 1%, var(--halow-color-2));
    font-size: 30px;
    font-family: 'Rubik Burned', system-ui, monospace, sans-serif;;
    color: var(--Ash-color);
    background-repeat: round;
    border-radius: 0px 0px 30px 30px;
    margin: 0;
    padding: 5%;
    background-attachment: fixed;
    animation: moverFundoVer 30s linear infinite;
    border: 3px solid;
    border-top: 0;
    border-color: #000;
}
#jar-requirements .p4 a{
    font-size: 23px;
} #jar-requirements .p4 acronym{
    font-size: 23px;
}
#jar-requirements .p4 a:hover, #jar-requirements .p4 acronym:hover{
    color: var(--lava-color-stone);
}


#jar-footer{
    top: 20px;
    left: 0;
    border: 3px solid;
    border-radius: 0px 15px 15px 0px ;
    width: min-content;
    background-image: url('../IMG/Wall_of_Flesh-red.gif'), linear-gradient(#0000003e, #6362623e), url('../IMG/Lava_layer_background_4.webp');
    background-size: contain, cover, cover;
    background-position-x: center;
    background-repeat: no-repeat, round, round;
    position: fixed;
    overflow: hidden;
    padding: 10px 25px;
} 
#jar-footer a{
    font-size: 25px;
    font-family: 'Rubik Burned', system-ui, monospace, sans-serif;
    margin: 0;
    color: var(--terraria-white);
    border-radius: 10px;
    padding: 5px;
}
#jar-footer a:hover{
    color: var(--Ash-color);
}

 .sidebar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 350px;
    background: url('../IMG/Rainbow.jpg') repeat-y 1% 48%;
    background-repeat: round;
    padding: 0px 0px 0px 55px;
    margin-right: -350px;
    transition: 1.5s;
    border-radius: 30px 0px 0px 30px;
    background-color: var(--terraria-sky-blue);
    animation: moverFundoVer 90s linear infinite;
    background-size: auto;
    position: fixed;
    overflow: hidden;
 }
.sidebar:hover{
    margin-right: 0;
    transition: 0.75s;
}
.sidebar h3{
    color: var(--jungle-color-1);
    font-family: 'Press Start 2P';
    font-size: 15px;
    margin: 10px auto;
}
.sidebar ul{
    list-style-type: none;
    padding-left: 0;
}
.sidebar li{
    line-height: 1.5em;
    display: block
}

.wrapper{
    color: var(--terraria-white);
    font-size: 20px;
    font-family: "Rubik Glitch", system-ui, monospace, sans-serif;
    background-image: url('../IMG/Ocean_background_6.webp'); 
    background-size: 818px;
    align-self: center;
    height: 100%;   
    padding: 0% 10px;
    padding-top: 5% ;
    animation: moverFundoVer 30s linear infinite;
    border: 3px solid;
    border-color: var(--terraria-white);
    
}
.wrapper a:link{
    text-decoration: none;
}

.wrapper a{
    color: var(--terraria-white);
}

.wrapper ul li a.design-name:link, .previous a:link{
    font-family: 'Nosifer', system-ui, monospace, sans-serif;
    font-size: 0.8em;
    margin-right: 5px;
}

.wrapper ul li a.designer-name:link, .next a:link{
    font-family: 'Eater', system-ui, monospace, sans-serif ;
    font-size: 0.8em;
    margin-left: 5px;
}   

.design-name:hover, .previous a:hover{
    color: var(--crimson-link);
}

.designer-name:hover, .next a:hover{
    color: var(--corruption-color-3);
}

.viewall a:link{
    font-family: 'Rubik Dirt', system-ui, monospace, sans-serif;
}

.viewall a:hover{
    color: var(--terraria-bg);
}

.design-resources ul li a.view-css{
    font-family: 'Flavors', cursive, system-ui, monospace, sans-serif;
}

.view-css:hover,.view-css acronym:hover {
    color: var(--terraria-ice-1);
}

.design-resources ul li a.css-resources{
    font-family: 'Rubik Microbe', system-ui, monospace, sans-serif;
    font-size: 25px
}

.css-resources:hover{
    color: var(--mushroom-color-1);
}

.design-resources ul li a.jar-submit{
    font-family: 'Shojumaru', system-ui, monospace, sans-serif;
}

.jar-submit:hover{
    color: var(--jungle-color-2 );
}
#jar-selection{
    margin-top: 15%  ;
}
#jar-archives, #jar-resources {             
  min-width: 0;         
  margin: 5% 0px 5px 0px;
}



/*Se der tempo colocar ao menos uma boss de cada bioma nos div ou span */
@keyframes moverFundoVer {
    from {
      background-position: -300% 0;
    }
    to {
      background-position: 100% 0;
    }
}