color.css

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
.content{
	margin: auto;
	width: 85%;
	
	background-color: white;
	max-width: 940px;
	 box-shadow: 0 0 6px #E5E5E5, 0 4px 10px #FCF4F0;
	 background-color: rgba(255,254,254,0.9);
}
body{
	padding: 0;
	margin: 0;
	font-family:'Titillium Web', sans-serif;
	
}
.header{
	
	position: fixed;
	z-index: 10;
	top: 0;
	width: 100%;
margin: auto;
	 backdrop-filter:blur(10px);
	 -webkit-backdrop-filter:blur(10px);
     border-bottom: 1px solid rgba(255,255,255,0.5);
     box-shadow: 0 0 6px #E5E5E5;
	font-size: 19px;
	background: rgba(255,253,254,0.95);
}


.header h5{
	padding: 9px 32px 7px 5%;

	text-align: left;
	letter-spacing: 4px;
    color: black;
    float: left;
}
.header .menu{

display: inline-table;
text-align: right;
float: right;
padding: 8px 0px 8px 39px;
margin-right: 5%;

}
.menu i{
	padding: 0;
	margin: 0;
    cursor: pointer;
	text-align: right;
	color: #D2AFF1;
}
.header a{
	text-decoration: none;
}
.dropdown{
	float: none;
	clear: both;
	
	opacity: 0;
	height: 0;
	backdrop-filter:blur(10px);
	 -webkit-backdrop-filter:blur(10px);
	  box-shadow: 0 1px 5px #E5E5E5;
	transition: opacity 0.7s ,height 1s;
	-webkit-transition: opacity 0.7s, height 1s;
	-moz-transtion:opacity 0.7s, height 1s;
	margin:0;
	border: 1px dashed #E9D7F8;
	border-top: none;
	border
	text-align: left;
	background-color: rgba(255,254,255,0.95);
	position: absolute;
	top: 100%;
	right: 5%;
	
}
.header .menu .dropdown a{
	transition-duration: 0.4s;
	background-position: 1px center;
	text-align: left;
	display: block;
	margin: 0;
	width: 100%;
font-family: sans-serif;
color: #888888;
font-size: 14px;
font-weight: 200;
padding: 12px 13px 12px 27px;
letter-spacing: 0.05em;
border-bottom: 1px solid #EFFCFA;

}
.menu:hover .dropdown{
	transition: opacity 0.7s ,height 1s;
	-webkit-transition: opacity 0.7s, height 1s;
	-moz-transtion:opacity 0.7s, height 1s;
	display: block;
	opacity: 1;
	height: auto;
}
.dropdown a:hover{
	
	

background-color: white;
	color: #DBAFF1 !important;
	background-image: url("star.jpg");
background-size: 25px 25px;
background-repeat: no-repeat;
background-position: 1px center;
}
#font-0{
	color: #F1CEAF;
}
#font-1{
color: #F1B6AF;
}
#font-2{
	color: #F1AFC3;
}
#font-3{
	color: #E2AFF1;
}
#font-4{
	color: #D2AFF1;
}
#font-5{
	color: #B7AFF1;
}

#image{
z-index: 8;
float: left;
margin-top: 6%;
	padding: 0;
text-align: center;
width: 48%;


}


/*.welCome{
	display: none;
	text-align: center;
	padding: 36px 1px;
	font-size: 130%;
	letter-spacing: 3px;
	font-style: italic;
	color: #ed9722;
    grid-row: 3;
    grid-column: 1 / span 2;
}
#wish{
	
    visibility: hidden;
}

div.welCome:hover #wish{

visibility: visible;
}*/
.header::after{
	clear: both;
	display: table;
	content: "";
}
.ques{
  margin-top: 6%;
  justify-content: center;
 text-align: center;
    padding: 9px 5px;
    width: 50%;
    float: right;
        background-color: transparent;
}
input:checked{
	font-weight: 100;
}
/*.date{
	display: none;
	grid-row: 1;
	grid-column: 1 / span 2;
	
}*/
.container{
    height: auto;
	border: none;
	
	margin: auto;
	width: 89%;
	max-width: 860px;
	min-width: 564px;
	
	margin-top: 5px;
	
	z-index: 1;
    
}

.container::after{
	clear: both;
	display: table;
	content: "";
}

.generate_color>a{
	text-decoration: none;
}
img{
	/*margin: 30px auto 25px auto; */
	width: 25%;
	height: 28%;
	min-width: 266px;
	min-height: 262px;
    margin: auto;
    
    border-radius: 50%;
    border: 3px solid seashell;
   
}
.ques{
	float: left;

letter-spacing: 2px;

}
#qu{
	color: #515255;
}

