/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

@import url('https://fonts.googleapis.com/css?family=Acme|Montserrat&display=swap');

html, body {
    height:100%;
    margin:0;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    min-height: 100%;
}

body *:not(:first-child):not(".background") {
    z-index: 1;
}

* {
    font-family: 'Acme', sans-serif;
}

h1,
.navbar span {
    font-family: 'Acme', sans-serif;
}

.background {
    background: url(https://imgur.com/UMe7Mmy.jpg);
    filter: blur(8px);
    -webkit-filter: blur(8px);
    height: 100%;
    min-height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

footer {
    height: 50px;
    margin-top: auto;
    background: #0000005c;
    color: white;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: 50px;
    z-index: 2;
    clip-path: polygon(83.96% 22.00%, 59.9% 0%, 40.05% 14%, 26.88% 4%, 18.2% 18%, 15.31% 2%, 5.06% 16%, 0.66% 4%, 0% 32%, 0.59% 56%, 0.34% 95%, 10.55% 92%, 25.37% 97%, 50.58% 92%, 75.15% 91%, 100% 100%, 99.45% 64%, 98.71% 30%, 99% 0%);
    -webkit-clip-path: polygon(83.96% 22.00%, 59.9% 0%, 40.05% 14%, 26.88% 4%, 18.2% 18%, 15.31% 2%, 5.06% 16%, 0.66% 4%, 0% 32%, 0.59% 56%, 0.34% 95%, 10.55% 92%, 25.37% 97%, 50.58% 92%, 75.15% 91%, 100% 100%, 99.45% 64%, 98.71% 30%, 99% 0%);
}

footer a,
.about a {
    color: #1ad1d3;
    text-decoration: none;
}

footer a:hover,
.about a:hover {
    color: black;
    text-decoration: none;
}

h1 {
    text-align: center;
    /*background: -webkit-linear-gradient(#fdd678, #f8af65);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    margin: 20px 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    background: #0000005c;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-size: 50px;
}

header {
    clip-path: polygon(0.5% 0%, 0% 32%, 0.59% 56%, 0.34% 95%, 9.98% 78%, 25.21% 97%, 50.53% 78%, 75.36% 93%, 100% 100%, 99.45% 64.00%, 98.71% 30%, 99% 0%);
    -webkit-clip-path: polygon(0.5% 0%, 0% 32%, 0.59% 56%, 0.34% 95%, 9.98% 78%, 25.21% 97%, 50.53% 78%, 75.36% 93%, 100% 100%, 99.45% 64.00%, 98.71% 30%, 99% 0%);
}

#content {
    display: block;
    overflow: auto;
    z-index: 1;
	scroll-behavior: smooth;
}

*:focus {
    outline: none;
}

#navbar.in .navbar-nav,
#navbar.collapsing .navbar-nav {
    margin-bottom: 40px;
}

.navbar .navbar-brand {
    padding: 0px;
    display: flex;
    display: flex;
    align-items: center;
    color: white;
}

.navbar-brand > img {
    height: 100%;
    padding: 10px;
}

.navbar {
    margin: 0;
    border: 0;
    background-color: #0000005c;
}

.navbar .navbar-nav > li > a {
    color: black;
}

.navbar .navbar-toggle {
    padding: 10px;
    background: #333;
}

.temtem-entry {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0 10px;
    cursor: pointer;
    margin-bottom: 10px;
}

.temtem-entry:nth-child(2n+1):not(h3) {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.temtem-entry img:first-of-type {
    border: 1px solid white;
    border-radius: 50%;
    margin-right: 10px;
    background: white;
}

.temtem-entry .temtem-info {
    color: white;
    background-color: #30322f;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    border-radius: 20px;
    flex-direction: row;
    font-size: 16px;
}

.temtem-entry:hover .temtem-info,
#calculate a:hover,
#results table td:hover {
    background-color: #1ad1d3;
}

.temtem-entry .big-clip {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 10px;
    background: #0000006b;
}

.temtem-type {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.temtem-type:before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    background: url('../data/placeholder.png') no-repeat;
    background-size: cover;
}

.temtem-type.crystal:before {
    background: url('../data/types/crystal.png') no-repeat;
    background-size: cover;
}

.temtem-type.digital:before {
    background: url('../data/types/digital.png') no-repeat;
    background-size: cover;
}

.temtem-type.earth:before {
    background: url('../data/types/earth.png') no-repeat;
    background-size: cover;
}

.temtem-type.electric:before {
    background: url('../data/types/electric.png') no-repeat;
    background-size: cover;
}

.temtem-type.fire:before {
    background: url('../data/types/fire.png') no-repeat;
    background-size: cover;
}

.temtem-type.melee:before {
    background: url('../data/types/melee.png') no-repeat;
    background-size: cover;
}

.temtem-type.mental:before {
    background: url('../data/types/mental.png') no-repeat;
    background-size: cover;
}

.temtem-type.nature:before {
    background: url('../data/types/nature.png') no-repeat;
    background-size: cover;
}

.temtem-type.neutral:before {
    background: url('../data/types/neutral.png') no-repeat;
    background-size: cover;
}

.temtem-type.toxic:before {
    background: url('../data/types/toxic.png') no-repeat;
    background-size: cover;
}

.temtem-type.water:before {
    background: url('../data/types/water.png') no-repeat;
    background-size: cover;
}

.temtem-type.wind:before {
    background: url('../data/types/wind.png') no-repeat;
    background-size: cover;
}

.temtem-types {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

.temtem-entry.active .temtem-select,
.temtem-entry:not(.active) .temtem-name,
.temtem-entry:not(.active) .temtem-types {
    display: none;
    opacity: 0;
}

#calculate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#calculate a {
    padding: 20px;
    background-color: #30322f;
    color: white;
    text-decoration: none;
    -webkit-clip-path: polygon(0 3%,0 33%,1.5% 45%,2% 99%,53% 97%,100% 100%,99.5% 70%,98% 44%,99% 1%,65% 3%,36% 1%);
    clip-path: polygon(0 3%,0 33%,1.5% 45%,2% 99%,53% 97%,100% 100%,99.5% 70%,98% 44%,99% 1%,65% 3%,36% 1%);
}

#calculate a:link,
#calculate a:visited,
#calculate a:hover,
#calculate a:active, {
    color: white;
}

#temtem-modal .temtem-type {
	padding: 5px;
}

#temtem-modal .temtem-name {
	float: left;
}

#temtem-modal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	position: fixed;
	background: transparent;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
    will-change: visibility, opacity;
    visibility: hidden;
	opacity: 0;
    z-index: 3;
}

#temtem-modal.active {
    visibility: visible;
    opacity: 1;
}

#temtem-modal .dialog {
    position: absolute;
	max-width: 600px;
	width: 100%;
    top: 50px;
    bottom: 50px;
}

#temtem-modal .dialog .list-wrap {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    clip-path: polygon(1.301% 1.622%,1.5% 1.4%,3.444% 0.35%,34.5% 0.4%,100% 0.2%,100% 100%,100% 100%,100% 100%,100% 100%,97.071% 99.626%,78.347% 99.8%,47.209% 99.5%,41.971% 99.7%,27.716% 100%,9.695% 99.75%,0% 100%,2% 31.835%,0.837% 21.723%,0 16.479%,1.301% 3.622%);
    background: #383838fa;
    font-size: 16px;
}

#temtem-modal .dialog ul {
	position: relative;
	padding: 2.4rem;
	/*background: #ecececfa;*/
    /*background: #0000005c;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);*/
    color: white;
	background-clip: padding-box;
	list-style: none;
    /*-webkit-clip-path: polygon(2.301% 2.622%,1.5% 1.4%,3.444% 0.35%,34.5% 0.4%,98.791% 0.2%,99.372% 47.94%,99% 84.27%,97.745% 91.76%,99.582% 94.382%,97.071% 99.626%,77.347% 99.8%,47.209% 99.5%,41.971% 99.7%,27.716% 100%,9.695% 99.75%,0% 100%,2% 31.835%,0.837% 21.723%,0 16.479%,2.301% 2.622%);
    clip-path: polygon(2.301% 2.622%,1.5% 1.4%,3.444% 0.35%,34.5% 0.4%,98.791% 0.2%,99.372% 47.94%,99% 84.27%,97.745% 91.76%,99.582% 94.382%,97.071% 99.626%,77.347% 99.8%,47.209% 99.5%,41.971% 99.7%,27.716% 100%,9.695% 99.75%,0% 100%,2% 31.835%,0.837% 21.723%,0 16.479%,2.301% 2.622%);*/
}

#temtem-modal .dialog ul li {
	padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
    -webkit-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out;
}

#temtem-modal .dialog ul li:hover {
    background: #0000005c;
    color: white;
    cursor: pointer;
}

