body {
|
|
#display: flex;
|
|
min-height: 500px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: lightblue;
|
|
font-weight: 500;
|
|
font-size: 30pt;
|
|
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;
|
|
}
|
|
|
|
input[type="text"] {
|
|
background: #f8a;
|
|
border: 4pt;
|
|
border-color: white;
|
|
color: black;
|
|
border-style: solid;
|
|
height: 50pt;
|
|
width: 80vw;
|
|
font-size: 55pt;
|
|
|
|
}
|
|
|
|
input[type="text"]:focus {
|
|
background: lightblue;
|
|
border: 4pt;
|
|
border-color: white;
|
|
color: black;
|
|
border-style: solid;
|
|
height: 50pt;
|
|
width: 80vw;
|
|
font-size: 45pt;
|
|
outline-color: black;
|
|
}
|
|
|
|
#Connect {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
#containerdiv {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto auto;
|
|
grid-column-gap: 4vw;
|
|
}
|
|
|
|
#containerdiv2 {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-column-gap: 4vw;
|
|
}
|