memory

Play Memory
Log | Files | Refs

main.css (2551B)

      1 body{
      2 	margin: 0;
      3 	padding: 0;
      4 }
      5 .container{
      6 	display: flex;
      7 	flex-direction: column;
      8 	align-items: center;
      9 	min-height: 100vh;
     10 	background: #282828; 
     11 }
     12 
     13 .header{
     14 	display: flex;
     15 	justify-content: space-between;
     16 	align-items: center;
     17 	width:100%;
     18 	height:65px;
     19 	margin-bottom: 5px;
     20 }
     21 
     22 .menu{
     23 	display: flex;
     24 	flex-direction: column;
     25 }
     26 
     27 #menu{
     28 	color: #fea400;
     29 }
     30 
     31 
     32 #menu div{
     33 	border-bottom: 1px solid #8a8a82;
     34 	margin: 2px;
     35 	padding: 2px;
     36 }
     37 
     38 .menu_btn{
     39 	cursor: pointer;
     40 	margin-left: 20px;
     41 	height: 40px;
     42 	width: 40px;
     43 	display: flex;
     44 	justify-content: space-between;
     45 	flex-direction: column;
     46 }
     47 
     48 .line{
     49 	display: block;
     50 	height: 5px;
     51 	width: 100%;
     52 	border-radius: 10px;
     53 	background: #fea400;
     54 }
     55 .title{
     56 	font-size:x-large;
     57 	font-weight: bold;
     58 	color:#fea400;
     59 }
     60 .restart_button{
     61 	cursor: pointer;
     62 	height: 40px;
     63 	margin-right: 20px;
     64 }
     65 .restart{
     66 	width: 40px;
     67 	height: 40px;
     68 }
     69 
     70 .game_state{
     71 	display: grid;
     72 	width: 95%;
     73 	grid-template-columns: auto auto;
     74 	margin: 10px;
     75 	font-weight: bold;
     76 	color:#fea400;
     77 	justify-content: space-between;
     78 }
     79 #game_time{
     80 	grid-row: 1;
     81 }
     82 #found_pairs{
     83 	grid-row: 1;
     84 }
     85 
     86 #progress_bar{
     87 	grid-row: 2;
     88 	grid-column-start: 1;
     89 	grid-column-end: 3;
     90 	margin-top:10px;
     91 	display: block;
     92 	height: 5px;
     93 	width: 100%;
     94 	border-radius: 10px;
     95 	background: #fea400;
     96 }
     97 .game_info .div{
     98 	margin: 5px;
     99 }
    100 .game_board{  
    101 	margin-left: auto;
    102 	margin-right: auto;
    103 	display: flex;
    104 	flex-wrap: wrap;
    105 	aspect-ratio: 1 / 1;
    106 	width: 95%;
    107 	align-items: center;
    108 	justify-content: space-between;
    109 }
    110 
    111 .card{
    112 	cursor: pointer;
    113 	width: calc(16.66% - 10px);
    114 	height: calc(16.66% - 10px);
    115 	margin: 5px;
    116 	display: flex;
    117 	align-items: center;
    118 	justify-content: center;
    119 	background:#df9a06;
    120 	box-shadow: 1px 1px 1px rgba(42, 42, 42, 0.3);
    121 }
    122 
    123 .card p{
    124 	color: #282828;
    125 }
    126 
    127 .card.inactive {
    128 	background:#278704;
    129 }
    130 
    131 .card.open {
    132 	background:#5e3ccdd5;
    133 }
    134 
    135 .footer{
    136 	color:#fea400;
    137 	width: 95%; 
    138 	justify-content: center;
    139 	display: flex;
    140 	margin-bottom: 25px;
    141 }
    142 
    143 .footer ul{
    144 	list-style-type: none;
    145 	margin: 0;
    146 	padding: 0;
    147 }
    148 
    149 @media (orientation: landscape) {
    150 	.game_board{
    151 		width: 80vh;
    152 	}
    153 	.header{
    154 		width: 650px;
    155 	}
    156 }
    157 
    158 @media (min-width: 650px) {
    159 	.game_board{  
    160 		width: 630px;
    161 	}
    162 	.game_state{
    163 		width: 600px;
    164 	}
    165 	.header{
    166 		width: 650px;
    167 	}
    168 	.menu{
    169 		width: 630px;
    170 	}
    171 }
    172 
    173 @media (min-width: 1400px) {
    174 	.footer{
    175 		position: absolute;
    176 		width: auto;
    177 		top: 100px;
    178 		right: 5%;
    179 		flex-direction: column;
    180 	}  
    181 }
    182 
    183 .done {
    184 	border: 5px solid green;
    185 	box-sizing: border-box;
    186 }
    187 
    188 .clicked {
    189 	border: 5px solid red;
    190 	box-sizing: border-box;
    191 }
    192 
    193 #login {
    194 	color: #df9a06;
    195 }