@import url("font.css");

:root {
    --red: #ff4747;
    --light-red: rgb(255, 230, 230);
    --black: #262523;
    --light-gray: #f5f1ee;
    --dark-gray: #8d8680;;
    --gray: #ccc;
    --off-white: #fffef9;
    --text-font: "Larsseit", Helvetica Neue, Helvetica, Arial, sans-serif;
    --basic-font-size: 1rem;
    --title-font: "Ardina Title Black", serif;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--off-white);
    color: var(--black);
    font-family: var(--text-font);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font);
}

h1, footer h2 {
    font-size: var(--basic-font-size);
    font-family: var(--text-font);
    text-transform: uppercase;
    letter-spacing: calc(var(--basic-font-size)/ 20);
    font-weight: 700;
}

h2 {
    font-size: calc(4 * var(--basic-font-size));
    line-height: 1em;
}

h3 {
    font-size: calc(2.5 * var(--basic-font-size));
    line-height: 1.1em;

}
h4 {
    font-family: var(--text-font);
    text-transform: uppercase;
    font-size: var(--basic-font-size);
    color: var(--dark-gray);
    font-weight: 400;
    letter-spacing: calc(var(--basic-font-size)/ 12);
    font-weight: 700;
}

p, li  {
    font-family: var(--text-font);
    font-size: calc(1.25 * var(--basic-font-size));
    letter-spacing: calc(var(--basic-font-size)/ 56);
    line-height: 1.5em;
}

li {
    list-style-type: disc;
    list-style-position: outside;
    margin-left: 1em;
}

a {
    font-family: var(--text-font);
    color: var(--red);
    text-decoration: none;
}

a {
    font-size: var(--basic-font-size);
    color: var(--red);
    text-decoration: none;
    transition: all 0.5s;
}

a:hover {
    color: var(--dark-gray);
}

p a {
    font-size: calc(1.25 * var(--basic-font-size)); 
}

/* HEADER */
header, footer {
    background-color: var(--off-white);
}
header nav a , footer nav a {
    text-transform: uppercase;
    padding: 0 2rem 0 0;
    letter-spacing: calc(var(--basic-font-size)/ 12);
}

/* HOME SCREEN WORK SECTION */
.hero {
    background-color: var(--light-gray);
    padding: 2rem;
    color: var(--black);
    height: 65vh;
    position: relative;
    border-top: 6rem solid var(--light-gray);
}

.hero #hero-img {
    background-image: url(assets/images/ju-home.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--red);
    position: absolute;
    bottom:-2rem;
    width: 100%;
    height: 100%;
}

#hero-outclass {
    background-image: url(assets/images/hero-outclass.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--red);
    height: 67vh;
    width: 100%;
}

#hero-mine {
    background-image: url(assets/images/hero-mine.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--red);
    height: 67vh;
    width: 100%;
}

.disable {
    color: var(--gray);
}

/* ARTICLE */

h5 {
    font-size: calc(1.5 * var(--basic-font-size));
}

p.text-body  {
    font-size: calc(1.5 * var(--basic-font-size));
}

blockquote.text-body  {
    font-family: var(--text-font);
    font-size: calc(2 * var(--basic-font-size));
    line-height: 1.25em;
    border-left: 2px solid var(--gray);
    font-style: italic;
}

ul.text-body li {
    font-size: calc(1.5 * var(--basic-font-size));
    line-height: 1.25em;
    list-style-type: disc;
}

article img {
    display: block;
    width: 100%;
}

.card {
    padding: 2rem;
    background-color: var(--light-gray);
}

.card h4 {
    color: var(--red);
    line-height: 1.25em;
    font-family: var(--text-font);
}

.card span {
    line-height: 1.25em;
    color: var(--dark-gray);
}

.card li {
    line-height: 1.25em;
    font-size: calc(1.25 * var(--basic-font-size));
}

/* FOOTER */
footer div{
    border-top: 1px solid var(--gray);
}