src/app/component/word/random/random-top.component.scss
@use '../../../style/colour' as colour;
@use '../../../style/font' as font;
@use '../../../style/mixin' as mxn;
article {
text-align: center;
color: #ffffff;
// styling it exactly the same as an h1
a {
font-family: 'roboto-mono-medium', font.$default-font;
letter-spacing: 3.6px;
font-weight: 500;
font-size: 3.75rem; // 60px
font-style: normal;
color: #ffffff;
@include mxn.transition;
cursor: pointer;
word-wrap: anywhere;
&:hover {
color: colour.$primary;
}
}
p {
font-size: .75rem;
padding-bottom: 1rem;
padding-top: .5rem;
}
span {
color: #ffffff;
&:last-of-type {
color: colour.$secondary;
}
}
}
@media screen and (max-width: 600px) {
article > a {
font-size: 2rem;
}
}