/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
}

/*Global Styles- Hanna Kivlighan Portfolio*/

/*Base page setup*/ 

{
  box-sizing: border-box;
}

body {
  background: #0d0d15;
    color: #e8e8e8;
    font-family: "Lora", Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
    margin: 0;
}

/*Header*/ 

header {
  background-image: url("/Background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    min-height: 250px;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    text-shadow: 2px 2px 6px black;
}

/*Typography*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Cinzel", serif;
  color:#d7b8ff;
    letter-spacing: .08em;
    line-height: 1.3;
}

h1 {
    font-size: clamp(2rem, 5vw, 3rem);
}

h2 {
    margin-top: 0;
}

h3 {
    color: #f2c6ff;
}
/* =========================
   LINKS
   ========================= */

a {
    color: #ff6bd6;
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: white;
    text-decoration: underline;
}


/* =========================
   MAIN CONTENT
   ========================= */

main {
    max-width: 900px;
    margin: auto;
    padding: 40px 25px;
}


section {
    margin-bottom: 70px;
}


/* =========================
   LISTS
   ========================= */

ul,
ol {
    padding-left: 30px;
}

li {
    margin-bottom: 8px;
}


/* =========================
   NAVIGATION
   ========================= */

nav {
    text-align: center;
    padding: 25px 10px;
}

nav a {
    margin: 0 15px;
    font-family: "Cinzel", serif;
}


/* =========================
   IMAGES
   ========================= */

img {
    max-width: 100%;
    height: auto;
}


/* =========================
   OPTIONAL PORTFOLIO BOXES
   Useful for film/writing/resume pages
   ========================= */

.card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(215,184,255,.25);
    border-radius: 10px;

    padding: 25px;
    margin-bottom: 30px;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

    body {
        font-size: 16px;
    }

    main {
        padding: 25px 15px;
    }

    nav a {
        display: block;
        margin: 12px;
    }
}