/* Simple, fun, and clean styles for the school play program */

:root{
	--primary: #212529; /* dark gray (good contrast color) */
    --secondary: #13452E; /* elpheba green */
	--muted: #6b6b6b;
    --white: #e7e0d6; /* off-white page background */
	--container-width: 900px;
	--radius: 10px;
}

/*******************
** General styles **
*******************/

html {
    scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto; /* Revert to instant scrolling */
    }
}

*{box-sizing: border-box}

body{
	margin:0;
	background-color: var(--white);
	color: var(--primary);
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

@media (min-width: 769px) {
    body {
        font-size: 1.25rem;
    }
}

/****************
** Type styles **
****************/

.gelasio-body, body, p, li, a {
  font-family: "Gelasio", georgia, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.playfair-display-header, h1, h2 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

h1 {
    font-size: 4rem;
    margin: 2rem 0 0;
    line-height: 1;
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.4); */
}

@media (min-width: 769px) {
    h1 {
        font-size: 5.25rem;
    }
}

h1 span {
    display: block;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 400;
    font-family: "Gelasio", georgia, serif;
}

h2 {
    font-size: 2rem;
    margin: 1rem 0 1rem;
    line-height: 1.2;
}

@media (min-width: 769px) {
    h2 {
        font-size: 2.25rem;
    }
}

a {
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:active,a:focus,a:hover, 
.quick-links a:active, 
.quick-links a:focus, 
.quick-links a:hover,
.contact-section a:active,
.contact-section a:focus,
.contact-section a:hover {
    color: var(--white);
    background: var(--primary);
    box-shadow: 0 0 0 6px var(--primary);
    text-decoration: none;
}

a:focus {
    outline: 4px solid var(--muted);
    outline-offset: 2px;
}

/* Smooth transitions for hover effects */
@media (hover: hover) {
    a {
        transition: color .2s linear, background-color .2s linear, box-shadow .2s linear;
    }
}

/*********************
** General Elements **
*********************/

/* Visually hidden text */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.container{
	padding:1rem;
    margin-right: 2rem;
    margin-left: 2rem;
}

@media (min-width: 900px) {
    .container{
        max-width: var(--container-width);
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 1200px) {
    .container{
        margin-right: 0;
        width: 50%;
    }
}

@media (min-width: 1400px) {
    .container{
        margin-right: 0;
        width: 100%;
    }
}

main {
    padding-bottom: 2rem;
}

/* Create rows on larger screens */

@media (min-width: 769px) {

    .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 2rem;
        width: 100%;
    }

    .col-last {
        text-align: right;
    }

}

.col {
    margin-bottom: 1rem;
    flex: auto;
}

.col.col-auto {
    flex: initial;
}

.col-vertical-center {
    align-self: center;
}

/******************
** Form elements **
******************/

label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
}

select {
    display: inline-block;
    min-width: 180px;
    max-width: 260px;
    padding: 0.25rem 0.5rem;
    font-size: 0.95rem;
    border-radius: 6px;
    border: 1px solid var(--primary);
    background: #fff;
}

select:active,select:focus,select:hover {
    outline: 4px solid var(--primary);
}

@media (hover: hover) {
    select {
        transition:outline .2s linear,background-color .2s linear;
    }
}

/******************
** Page Elements **
******************/

/* Navigation */
header {
    overflow-x: hidden;
}

nav {
    /* Background image for the Tin Man */
    background-image: url('images/tin-man.jpg');
    background-size: 600px;
    background-repeat: no-repeat;
    background-position: left top;
    width: 600px;
    height: 900px;
}

@media (min-width: 1200px) {
    nav {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.quick-links {
    padding-top: 4rem;
    padding-left: 6rem;
}

.quick-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-links a {
    color: var(--primary);
    text-decoration: none;
}

/* Translate */
.translate-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 0.5rem;
}

#contact {
    background-image: url('images/lion-as-king.jpg');
    background-size: 600px;
    height: 900px;
    background-repeat: no-repeat;
    overflow-x: hidden;
}

@media (max-width: 769px) {
    #contact {
        margin: 0;
    }
}

.contact-section {
    max-width: 500px;
    padding-top: 4rem;
    padding-left: 6rem;
}

.contact-section a {
    color: var(--primary);
}

/***********
** Footer **
***********/

footer {
    border-top: 4px solid var(--primary);
    padding-top: 2rem;
    padding-bottom: 8rem;
    background-image: url('images/dorothy.png'), url('images/toto.png');
    background-position: left bottom, right bottom;
    background-repeat: no-repeat;
    background-size: 150px, 100px;
}

.email-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.social-logo {
    display: inline-block;
    margin: 0.5rem;
}

.social-logo img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

.cpsmith-logo {
    width: 120px;
    height: 120px;
    padding: 0.5rem;
    vertical-align: middle;
}

.contact {
    margin-bottom: 1rem;
}