fcc-challenges/how-was-dinner/how_was_dinner.css

103 lines
1.4 KiB
CSS
Raw Normal View History

2018-08-29 22:24:14 -07:00
html,body {
background-color: hsl(48, 93%, 73%);
color: hsl(48, 93%, 13%);
}
#title,#description {
text-align: center;
}
#title {
width: fit-content;
margin: 1rem auto auto;
padding: 1rem 5rem;
}
#main {
background-color: hsl(228, 93%, 73%);
max-width: 900px;
margin: 4rem auto auto;
padding: 1rem;
border-radius: 1rem;
border-color: hsl(48, 93%, 13%);
border-style: solid;
border-width: medium;
}
.form-div {
display: flex;
flex-wrap: wrap;
margin: .5rem 0;
}
.form-label {
flex: 1 1 200px;
min-width: 200px;
text-align: right;
padding-right: 2rem;
margin: 1rem 0;
}
.form-input {
flex: 1 1 200px;
min-width: 200px;
margin: 1rem 0;
}
#submit {
display: flex;
margin: 2rem auto;
}
@media (max-width: 500px) {
.form-div {
margin: .25rem 1rem;
}
.form-label {
text-align: left;
margin: .25rem 1rem;
}
.form-input {
margin: .25rem 1rem;
}
}
.attachment-full {
position: absolute;
right: 0px;
height: 149px;
width: 149px;
}
.githubLabel {
background-color: #00293C;
border: none;
width: 149px;
height: 0px;
position: absolute;
right: 0px;
margin-top: -10px;
}
@media (orientation: portrait) {
.attachment-full {
height: 99px;
width: 99px;
}
.githubLabel {
width: 99px;
}
}
@media (orientation: landscape) and (max-height: 400px) {
.attachment-full {
height: 99px;
width: 99px;
}
.githubLabel {
width: 99px;
}
}