@charset "UTF-8";

body{
    width: 100%;
    height: 100%;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    background: linear-gradient(90deg,  #808ccd 50%, #c6c4d7 50%, #c6c4d7 100%);

  }

#hedder{
    margin: 3% auto;
	font-size:2.5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #6b03f4;
	text-shadow: 
		0.04em 0.02em 0 #B0BEC5, 
		0.08em 0.05em 0 rgba(0, 0, 0, 0.6);
}

.henkan{
    margin: 1% auto;
    text-align: center;
}

input[type],
text {
    padding: 3px;
    border: #3300b3 solid 1px;
    background-color: #9f9da4;
    margin: 0 auto 2%;
    color: inherit;
    font-family: inherit;
    font-size: 70%;
    letter-spacing: 0.8em;
}

form .button {
    padding: 0.7rem 0.7rem;
    margin: 0 auto;
    background: var(--mainColor);
    cursor: pointer;
}

.link{
    margin: 1.3em 0 0 2em;
    color: rgb(113, 23, 202);
    text-decoration: none;
    line-height: 1.4em;
}
.link:visited{
    margin: 1.3em 0 0 2em;
    color: rgb(64, 64, 64);
    text-decoration: none;
    line-height: 1.4em;
}

.hidari{
    margin: 3% 42% 2% 10%;
    padding: 1% 4px 1% 4px;
    background-color: rgba(236, 236, 236,0.7);
    background: linear-gradient(30deg);
    transform: rotate(-4deg);
    border-right: solid 3px #251730 ;
    border-top: solid 3px #251730 ;
    border-left: solid 3px #563c69 ;
    border-bottom: solid 3px #563c69 ;
    text-align: left;
}
.migi{
    margin: 3% 10% 2% 42%;
    padding: 1% 4px 1% 4px;
    background-color: rgba(236, 236, 236,0.7);
    background: linear-gradient(30deg);
    transform: rotate(4deg);
    border-left: solid 3px #251730 ;
    border-bottom: solid 3px #251730 ;
    border-top: solid 3px #563c69 ;
    border-right: solid 3px #563c69 ;
    text-align: left;
}