#temtem-modal .dialog ul li img {
	border: 1px solid white;
    border-radius: 50%;
    background: white;
}

#temtem-modal .dialog ul li > div,
#temtem-modal .dialog ul li > span {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

#temtem-modal .dialog ul li .temtem-types {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

#results table {
    border-radius: 20px;
    background: #0000006b;
    color: white;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
    -webkit-clip-path: polygon(3.96% 0.38%, 35.32% 0.75%, 46.444% 0px, 55.98% 0.00%, 65.87% 0.8%, 93.49% 0%, 97.46% 15px, 99.372% 47.94%, 100% 84.27%, 98.745% 91.76%, 99.582% 94.382%, 97.071% 99.626%, 53.68% 98.98%, 50.04% 99.47%, 13.64% 99.14%, 11.716% 100%, 6.36% 99.3%, 0px 100%, 0px 31.835%, 0.837% 21.723%, 0px 16.479%, 1.3% 3.58%);
    clip-path: polygon(3.96% 0.38%, 35.32% 0.75%, 46.444% 0px, 55.98% 0.00%, 65.87% 0.8%, 93.49% 0%, 97.46% 15px, 99.372% 47.94%, 100% 84.27%, 98.745% 91.76%, 99.582% 94.382%, 97.071% 99.626%, 53.68% 98.98%, 50.04% 99.47%, 13.64% 99.14%, 11.716% 100%, 6.36% 99.3%, 0px 100%, 0px 31.835%, 0.837% 21.723%, 0px 16.479%, 1.3% 3.58%);
}

