padding: .8em 1em;
border: 1px solid #4AA4DF;
border-radius: .5em;
text-transform: uppercase;
font-weight: bold;
font-size: .85rem;
margin-top: 2em;
}
@media (min-width: 500px) {
.card {
}
span {
}
.card-details {
}
a {
}
}
@media (min-width: 1000px) {
.card-details {
}
h1 {
}
p {
}
a {
}
}
/* For the width display, ignore this */
.width-container {
display: none;
}
.display-width {
display: block;
position: absolute;
right: 0;
top: 0;
background-color: #E6E6E6;
padding: .3em;
font-size: .85em;
color: black;
}
html, body {
margin: 0;
padding: 0;
}
body {
background: #202528;
color: white;
display: grid;
place-content: center;
height: 100vh;
font-family: 'Nunito', sans-serif;
}
.card {
padding: 1em;
margin: 0 1em;
background: #313A40;
border-radius: .5em;
position: relative;
}
span {
width: 5em;
height: 5em;
background: white;
position: absolute;
top: -2.5em;
border-radius: 50%;
border: 5px solid #202528;
}
h1 {
margin-top: 1.2em;
}
p {
line-height: 1.4em;
color: #8FA4B2;
}
a {
text-decoration: none;
color: #4AA4DF;
display: block;
text-align: center;
