84 lines
1.6 KiB
CSS
84 lines
1.6 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Ranchers&display=swap');
|
|
* {margin: 0; padding: 0; box-sizing: border-box; font-family: 'Ranchers', cursive; letter-spacing: 5px;}
|
|
nav > a:hover
|
|
{
|
|
opacity: .5;
|
|
}
|
|
nav > a
|
|
{
|
|
font-size: 75px;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
margin: 20px;
|
|
display: block;
|
|
transition: opacity 500ms;
|
|
}
|
|
span.warning, span.message
|
|
{
|
|
text-align: center;
|
|
padding: 3px 5px 3px 10px;
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
}
|
|
span.warning {background-color: rgba(200,0,0,.5);}
|
|
span.message {background-color: rgba(0,200,0,.5);}
|
|
span.contrast {color: white;}
|
|
body{background-image: url('../img/watercolor.png');}
|
|
main
|
|
{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
}
|
|
section
|
|
{
|
|
flex-basis: 30%;
|
|
padding: 20px;
|
|
margin: 5px;
|
|
border: 1px solid #777;
|
|
background-color: mediumpurple;
|
|
color: black;
|
|
border-radius: 5px;
|
|
box-shadow: 0 8px 6px -6px black;
|
|
}
|
|
h3
|
|
{
|
|
margin-bottom: 15px;
|
|
}
|
|
li
|
|
{
|
|
letter-spacing: 2px;
|
|
margin: 5px;
|
|
margin-left: 25px;
|
|
}
|
|
|
|
|
|
input, select
|
|
{
|
|
padding: 8px;
|
|
margin: 5px auto;
|
|
height: 50px;
|
|
font-size: 25px;
|
|
display: inline-block;
|
|
}
|
|
select
|
|
{
|
|
padding: 0
|
|
}
|
|
form h2
|
|
{
|
|
text-align: center;
|
|
margin: 10px auto;
|
|
font-size: 30px;
|
|
margin-bottom: 50px;
|
|
}
|
|
form
|
|
{
|
|
display: block;
|
|
min-height: 400px;
|
|
margin: 20px auto;
|
|
background-color: lavender;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
}
|
|
p.warning {text-align: center; margin: 20px auto; padding: 10px; background-color: rgba(150,0,0,.5); width: 75%; border-radius: 8px; color: white; font-size: 25px;} |