/* yes i know its formatted ugly i ask you to ignore it because
this wasn't originally supposed to be a serious big project, it
was made to be a one-off random test thing so its
awkwardly formatted */

.inputbox{
    text-transform:uppercase;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.15em;
    
}

#canvas{
    position: absolute;
    top: 5%;
}
#done{
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 1.25em;
    text-align: center;
    padding: 0.5em 1.5em;
    position: relative;
    left: 50%;
    transform: translate(-50%);
}
#credits {
    text-decoration-style: dashed;
    color: #ca0a0a;
    transition: 0.2s all ease-in-out;
}
#credits:hover{
    color: #f01212;
    transition: 0.2s all ease-in-out;
}
#td-base{
    width: 32%;
}
#thing{
    margin-top: 8em;
    position: absolute;
    width: 30%;
    height: auto;
    top: 5%;
    left: 1%;
    display: block;
    font-weight: bold;
    font-size: 1.25em;
    text-transform:uppercase;
    font-family: helvetica;
}
#instructions{
    font-size: 1em;
    text-transform:none;
}
.test{
    position: relative;
    text-align: center;
}
#color{
    position: absolute;
    left: 34.74%;
    top: 27.1%;
    width: 30.55%;
    height: 6.35%;
    z-index: 900;
}
#icon{
    z-index: 1000;
    position: absolute;
    left: 35.45%;
    top: 5.2%;
}
#canvasicon{
    width: 250px;
    height: 250px;
}
#sigil{
    z-index: 1000;
    position: absolute;
    left: 56.75%;
    top: 40%;
}
#canvassigil{
    width: 120px;
    height: 120px;
}
            #hemo{
                width: 10%;
                height: 2%;
                left: 40.4%;
                top: 48%;
                position: absolute;
                text-align: left;
                
            }
            #hex{
                width: 10%;
                height: 2%;
                left: 39.75%;
                top: 52.1%;
                position: absolute;
                text-align: left;
                vertical-align: middle;
            }
            #sigilname{
                width: 10%;
                height: 2%;
                left: 38.6%;
                top: 56.2%;
                position: absolute;
                text-align: left;
                vertical-align: middle;
            }
            #height{
                width: 10%;
                height: 2%;
                left: 39.1%;
                top: 60.09%;
                position: absolute;
                text-align: left;
                vertical-align: middle;
            }
#horns{
    width: 29%;
    height: 9%;
    left: 35.45%;
    top: 63.95%;
    position: absolute;
    text-indent: 3.45em;
    resize: none;
    overflow: hidden;
}
            #designation{
                width: 29%;
                height: 11.5%;
                left: 35.45%;
                top: 82.05%;
                position: absolute;
                text-indent: 6.75em;
                resize: none;
                overflow: hidden;
            }
            #genid{
                width: 10%;
                height: 2%;
                left: 38.75%;
                top: 74.3%;
                position: absolute;
                text-align: left;
                vertical-align: middle;
            }
            #grade{
                position: absolute;
                text-align: left;
                width: 1.3%;
                height: 2%;
                left: 38.7%;
                top: 35.9%;
                vertical-align: middle;
            }
            #role{
                position: absolute;
                
                width: 16%;
                height: 2%;
                left: 38.2%;
                top: 40%;
                vertical-align: middle;
            }
            #dor{
                position: absolute;
                width: 16%;
                height: 2%;
                left: 37.7%;
                top: 44.1%;
                vertical-align: middle;
            }
            #doi{
                position: absolute;
                width: 16%;
                height: 2%;
                left: 37.7%;
                top: 94.5%;
                vertical-align: middle;
            }
            #lastname, #firstname{
                position: absolute;
                width: 15%;
                left: 49%;
                top: 12%;
                font-size: 3em;
                font-family: helvetica;
                font-weight: bold;

            }
            #firstname{
                top: 18%;
            }
            #bondmates{
                width: auto;
                height: 2%;
                left: 42%;
                top: 78.25%;
                position: absolute;
                text-align: left;
                vertical-align: middle;
                text-transform:uppercase;
                font-family: 'Courier New', Courier, monospace;
                font-size: 1.15em;
                appearance: none;
                color: black;
            }
            #mate{
                width: 10%;
                height: 2%;
                left: 42.8%;
                top: 78.3%;
                position: absolute;
                text-align: left;
                vertical-align: middle;
                visibility: hidden;
            }
            input, textarea, select{
                background: none;
                font-family: helvetica;
                text-transform:uppercase;
                position: absolute;
                outline: none;
                border: none;
            }

@media only screen and (max-width: 430px) {
    .inputbox{
        text-transform:uppercase;
        font-family: 'Courier New', Courier, monospace;
        font-size: 1.1em;  
    }
    #td-base{
        width: 100%;
    }
    #thing{
        position: relative;
        width: 100%;
        height: auto;
        display: block;
        font-weight: bold;
        font-size: 1.25em;
        text-transform: uppercase;
        font-family: helvetica;
        margin-top: 0;
    }
    #lastname, #firstname{
        width: 50%;
        position: absolute;
        top: 11%;
        left: 47%;
        font-family: helvetica;
        font-size: 1.9em;
        font-weight: bold;
    }       
    #firstname{
        top: 17%;
    }
    #icon{
        z-index: 1000;
        position: absolute;
        left: 4.4%;
        top: 6%;
    }
    #canvasicon{
        width: 170px;
        height: 170px;
    }
    #sigil{
        z-index: 1000;
        position: absolute;
        left: 71%;
        top: 40%;
    }
    #canvassigil{
        width: 85px;
        height: 85px;
    }
    #color{
        position: absolute;
        left: 2.2%;
        top: 27.7%;
        width: 95.55%;
        height: 6.4%;
        z-index: 900;
    }
    #grade{
        position: absolute;
        text-align: left;
        width: auto;
        height: 2%;
        left: 15.5%;
        top: 35.9%;
        vertical-align: middle;
    }
    #role{
        left: 14%;
        top: 40.25%;
        width: 52.5%;
    }
    #dor{
        width: 50%;
        height: 2%;
        left: 12.65%;
        top: 44.3%;
    }
    #hemo{
        width: 46%;
        height: 2%;
        left: 21%;
        top: 48%;
    }
    #hex{
        width: 46%;
        height: 2%;
        left: 19.5%;
        top: 52.1%;
    }
    #sigilname{
        width: 55%;
        height: 2%;
        left: 15.5%;
        top: 56.15%;
    }
    #height{
        width: 60%;
        height: 2%;
        left: 16.75%;
        top: 60.09%;
    }
    #horns{
        width: 90%;
        height: 9%;
        left: 4%;
        top: 63.75%;
        text-indent: 2.75em;
        font-size: 0.95em;
    }
    #genid{
        width: 75%;
        height: 2%;
        left: 15%;
        top: 74.12%;
    }
    #bondmates{
        width: auto;
        height: auto;
        left: 25%;
        top: 78%;
        font-size: 0.99em;
        font-weight: bold;
    }
    #mate{
        width: 60%;
        height: 2%;
        left: 29.5%;
        top: 78.28%;
        position: absolute;
        text-align: left;
        vertical-align: middle;
        visibility: hidden;
    }
    #designation{
        width: 90%;
        height: 11.5%;
        left: 4.75%;
        top: 81.4%;
        text-indent: 5em;
        resize: none;
        overflow: hidden;
        font-size: 0.99em;
    }
    #doi{
        top: 94.05%;
        width: 70%;
        height: 2%;
        left: 12.65%;
    }
}