.hex-graphic{
    position:absolute;
}

.hex-graphic.lower{
    bottom:120px;
    left:0;
}

.hex-graphic.upper{
    top:100px;
    right:0;
    opacity:1.0;
    transition:opacity 1s;
}

.hex{
    transition:opacity 1s, filter 1s;
    transform-origin: 50%;
}

.hex-graphic:not(.hover) .hex{
    transition: opacity 1s, transform 1s, filter 1s;
}

.hex-graphic.hover .hex{
    transition: opacity 1s, filter 1s;
}

.hex-graphic{
    filter:drop-shadow(0px 0px 12px black);
    transition:transform 1s;
    z-index:0;
}

.contact-form, .title, .pre-title{
    z-index:1;
    
}

.contact-form .status{
    font-size:24px;
    margin-top:10px;
}

.main-body{
    padding-top:218px;
    display:flex;
    flex-flow:column;
    overflow:auto;
}

.pre-title{
    pointer-events: none;
    text-align:center;
    font-size: 55px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.6px;
    margin:auto;
}

.title{
    pointer-events: none;
    text-align:center;
    font-size: 150px;
    font-style: normal;
    font-weight: 700;
    line-height: 125px;
    letter-spacing: -0.6px;
    margin:auto;
}

.contact-form{
    display:flex;
    flex-flow:column;
    align-items: center;
    width:70%;
    margin:auto;
    margin-top: 30px;
}

.contact-form input{
    outline:none;
    margin-top:30px;
    width: 80%;
    max-width:600px;
    font-size:24px;
    border: none;
    border-bottom: 4px solid var(--color1);
}

.contact-form input::placeholder{
    opacity:0.5;
}

.role-type{
    width:100%;
    text-align:center;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.contact-form input:focus{
    border-bottom: 4px solid var(--color1);
}

.contact-form input[type="submit"]{
    width:270px;
    height:80px;
    font-size:30px;
    border-radius:20px;
    border: 4px solid var(--color1);
    color:var(--color1);
    background-color:var(--color2);
}

.contact-form input[type="submit"]:hover{
    color:var(--color2);
    background-color:var(--color1);
}

datalist {
    flex-flow:column;
    transition:max-height 1s;
    max-width:600px;
    border: 0 none;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius:0px 0px 15px 15px;
    outline: 4px solid var(--color1);
}

datalist option {
    font-family: Bai Jamjuree, sans-serif;
    font-size: 1.0em;
    padding: 0.3em 1em;
    color: var(--color1);
    background-color: var(--color2);
    cursor: pointer;
    text-align:left;
}
  
datalist option:hover, datalist option:focus {
    color: var(--color2);
    background-color: var(--color1);
    outline: 0 none;
}

@media screen and (max-width:1500px) {

    .main-body{
        background-color:rgba(255, 255, 255, 0.5);
    }

    .hex-graphic.lower{
        width:200px;
        height:200px;
    }
    
    .hex-graphic.upper{
        width:200px;
        height:200px;
        top:100px;
    }
}

@media screen and (max-width:1000px) {
    .title{
        font-size:68px;
        background-color:rgba(255, 255, 255, 0.5);
    }
    .pre-title{
        font-size:48px;
        background-color:rgba(255, 255, 255, 0.5);
    }
    .contact-form{
        margin-top:0;
    }
    .contact-form input{
        margin-top: 15px;
    }
    .hex-graphic.upper{
        opacity:0;
    }
}