/* Fonts */
@font-face {
    font-family: "Helvetica Neue Bold";
    src: url("assets/fonts/HelveticaNeue\ Bold.ttf");
}

/* Global Styles */
* {
    font-family: "Helvetica Neue Bold";
}
*::selection{
    background-color: #00000071;
    color: #FFF;
}

/* Body Styles */
body {
    background-color: hsl(34, 81%, 36%);
}

/* Main Container */
#main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40vw;
    height: 30vw;
    background-color: #ff9306;
    border-radius: 2vw;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto auto;
    border-radius: 5vw;
}

/* Grid Items */
#i1 { grid-area: 1 / 1 / 2 / 2; }
#d1 { grid-area: 1 / 2 / 2 / 3; }
#i2 { grid-area: 1 / 3 / 2 / 4; }
#i3 { grid-area: 2 / 1 / 3 / 2; }
#d2 { grid-area: 2 / 2 / 3 / 3; }
#i4 { 
    grid-area: 2 / 3 / 3 / 4;
    background-color: #925300;
    transition: box-shadow 0.3s;
}

#i4:hover { box-shadow: 0.3vw 0.3vw #000; }
#i4:active { background-color: #794400; }
#i4::selection { color: #000; background-color: #ffffff73; }

/* Button */
button{
    user-select: none;
    overflow: hidden;
}

#b1 {
    grid-area: 3 / 1 / 4 / 4;
    font-size: 2vw;
    width: 15vw;
    height: 5vw;
    border-radius: 5vw;
    border-width: 0;
    align-self: center;
    justify-self: center;
    background-color: #b86f11;
    transition: box-shadow 0.3s;
    color: #FFF;
}

#b1:hover { box-shadow: 0.3vw 0.3vw #000; }
#b1:active { background-color: #8a540d; }

/* Input Styles */
.inp {
    width: 12vw;
    height: 4vw;
    align-self: center;
    justify-self: center;
    border-radius: 5vw;
    border-width: 0;
    text-align: center;
    appearance: textfield;
    -webkit-appearence: textfield;
    -moz-appearance: textfield;
    font-size: 1.5vw;
    background-color: #5c3400;
    color: #fffdfb;
}

/* Remove Spinner in Input */
.inp::-webkit-outer-spin-button,
.inp::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Separator Line */
.blank {
    background-color: #382000;
    width: 90%;
    height: 0.7vw;
    border-radius: 5vw;
    justify-self: center;
    align-self: center;
}

/* Credits Section */
#credits { cursor: default; }

#creditsdiv {
    display: grid;
    width: 10vw;
    height: 1.5vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 2vw;
    background-color: #FFF;
    border-radius: 3vw;
    border-style: solid;
    align-items: center;
    justify-items: center;
    transition: box-shadow 0.3s;
    border-width: 0.2vw;
    border-color: #000;
    user-select: none;
}

#github_icon {
    width: 1vw;
    height: 1vw;
    grid-area: 1 / 1 / 2 / 2;
    float: right;
    margin-left: 0.2vw;
}

#credits_p {
    grid-area: 1 / 2 / 2 / 3;
    text-decoration: none;
    color: #000;
    cursor: default;
    margin-right: 0.2vw;
    margin-bottom: 0.12vw;
    font-family: "Segoe UI";
    font-weight: 650;
    font-size: 0.65vw;
}

#creditsdiv:hover { box-shadow: 0.3vw 0.3vw #000; }

/* Optimizing To Mobile */
@media (max-width: 500px){
    #main{
        width: 80vw;
        height: 100vw;
    }
    .inp{
        width: 24vw;
        height: 13vw;
        font-size: 6vw;
        border-radius: 10vw;
    }
    #b1{
        width: 70vw;
        height: 15vw;
        font-size: 5vw;
        border-radius: 10vw;
    }
    .blank{
        width: 5vw;
    }
    #creditsdiv{
        width: 30vw;
        height: 4vw;
        border-width: 0.33vw;
    }
    #credits_p{
        font-size: 1.5vw;
    }
    #github_icon {
        width: 2.5vw;
        height: 2.5vw;
    }
}