.choices{
	line-height: 1.8;
	font-weight: lighter;
}
button:enabled{
	border:  1px solid #EBC7CF;
	background-color: white;
	padding: 14px 15px;
	color:  #EBC7CF;
	font-size: 16px;
	letter-spacing: 2px;
	font-weight: lighter;
	border-radius: 2px;
	cursor: pointer;
}
button:focus{
	outline: none;
}
button:hover{
	background-color: #FFC8D2;
	color: white;
	border-color:seashell;
}
#demo, #welcome{
	background-color: #fff3f8;
	letter-spacing: 2px;
	font-weight: lighter;
	color: #4a2b96;
	width: 80%;

}
.random_color{
	margin-top: 24px;
	text-align: center;
	font-size: 56px;
	color: #FDDCCC;
	user-select: none;
}
#heart{
	color: #E1DEDE;
	font-family: "times";
	font-size: 49px;
	padding: 23px 12px 6px 12px;
}
#valid{ font-family: sans-serif;

	font-size: 17px;
  color: #E1DEDE;
  font-weight:200; 
  letter-spacing: 0.05em;
}
hr{
	border-color: transparent;
	display:block;
	margin: 25px;
}
.generate_color{
	background-color: white;
	z-index: 1;
	width: 65%;
	max-width: 700px;
	margin: auto;
	border: 3px solid #E1DEDE;
	
}
.generate_color h1{
	font-size: 23px;
	background-color: #E1DEDE;
	color: white;
	margin: 0;
	text-align: center;
	width: 100%;
	letter-spacing: 2px;
	font-weight: 500;
}
.col-1{
	text-align: center;
	width: 60%;
	float: left;
     
}
#pastel_color{
	margin-left: 3px;
	width: 95%;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	height: 140px;
	border: 2px dashed #E1DEDE;
     color: white;
	border-radius: 12px;
}
.col-2{
	
   color: #6F6F6F;
	padding: 15px 0 2px 44px;
	width: 40%;
	float: left;
	font-weight: 300;
	letter-spacing: 0.04em;
}
.col-2 a{
	color: #6F6F6F;
	font-weight: 400;
	 -moz-text-decoration-color:#E1DEDE;
	 text-decoration-color:#E1DEDE;
}
.col-2 a:hover{
	text-decoration: none;
    cursor: pointer;
}
.col-2 h2{
	font-size: 18px;
	margin-bottom: 4px;
  font-weight: 400;

}
.col-2::after{
	clear: both;
	display: table;
	
	
}
.button{
	
	clear: both;
	width: 100%;
	
	margin-top: 12px;

	
}
.button button#gcolor{
	clear: both;
	display: table;
     margin: 3px auto;
    
	padding: 6px 12px;
	background-color: #E1DEDE;
	color: white;
	border-color: #E1DEDE;
	font-size: 14px;
}
button#gcolor:hover{
	background-color: #EAE1EA;
	color: #6F6F6F;
}
.generate_color::after{
clear: both;
display: table;
content: "";
}
input[type=radio]{
	margin-right: 5px;

	opacity: 0.9;
	cursor: pointer;
	z-index: -1;
}
input[type=radio]:checked + label::before{
     margin-right: 4px;
	display: inline-block;
    margin-left: -29px;
    border-radius: 100%;
	content: " ";
	text-align: center;
	vertical-align: middle;
	border: 2px solid rgba(23,210,245,1);
	height: 22px;
	width: 22px;
	z-index: 1;
    background-color: rgba(255,254,254,0.7);
}
.form p{
	width: 100%;
	display: block;
	float: none;
	padding: 0;
	margin: 0;
	clear: both;
}

#checkmark{
	height: 10px;
	width: 10px;
	border-radius: 100%;
	margin-right: 4px;
	
	

	background-color: yellow;
	
	
}



