/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  color: black;
}
.main{
  background-color: #78509c;
  }
.titulo{
  font-family: "This Wild Eath";
  font-style: italic;
  text-align: center;
  font-size: 100px;
  
}

/* página de trabalhos */

/* change the colors here! */
:root {
    --bgcolor: #e8c4c4;
    --lightcolor: #fef7dd;
    --popcolor: #ebc061;
    --darkcolor: #56263e;
    --darkestcolor: #361626;
}

/* the rest of the layout vv */

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bgcolor);
    color: var(--darkestcolor);
    font-family: "Baloo Paaji 2", "Atkinson Hyperlegible", Verdana, sans-serif;
    z-index: 1;
}

::selection {
    background-color: var(--popcolor)
}

h1 {
    color: var(--lightcolor);
    font-family: "Bagel Fat One", "Arial Black", sans-serif;
    font-size: 50pt;
    font-weight: normal;
    text-shadow: 2px 2px var(--darkcolor);
    max-width: 600px;
    margin: auto;
    margin-bottom: -25px;
    position: relative;
    z-index: 4;
}

a {
    color: var(--darkestcolor);
    border-radius: 5px;
    font-weight: bold;
    text-decoration: dotted underline 1px;
    text-shadow: var(--bgcolor) 1px 1px;
}

a:hover {
    color: var(--popcolor)
}

img {
    max-width: 100%;
}

button {
    border: var(--darkcolor) 2px solid;
    background-color: var(--lightcolor);
    box-shadow: var(--bgcolor) 3px 3px;
    border-radius: 3px;
    font-family: inherit;
    font-weight:bold;
    font-size: 14pt;
    color: inherit;
}

button:active {
    box-shadow: none;
    border-color: var(--darkestcolor)
}

button:hover,
button:focus {
    border-color: var(--popcolor)
}

.box {
    border: var(--darkcolor) 6px solid;
    border-radius: 6px;
    width: 600px;
    max-width: 100%;
    height: 450px;
    margin: auto;
    position: relative;
}

.innerbox {
    width: 100%;
    height: 100%;
    background-color: var(--lightcolor);
    overflow: auto;
    line-height: 1.2;
    position: relative;
    z-index: 3;
    padding: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--popcolor) var(--lightcolor);
}



.sidebox {
    position: absolute;
    height: 200px;
    right: -25px;
    top: 80px;
    width: 150px;
    line-height: 1.3;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: var(--darkcolor);
    color: var(--lightcolor);
    text-align: center;
    z-index: 1;
    transition: 0.5s;
    padding-right: 25px;
    box-shadow: 5px 0px 5px inset var(--darkestcolor);
    border-left: 6px solid var(--darkcolor);
    overflow: hidden;
}

.sidebox p {
    position: absolute;
    background-color: var(--darkcolor);
    z-index: -1;
    transform: rotate(270deg);
    right: -23px;
    top: 45%;
    margin: 0;
    line-height: 0.8;
}

.sidebox ul {
    list-style-type: none;
    padding: 0;
    height: 190px;
    margin: 5px;
    margin-left: -5px;
    scrollbar-width: thin;
    scrollbar-color: var(--popcolor) var(--lightcolor);
    overflow: auto;
}

.sidebox li {
    margin: 5px;
}

.sidebox a {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    color: var(--popcolor);
    text-shadow: none;
}

.sidebox a:hover {
    background-color: var(--popcolor);
    color: var(--darkestcolor)
}

.sidebox:hover,
.sidebox:focus {
    position: absolute;
    right: -150px;
}

.leftcorner {
    position: absolute;
    bottom: -75px;
    left: -75px;
    max-height: 150px;
    z-index: 5;
}

.rightcorner {
    position: absolute;
    bottom: -75px;
    right: -75px;
    max-height: 150px;
    z-index: 5;
}

/* modifications for smaller screens - most notably changing the navigation tab's location and appearance so it moves to the bottom of the box. */

@media only screen and (max-width: 889px) {
    .sidebox {
        top: unset;
        right: 75px;
        bottom: -23px;
        border-top-right-radius: unset;
        border-bottom-left-radius: 20px;
        border-left: none;
        border-top: 6px var(--darkcolor) solid;
        box-shadow: 0px 5px 5px inset var(--darkestcolor);
        padding: unset;

    }

    .sidebox p {
        transform: unset;
        bottom: 5px;
        top: unset;
        right: unset;
        left: 26%;
    }

    .sidebox:hover,
    .sidebox:focus {
        right: 75px;
        bottom: -200px;
    }

    .sidebox ul {
        height: 160px;
        margin: 5px;
        margin-left: 5px;
    }

}

@media only screen and (max-width: 760px) {
    .leftcorner {
        display: none;
    }

    .rightcorner {
        display: none;
    }

}

/* temporary fix for mobile; this makes the nav menu always-expanded on mobile, because it was broken in safari on iphones. working on another option. stay tuned. */

@media only screen and (max-width: 500px) {
.sidebox {top:440px;
right:0;}
.sidebox:hover, .sidebox:focus {top:440px;
right:0;}
}

} 


/* isotopes */

* { box-sizing: border-box; }

body {
  font-family: sans-serif;
}

/* ---- button ---- */

.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28F;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group {
  margin-bottom: 20px;
}

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- isotope ---- */

.grid {
  border: 1px solid #333;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 10px;
  background: #888;
  color: #262524;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;

  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}

.element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element-item.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
.element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }