You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
171 lines
2.8 KiB
171 lines
2.8 KiB
|
|
th, td, tr {
|
|
padding: 0.2rem;
|
|
}
|
|
|
|
th { font-size: 1rem; color: darkgray;}
|
|
|
|
th, td {
|
|
border: 1px solid gray;
|
|
}
|
|
|
|
tr {
|
|
border: 0px none transparent;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border: 0px none transparent;
|
|
}
|
|
|
|
thead { display:table-header-group; }
|
|
tfoot { display:table-footer-group; }
|
|
|
|
|
|
|
|
body {
|
|
#display: flex;
|
|
min-height: 500px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #f8a;
|
|
font-weight: 600;
|
|
font-size: 1.2em;
|
|
font-family: Verdana,"Rockwell",Helvetica,Serif;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
display: block;
|
|
font-family: Verdana,"Rockwell",Helvetica,Serif;
|
|
font-size: 50px;
|
|
width: 220pt;
|
|
height: 220pt;
|
|
background: #fff;
|
|
padding: 10px;
|
|
border: 3px;
|
|
outline: 2px;
|
|
border-radius: 50%;
|
|
color: #171717;
|
|
transition: all 200ms;
|
|
cursor: pointer;
|
|
}
|
|
input[type="submit"]:focus {
|
|
background: transparent;
|
|
color: transparent;
|
|
border: none;
|
|
border-top: solid 3px #f8a;
|
|
border-left: solid 3px #fff;
|
|
animation: spin 700ms linear infinite;
|
|
}
|
|
@keyframes spin {
|
|
to {transform: rotate(360deg);}
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: black;
|
|
width: 220px;
|
|
height: 50px;
|
|
border: none;
|
|
outline: none;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: 0;
|
|
border-radius: 10px;
|
|
border-style: solid;
|
|
}
|
|
|
|
a:before {
|
|
content: '';
|
|
background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
|
|
position: absolute;
|
|
top: -2px;
|
|
left:-2px;
|
|
background-size: 400%;
|
|
z-index: -1;
|
|
filter: blur(5px);
|
|
width: calc(100% + 4px);
|
|
height: calc(100% + 4px);
|
|
animation: glowing 20s linear infinite;
|
|
opacity: 0;
|
|
transition: opacity .3s ease-in-out;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
a:active {
|
|
color: #000
|
|
}
|
|
a:active:after {
|
|
background: transparent;
|
|
}
|
|
|
|
a:hover:before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.a:after {
|
|
z-index: -1;
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #111;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
@keyframes glowing {
|
|
0% { background-position: 0 0; }
|
|
50% { background-position: 400% 0; }
|
|
100% { background-position: 0 0; }
|
|
}
|
|
|
|
|
|
|
|
input[type="text"] {
|
|
background: lightblue;
|
|
border: 4pt;
|
|
border-color: white;
|
|
color: black;
|
|
border-style: solid;
|
|
height: 50pt;
|
|
width: 80vw;
|
|
font-size: 45pt;
|
|
|
|
}
|
|
|
|
input[type="text"]:focus {
|
|
background: #f8a;
|
|
border: 4pt;
|
|
border-color: white;
|
|
color: black;
|
|
border-style: solid;
|
|
height: 50pt;
|
|
width: 80vw;
|
|
font-size: 40pt;
|
|
outline-color: black;
|
|
}
|
|
|
|
#Connect {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
#containerdiv {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto auto auto;
|
|
grid-column-gap: 4vw;
|
|
justify-content: center;
|
|
}
|
|
|
|
#containerdiv2 {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-column-gap: 4vw;
|
|
justify-content: center;
|
|
}
|