body {background: #111; color:#FFF; }
header, main, footer {text-align: center;}
a {color: aqua; margin: 0 4px;}
#main { max-width: 1280px; margin: auto;display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: space-evenly; align-items: flex-start;}
#left { flex: 0 0 0%;}
#right { flex: 2 0 65%;}
label { color: #FFF; margin: 10px; margin-left: auto; text-align: right;}
fieldset { border-radius: 10px;}
    fieldset legend {padding: 0 10px;}
button { font-size: 16px; border: 1px solid #FFF; width: 100px; height: 36px; border-radius: 4px; margin: 10px; padding: 4px; color: #EEE; background-color: #090;box-shadow: -2px -2px 4px inset #CCC;}
    button:hover {box-shadow: 2px 2px 4px inset #CCC; cursor: pointer;}
    button:disabled { color: #333; background-color: #CCC;}

input { font-size: 14px; width: 350px; border-radius: 4px; padding: 8px; color: #FC9; background-color: #666;}
    input.error, input:invalid {background-color: #F52; color: #FFF;}
    input:focus {color: #FC9; background-color: #666;}


#dashboard, #msgbox, #form, #show {flex-grow: 1; margin: 4px;}

#dashboard fieldset section {display: flex;flex-direction: row; justify-content:space-evenly; align-items: center;margin: 0; flex-wrap: wrap; }
#dashboard fieldset p, #msgbox fieldset p, #form fieldset p, #show fieldset p {display: flex;justify-content:center; align-items: center;margin: 0; }
#dashboard label { width: 120px;}
#dashboard span { color:#9F9; background-color: #666; width: 70px; justify-content: left; padding: 4px; border-radius: 4px;}

#msgbox fieldset section {display: flex;flex-direction: row; justify-content:space-evenly; align-items: center;margin: 0; flex-wrap: wrap;}
    #msg { height:24px; padding: 10px; font-size: 16px; color: #FC9; font-weight: 700; flex: 1}
    #msg.error { padding: 10px; font-size: 16px; color: #F00;font-weight: 700;}
    #pending { visibility: hidden; width: 10px; height: 10px; border-radius: 50%; border-width: 2px; border-style: solid; border-color: #9f9 transparent;  animation: 1.5s linear 0s infinite normal none running rotate;}
    @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg);} }

    #form fieldset {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly;}
#form #preview { width: 300px; height: 500px; margin: 0 10px; }
#form .desc { width: 360px; color: #999; font-style: italic; justify-content: flex-start; text-align: left; font-size: 12px;}

#show {display: none;}
    #show span {color: #FC9;}
    #show #nft_id { color:#9F9; background-color: #666; width: 100px; padding: 4px; border-radius: 4px; font-size: 1em;}
    #show #nft_img {margin: 10px;}