#results table td {
    text-align: center;
}

#results table th {
    text-align: center;
}

#results table th,
#results table td {
    padding: .6em;
}

#results table th > *,
#results table td > * {
    vertical-align: middle;
}

#results table tr:not(:last-child) {
    border-bottom: 1px solid white;
}

#results table tr:first-child th:first-child:not(:last-child),
#results table tr:not(:first-child) th:not(:last-child),
#results table tr td:not(:last-child) {
    border-right: 2px solid #1ad1d3;
}

#results thead tr {
    border-bottom: 2px solid #1ad1d3;
}

#results tr td:nth-child(odd) img:first-of-type,
#results thead img {
    border: 1px solid white;
    border-radius: 50%;
    background: white;
    margin: 0 4px;
}

#choose-temtem {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    margin-bottom: 20px;
}

#choose-temtem .temtem-panel {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    padding: 10px;
    background: #0000005c;
    border-radius: 20px;
    margin: 0 10px;
}

#choose-temtem .temtem-panel h3 {
    text-align: center;
    font-size: 26px;
    color: white;
}

#calculate,
#results {
    margin-bottom: 20px;
}

.input-query {
    width: 100%;
    border-radius: 10px 10px 0 0;
    padding: 10px;
    padding-left: 20px;
    background: #ffffff00;
    color: white;
    border: none;
    border-bottom: 1px solid white;
    /*-webkit-clip-path: polygon(0 3%,0 33%,1% 55%,1.5% 108%,46% 75%,80% 108%,99.5% 74%,98% 44%,99% 0%,60% 12%,26% 0%);
    clip-path: polygon(0 3%,0 33%,1% 55%,1.5% 108%,46% 75%,80% 108%,99.5% 74%,98% 44%,99% 0%,60% 12%,26% 0%);*/
}

.input-query::placeholder {
    color: white;
}

.about ol {
    margin-bottom: 20px;
}

.about .row > div {
    background: #0000005c;
    color: white;
    padding: 20px;
}

.about .row > div h2 {
    margin: 0;
    margin-bottom: 10px;
}

.about .row:first-child {
    margin-bottom: 20px;
}

.big-clip {
    -webkit-clip-path: polygon(2.301% 2.622%,35.983% 1.873%,46.444% 0,84.519% 1.873%,99.791% 0,99.372% 47.94%,100% 84.27%,98.745% 91.76%,99.582% 94.382%,97.071% 99.626%,53.347% 98.502%,50.209% 99.626%,12.971% 98.502%,11.716% 100%,6.695% 98.502%,0 100%,0 31.835%,.837% 21.723%,0 16.479%,2.301% 2.622%);
    clip-path: polygon(2.301% 2.622%,35.983% 1.873%,46.444% 0,84.519% 1.873%,99.791% 0,99.372% 47.94%,100% 84.27%,98.745% 91.76%,99.582% 94.382%,97.071% 99.626%,53.347% 98.502%,50.209% 99.626%,12.971% 98.502%,11.716% 100%,6.695% 98.502%,0 100%,0 31.835%,.837% 21.723%,0 16.479%,2.301% 2.622%);
}

.blur-15 {
    backdrop-filter: blur(15px);
}

.blur-30 {
    backdrop-filter: blur(30px);
}

.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    color: red;
    cursor: pointer;
	z-index: 99;
}

.weak {
    background: #880000;
    padding: 2px;
}

@media (max-width: 700px) {
    #choose-temtem {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
}