:root {
    --main-colour: #ff7403;
    --main-margin: 5vw;
    --carousel-height: 40vw;
    --carousel-margin: 10vw;
    height: 100%;
    font-family: Aptos, Arial, sans-serif;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.accented-text {
    color: var(--main-colour);
    text-decoration-line: none;
}

.accented-background {
    background-color: var(--main-colour);
    color: white;
    text-decoration: none;
    padding-right: 8px;
}

#header-1 {
    display: flex;
    align-items: center;
    padding: 8px;
}

#header-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 8px;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--main-colour);
}

#main {
    flex: 1;
}

#main-headline {
    color: var(--main-colour);
}

#carousel {
    height: var(--carousel-height);
    clip-path: content-box;
}

.carousel-button {
    background-color: transparent;
    color: white;
    border: none;
    position: absolute;
    z-index: 10;
    width: var(--carousel-margin);
    height: var(--carousel-margin);
    padding: 0;
    top: 50%;
    translate: 0 -50%;
    cursor: pointer;
}

.slide-frame {
    position: absolute;
    left: 0;
    transition: left 0.5s;
    height: var(--carousel-height);
    width: 100%;
}

.slide-overlay {
    padding-left: var(--carousel-margin);
    padding-right: var(--carousel-margin);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.slide-title, .slide-link, .carousel-tagline {
    color: white;
    text-decoration: none;
}

.slide-link {
    position: relative;
    display: table;
    padding-left: 2vw;
    padding-right: 2vw;
    margin-bottom: 5vw;
}

.slide-link-arrow {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    height: 100%;
    color: var(--main-colour);
}

.emphasis-box {
    border: 1px solid var(--main-colour);
    margin: var(--main-margin);
    display: flex;
}

.margin {
    margin-left: var(--main-margin);
    margin-right: var(--main-margin);
}

.contact-form {
    border: 2px solid var(--main-colour);
    border-radius: var(--main-margin);
    margin: var(--main-margin);
    padding-left: var(--main-margin);
    padding-right: var(--main-margin);
    padding-bottom: 1em;
}

.contact-form-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--main-margin);
}

.button {
    background-color: var(--main-colour);
    color: white;
    border: none;
    padding-left: 1.5em;
    padding-right: 1.5em;
}

.quote-mark {
    color: var(--main-colour);
    font-size: 8em;
    height: 0.5em;
    position: relative;
    top: -0.1em;
}