/*Desktop*/
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1, h2, h3
{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: midnightblue;
    text-align: center;
    margin: 2%;
}

p 
{
    line-height: 1.5;
    margin: 2%;
}

a {text-decoration: none;}

footer
{
    width: 100%;
    margin-top: 5%;
    padding: 1%;
    color: silver;
    text-align: center;
    background-color: #f2f2f2;
}

footer p { margin: 0; }

.header
{
    width: 100%;
    max-width: 3840px;
    background-color: crimson;
    background-image: url("images/header.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header img
{
    width: 15%;
    max-width: 512px;
    height: auto;
    margin: 2.5%;
}

.nav
{
    width: 100%;
    background-color: crimson;
    margin-bottom: 2%;
}

.nav ul
{
    width: 50%;
    margin: auto;
    display: flex;
    justify-content: center;
    list-style-type: none;
}

.nav li
{
    width: 60px;
    margin: 1.5% 1.5%;
    text-align: center;
}

.nav a
{
    color: white;
    text-decoration: none;
}

.nav a:hover 
{
    font-weight: bold;
    text-shadow: 0 1px 4px dimgrey;
}

.container
{
    width: 70%;
    max-width: 1024px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.message
{
    font-size: large;
    font-weight: bold;
    text-align: center;
}

.carousel
{
    position: relative;
    height: auto;
    margin: 2%;
    overflow: hidden;
    border-radius: 8px;
}

.gallery
{
    display: flex;
    min-width: 100%;
    transition: transform 0.5s ease;
}

.gallery img
{
    width: 100%;
    height: auto;
    flex-shrink: 0;
}

.controls
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 32px;
    color: white;
    background-color: transparent;
    text-shadow: 0 0 4px grey;
    opacity: 0;
    border: none;
    cursor: pointer;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.controls:focus { outline: none; }

.controls.prev{ left: 2%; }

.controls.next { right: 2%; }

.carousel:hover .controls
{
    opacity: 1;
    pointer-events: auto;
}

.schedule
{
    position: absolute;
    text-align: center;
    bottom: 5%;
    width: 100%;
}

.item
{
    height: 6px;
    width: 6px;
    margin: 0 6px;
    display: inline-block;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.item.active
{
    background-color: crimson;
    box-shadow: 0 0 8px lightpink;
}

#badge
{
    width: 15%;
    max-width: 256px;
    height: auto;
    flex-shrink: 0;
}

.go-to
{
    margin: 2%;
    padding: 1% 2%;
    background-color: crimson;
    border: none;
    text-decoration: none;
    font-size: larger;
    color: white;
    transition: background-color 0.3s ease;
}

.go-to:hover
{
    background-color: #a30f2d;
    transition: background-color 0.3s ease;
}

/*About*/

.section
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 2%;
}

.section h2 { margin-bottom: 1%; }

.section h3 { margin-top: 1%; }

.photo
{
    margin: 2%;
    width: 80%;
    max-width: 1536px;
    height: auto;
}

.crest
{
    width: 10%;
    max-width: 160px;
    height: auto;
    flex: 0 0;
}

/*Contact*/

.contact { width: 100%; }

.contact h3 { text-align: left; }

form
{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 2%;
    margin: 2%;
}

input[type=text], input[type=email], textarea, button
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: medium;
    padding: 0.5%;
    margin: 1% 0;
}

input[type=text], input[type=email] { width: 40%; }

textarea { resize: vertical; }

form button 
{ 
    display: block;
    width: 10%;
    min-width: 100px;
    padding: 1%;
    border: none;
    color: white;
    text-align: center;
    background-color: crimson;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}

form button:hover
{
    background-color: #a30f2d;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

/*Mobile*/

@media only screen and (orientation: portrait)
{
    h1, h2, h3, p { margin: 5%; }

    h1 { font-size: x-large; }

    .header img
    {
        width: 35%;
        margin: 5%;
    }

    .nav li { margin: 5% 15%; }

    .container { width: 80%; }

    .carousel { margin: 5%; }

    .carousel:hover .controls { visibility: hidden; }

    #badge
    {
        width: 30%;
        max-width: 256px;
    }

    .go-to { padding: 2.5% 5%; }

    .message { margin: 5%; }
  
    footer { padding: 5%; }

    /*About*/

    .crest { width: 30%; }

    .photo { width: 90%; }

    /*Contact*/
    
    form { padding: 5%; };

    input[type=text], input[type=email], textarea
    {
        padding: 1%;
        margin: 2% 0;
    }

    input[type=text], input[type=email] { width: 100% };

    form button 
    {
        padding: 3%;
        margin: 4% 50%;
        transform: translateX(-50%);
    }
}