You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
76 lines
1.4 KiB
CSS
76 lines
1.4 KiB
CSS
1 year ago
|
:root{
|
||
|
|
--color1: #418;
|
||
|
|
--color2: #ff0;
|
||
|
|
}
|
||
|
|
|
||
|
|
a{text-decoration: none;}
|
||
|
|
|
||
|
|
body{
|
||
|
|
font-family: monospace;
|
||
|
|
background-color: var(--color1);
|
||
|
|
color: var(--color2);
|
||
|
|
margin: 2rem auto;
|
||
|
|
max-width: 60rem;
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
.button{
|
||
|
|
font-family: monospace;
|
||
|
|
padding: 0.5em 1em;
|
||
|
|
border-radius: 2em;
|
||
|
|
background: var(--color2);
|
||
|
|
color: var(--color1);
|
||
|
|
border: none;
|
||
|
|
margin: 0 0.25rem 0.25rem 0;
|
||
|
|
}
|
||
|
|
button:after{
|
||
|
|
content: " →";
|
||
|
|
break-before: avoid;
|
||
|
|
}
|
||
|
|
h1.button{font-size: 1.4rem;}
|
||
|
|
.button:hover{opacity: 0.7; cursor: pointer;}
|
||
|
|
.close{float: right; text-decoration: none;}
|
||
|
|
.close:hover{opacity: 0.7}
|
||
|
|
img{width: 100%; margin-bottom: 1rem;}
|
||
|
|
input{
|
||
|
|
margin: 0 0 0.5rem;
|
||
|
|
}
|
||
|
|
input[type="submit"]{
|
||
|
|
background-color: var(--color2);
|
||
|
|
color:var(--color1);
|
||
|
|
font-size: 1.5rem;
|
||
|
|
padding: 0.5rem;
|
||
|
|
font-family: monospace;
|
||
|
|
font-weight: 600;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
#floating-form{
|
||
|
|
position: fixed;
|
||
|
|
z-index: 2;
|
||
|
|
background-color: var(--color2);
|
||
|
|
color:var(--color1);
|
||
|
|
width: 20rem;
|
||
|
|
padding: 2rem;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
h4{margin: 0;}
|
||
|
|
textarea{
|
||
|
|
width: 100%;
|
||
|
|
min-height: 20rem;
|
||
|
|
margin: 0 0 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.two-col{
|
||
|
|
float: left;
|
||
|
|
padding-right: 2rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
}
|
||
|
|
@media screen and (min-width: 768px){
|
||
|
|
.two-col{max-width: calc(50% - 4rem);}
|
||
|
|
p{font-size: 1rem;}
|
||
|
|
body{font-size: 1.5rem;}
|
||
|
|
|
||
|
|
@media screen and (max-width: 767px){
|
||
|
|
body{font-size: 3rem;}
|
||
|
|
}
|