@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');

body {
    background-color: #0B0E11;
}

.page-wrapper {
    margin-top: 3vh;
    height: 100vh;
    width: 100%;
}

.div-left, .div-right {
    width: 15%;
    height: 100%;
    /*border: 4px solid red;*/
}

.div-left {
    float: left;
}

.div-right {
    float: right;
} 

.modebuttons {
    width: 100%;
    height: 4vh;
    float: left;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding-bottom: 35px;
}

.normal, .structures {
   width: 48%;
    height: 100%;
    float: left;
    background-color: inherit;
}

.modebuttons div p {
    color: white;
    text-align: center;
    font-size: 20px;
    margin: 0px 0px;
    padding: 0px 0px;
    margin-top: 1vh;
    background-color: inherit;
}
.modebuttons div:hover {
    cursor: pointer;
}


.normal {
    background: none;
}

.structures {
    border-bottom-left-radius: 3px;
    background: none;
    font-family: Inter;
}

.button-selected {
	border: 2px solid #474747c4;
    background: #2d2d2d;
    border-radius: 13px;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
  }     

.content-wrapper {
    width: 100%;
    height: 85vh;
    float: left;
    background: none;
    border-radius: 3px;
    font-family: Inter;
}

.input-wrapper {
    width: 50%;
    height: 80vh;
    float: left;
}

.output-wrapper {
    width: 50%;
    height: 80vh;
    float: left;
}

.item {
    width: 100%;
    height: 20%;
    /*border: 4px solid blue;*/
}

.item-picture {
    height: 100%;
    width: 50%;
    /*border: 4px solid red;*/
    text-align: center;
    float: left;
    position: relative;
    text-align: center;
}
.item-picture img {
    height: 80%;
    float: right;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.plus-wrapper i {
    color: #FD4D4D;
}

input[type=number] {
    -moz-appearance: textfield;
  }

.item-picture input {
    background-color: #404F64;
    opacity: 70% !important;
    font-family: Inter;
    border: none;
    border-radius: 3px;
    font-size: 1.5em;
    width: 3ch;
    text-align: center;
    resize: none;
    float: left;
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.refined-mats {
    width: 100%;
    height: 50%;
    float: left;
    /*border: 2px solid blue;*/
    text-align: center;
    color: #f7f7f7;
}

.raw-mats {
    width: 100%;
    height: 50%;
    float: left;
    /*border: 2px solid red;*/
    text-align: center;
}

.raw-mats h1 {
    color: #f7f7f7;
}

.output-item {
    width: 33%;
    height: 20%;
    text-align: center;
    /*border: 2px solid red;*/
}

.output-item img {
    height: 100%;
    float: left;
    margin-left: 20%;
}

.output-item p {
    font-family: 'Anton', sans-serif;
    color: white;
    margin-top: 5%;
}

.output-item {
    float: left;
}

.output-wrapper h1 {
    margin: 0;
    padding-top: 1%;
    width: 100%;
}

.output-subheadder {
    font-size: small;
}

.output-itemgp {
    width: 33%;
    height: 100%;
    text-align: center;
    position: relative;
    /*border: 2px solid red;*/
}

.output-itemgp img {
    height: 100%;
    float: left;
    margin-left: 20%;
}

.output-itemgp p {
    font-family: 'Anton', sans-serif;
    color: white;
    margin-top: 5%;
}

.output-itemgp {
    float: left;
}

.structures-container {
    height: 70%;
    width: 100%;
}

.exp-container {
    height: 30%;
    width: 100%;
}

.structure-item {
    height: 14%;
    width: 22%;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);
    float: left;
    margin: 5px 5px;
}

.structure-item div img {
    width: 80%;
    max-height: 100%;
    position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

.minus-wrapper, .plus-wrapper {
    text-align: center;
    float: left;
    height: 100%;
    width: 20%;
    position: relative;
}

.minus-wrapper i, .plus-wrapper i {
    color: white;
    position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     
}

.minus-wrapper, .plus-wrapper:hover {
    cursor: pointer;
}

.structure-img-wrapper {
    position: relative;
    float: left;
    text-align: center;
    height: 100%;
    width: 60%;
}

.structure-img-wrapper input {
       background-color: #404F64;
    opacity: 80%;
    user-select: all;
    user-select: text;
    border: none;
    border-radius: 2px;
    height: 30%;
    width: 40%;
    text-align: center;
    resize: none;
    color: white;
    font-size: 17px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.exp-wrapper {
    height: 50%;
    width: 25%;
    text-align: center;
    float: left;
    position: relative;
}

.exp-wrapper p {
    color: white;
    position: absolute;
    margin: 0px 0px;
    padding: 0px 0px;
    font-size: 25px;
    text-shadow: -1px 1px 0px #000,
                  1px 1px 0px  #000,
                  1px -1px 0  #000,
                  -1px -1px 0  #000;
    position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

.exp-img-wrapper {
    height: 90%;
    width: 100%;
    position: relative;
}

#instructions {
    font-size: 14px;
}

.exp-img-wrapper img {
    width: 55%;
    position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}


@media (max-width: 1100px) {
    .item-picture img {
        height: 55%;
    }

}

@media (max-width: 1000px) {

    .exp-wrapper {
        width: 50%;
        height: 12vh;
    }

    .structures-container {
        max-height: 100vh;
    }

    .refined-mats {
        min-height: 40vh;
    }

    .structures p, .normal p {
        font-size: 16px !important;
    }

    .raw-mats {
        min-height: 40vh;
    }

    .div-left, .div-right {
        width: 5%;
    }

    .structure-item {
        width: 30%;
        height: 10vh;
    }

    .content-wrapper {
        width: 90%;
        height: fit-content;
        /*border: 4px solid red; */
    }

    .item-picture img {
        height: 80% !important;
    }

    .item {
        height: 15vh;
    }

    .input-wrapper {
        height: 80vh;
        width: 100%;
    }

    .output-wrapper {
        width: 100%;
        height: 100%;
    }

    .item-picture img {
        height: 55%;
    }

    .output-item {
        width: 100%;
        height: 10vh;
    }

    .item-picture input {
        width: 3ch;
        height: 3ch;
        font-size: 1em;
    }

    .structure-img-wrapper input {
        font-size: 0.7em;
        width: 45%;

    }

    .output-itemgp {
        width: 100%;
        height: 10vh;
        text-align: center;
        position: relative;
        /*border: 2px solid red;*/
    }
}

@media (max-width: 1001px)
{
	.page-wrapper {
		height: 160vh !important;
	}
}