:root {
    --left: 10;
    --top: 21;
}
body {
    display: grid;
    color:aliceblue;
    opacity: 0.05;
    margin: 0px;
    padding: 0px;
    font-family: 'Poppins', sans-serif;

    background-color: #78da3f;

    background-color: #0a1109;
    
}
canvas {
    background: rgb(0, 225, 255);
    z-index: -1;
}
#resetButton {
    background: rgb(165, 165, 165);
    border: 2px solid rgb(165, 165, 165);
}
.vUnit {
    display: inline;
}
.mUnit {
    display: inline;
}
a {
    color: #90e260;
    text-decoration: none;
    font-weight: normal;
}
form {
    z-index: 1000;
}
ul {
    margin: 0px;
}


/*-------------------------------------------------------------------------------------------------desktop-----------*/
@media only screen and (min-width: 800px) {
    h1 {
        position: absolute;
        font-size: 3.6vw;
        margin-top: 0px;
        top: 1.6vw;
        left: calc(var(--left) * 1vw);
        z-index: 10000;
    }
    canvas {
        width: 100vw;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .leftForm {
        position: absolute;
        top: calc(var(--top) * 1vw);;
        left: calc(var(--left) * 1vw);
    }
    #resultarticle {
        position: absolute;
        top: calc(var(--top) * 1vw);;
        left: calc(var(--left) * 1vw + 300px);
        width: 330px;
    }
    
    #resetButton {
        position: absolute;
        top: calc(var(--top) * 1vw + 170px);
        left: calc(var(--left) * 1vw + 50px);
    }
    #startButton {
        position: absolute;
        top: calc(var(--top) * 1vw + 170px);
        left: calc(var(--left) * 1vw + 178px);
        background: #78da3f;
        border: 2px solid #78da3f;
    }
    .vertical {
        border-left: 1.4px solid #78da3f;
        width: 1px;
        height: 144px;
        position: absolute;
        top: calc(var(--top) * 1vw + 4px);
        left: calc(var(--fromLeft) * 1px + 10vw);
    }
    .horizontal {
        border-top: 1.4px solid #78da3f;
        border-left: 1.4px solid #78da3f;
        border-right: 1.4px solid #78da3f;
        width: 248px;
        height: 10px;
        position: absolute;
        top: calc(var(--fromTop) * 1px + var(--top) * 1vw);
        left: calc(var(--left) * 1vw + 40px);
    }
    
    #terrain {
        display: none;
    }
    footer {
        position: absolute;
        left: calc(var(--left) * 1vw);
        bottom: 16px;
        width: calc(100vw - var(--left) * 2vw);
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
    button {
        font-family: 'Poppins';
        width: 100px;
        height: 28px;
    }
    
    a:hover {
        font-weight: 600;
    }
    form div{
        padding: 3px;
    }
    label {
        min-width: 150px;
        display: inline-block;
        text-align: left;
    }
    input[type="text"] {
        background: rgb(255, 255, 255);
        border: 2px solid rgb(255, 255, 255);    
        width: 90px;
        height: 16px;
        font-family: 'Poppins';
        display: inline;
    }
    input[type="text"]:hover {
        background: rgb(255, 255, 255);
        border: 2px solid rgb(172, 172, 172);
    }
    input[type="text"]:focus {
        background: rgb(255, 255, 255);
        border: 2px solid rgb(255, 255, 255);
    }
    #startButton:hover {
        border: 2px solid rgb(22, 102, 22);
    }
    #resetButton:hover {
        border: 2px solid rgb(75, 75, 75);
    }
    .rightForm {
        display: block;
    }
    
}

/*-------------------------------------------------------------------------------------------------mobile------------*/
@media only screen and (max-width: 800px) {
    body {
        padding: 0px;
        width: 100vw;
    }
    h1 {
        position: absolute;
        font-size: 7vw;
        margin-top: 0px;
        top: 1.8vw;
        left: 2.8vw;
        z-index: 10000;
    }
    canvas {
        margin-left: -10vw;
        width: 200vw;
    }
    .leftForm {
        margin-top: 26px;
        margin-left: 2.8vw;
        width: calc(100vw - 2.8vw * 2);
        border-top: 1.4px solid #78da3f;
    }    
    #resetButton {
        margin-top: -30px;
        z-index: 100;
        margin-left: calc(2.8vw + 40px);
    }
    #startButton {
        background: rgb(22, 184, 22);
        border: 2px solid rgb(22, 184, 22);
        margin-left: calc(2.8vw + 168px);
        margin-top: -30px;
        z-index: 100;
    }
    #resultarticle {
        margin-top: 26px;
        margin-left: 2.8vw;
        min-height: 160px;
        max-width: calc(100vw - 5.6vw);
        border-top: 1.4px solid #78da3f;
        border-bottom: 1.4px solid #78da3f;
    }
    ul {
        padding-left: 0px;
    }
    #terrain {
        display: none;
    }
    
    footer {
        margin-top: 10px;
        text-align: center;
        width: calc(100vw - 16px);
    }
    button {
        font-family: 'Poppins';
        width: 100px;
        height: 28px;
    }
    form div{
        padding: 5px;
    }
    label {
        min-width: 150px;
        display: inline-block;
        text-align: left;
    }
    input[type="text"] {
        background: rgb(255, 255, 255);
        border: 2px solid rgb(255, 255, 255);    
        width: 90px;
        height: 16px;
        font-family: 'Poppins';
    }
    input[type="text"]:focus {
        background: rgb(255, 255, 255);
        border: 2px solid rgb(255, 255, 255);
    }
    #startButton:focus {
        border: 2px solid rgb(22, 102, 22);
    }
    #resetButton:focus {
        border: 2px solid rgb(75, 75, 75);
    }
}