.form p{
display: table;

}
input[type=number]{
	padding:10px 18px;
	color: hotpink;
	text-align: center;
font-size: 19px;
border-bottom: 2px solid #BBA8A8;
border-top: none;
border-left: none;
border-right: none;
background-color: transparent;
}
input:focus{
	outline: none;
}
footer{
	font-family: times;
	letter-spacing: 0.04em;
	font-weight: 100;
	display: block;
	padding: 0;
	 border-bottom: none;
	width: 100%;
	margin: 0;
	background: rgba(254,250,254,0.9);
background-clip: padding-box;
	text-align: center;
	border-top: 1px solid rgba(232,232,232,0.8);
    
}
footer #icon{
	font-size: 20px;
	vertical-align: middle;
	margin-right: 8px;
}
footer a{
display: inline-block;
text-decoration: none;
	font-size: 13px;
	padding: 6px 0;
 margin: 0 5%;
cursor: pointer;
color: #BBB8BF;
}
footer i{
	max-width: 10px;
	margin: 0;
    
	transition-duration: 0.3s;
}
footer a:hover{
	color: #D7A3F8;
}
.form{

	display: table;
	margin: 14px auto;
	font-family: times;
	font-weight: 100;
	font-size: 18px;
	line-height: 1.4;
	background-color:#EEF1F2;
	padding: 7px 37px; 
	width: 100%;
	max-width: 760px;
}
.form b{
display: block;
font-weight: 300;
line-height: 1.7;

}
[id|="checking"]{
	display: table;
	padding: 4px 6px;
	margin-top: 9px;
	border-radius: 5px;
	letter-spacing: 2px;
    color: white;
    line-height: 1.3;
}
#mobile{
	position: fixed;
	bottom: 3px;
	left: 5px;
	z-index: 9;
	background-color: #B28CE2;
	color: white;
	padding: 4px 8px;
	letter-spacing: 2px;

}

#star{
	color: hsl(57,87%,86%);
	font-size: 36px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);

}
.frame{
	
	position: relative;
	min-width: 50px;
	width: 60%;
	max-width: 600px;
	border:2px solid thistle;
	height: 200px;
	margin: auto;
}
.form img#sign{
	text-align: center;
	max-width: 230px;
min-width: 12px;
	border:none;
	border-radius: 0;
	width: 45%;
	float: left;
}
.form .sign_choose{
	line-height: 2;
	margin:  26px 5%;
	float: left;
	width: 45%;


}
.form::after{
	clear: both;
	display: table;
	content: "";
}
 .practice_test,.number-an{
 	float: left;
 }

 .number-an:after{
 	clear: both;
 	display: table;
 	content: "";
 }
 .prepare-test{

 	display: block;
 	border: 2px solid #9DF0F7;
 	width: 90%;
 	margin: auto;
 	max-width: 1025px;
 }
 .number-an{
 	display: table;
 	width: 19%;
 	margin-top: 14px;
 }
 
 [id|="an"]{
 	display: table-cell;
 	text-align: center;
 	padding: 5px 14px;
 	float: left;
 	border: 1px solid white;
 	background-color: #C9C4C6;
 	background-clip: border-box;
 	color: white;
 }
 .practice_test{
 	width: 80%;
 	padding: 0;
 }
 .prepare-test h1{
 	padding: 7px 0;
 	font-family: times;
 	text-align: center;
 	background-color: #88E2F7;
 	font-size: 190%;
 	font-weight: 100;
 	letter-spacing: 0.08em;
 	color: white;
 }
 .prepare-test:after{
 	
 	clear: both;
 	display: table;
 	content: "";

 }
 .account-info{
 	margin: auto;
 	text-align: center;
 	font-family: sans-serif;
 	font-weight: 300;
 	letter-spacing: 0.05em;
 	font-size: 18px;
 }
 #practice_canvas{
 	text-align: center;
 	font-size: 20px;
 	font-family: sans-serif;
 }
 input[type="text"]{
 	
 	padding: 5px;
 	font-size: 16px;

 }
 .user-input label{
 	text-align: right;
 	display: inline-block;

 }
 button:disabled{
color: grey;
border: currentColor;
 }
 .create_rect .display-rect{
 	border: 2px solid grey;
 	float: left;
 	width: 300px;
 }
 .create_rect::after{
clear: both;
content: "";
display: table;
 }
@media only screen and (orientation: portrait) 
{
.frame{
	width: 80%;
}

.generate_color{
     height: auto;
	width: 90%;
}
.col-1, .col-2{
	width: 50%;
}

.container{
   
	width: 99%;
	max-width: 660px;
	min-width:10px;
	margin: auto;
	margin-top: 35px;
	
	
    
}
#image{
float: none;
margin: auto;
width: 88%;
display: block;
background-color: transparent;
}
img{
	float: none;
	display: block;
	width: 65%;
	min-width: 250px;
	height: auto;
	margin: auto;
}
.ques{
	float: none;
width: 80%;
letter-spacing: 1px;
display: block;
margin: auto;

}
.content, .header{
	width: 100%;
}
.form{
	width: 90%;
	padding: 10px;
	display: table;
	float: none;
}



}