/*
 * Theme Name: Ross Gullen Theme
 * Author: Ross Gullen Studio
 */

:root {
	/* Primitive Design Tokens */
	--color-base-midnight-navy: hsl( 208.6, 38.2%, 10.8%);
	--color-base-warm-ivory:    hsl(  36.9, 37.1%, 93.1%);
	--color-base-signal-coral:  hsl(  10.9, 100.0%,  64.5%);
	--color-base-cool-slate:    hsl( 206.3, 10.1%, 69%);

	/* Semantic Design Tokens */
	--color-primary:   var(--color-base-midnight-navy);
	--color-secondary: var(--color-base-warm-ivory);
	--color-accent:    var(--color-base-signal-coral);
	--color-tertiary:  var(--color-base-cool-slate);
}

:root .dark {
	/* Dark Mode Semantic Design Tokens */
	--color-primary:   var(--color-base-warm-ivory);
	--color-secondary: var(--color-base-midnight-navy);
	--color-accent:    var(--color-base-signal-coral);
	--color-tertiary:  var(--color-base-cool-slate);
}

.logo {
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 900;
    padding: 20px;
}

.text-title {
    font-family: 'Open Sauce Two', 'arial','helvetica', sans-serif;
    font-size: 2.5rem;

}

.text-section {
    font-family: 'Open Sauce Two', 'arial','helvetica', sans-serif;
    font-size: 1.875rem;
}

.text-body {
    font-family: 'Open Sauce Two', 'arial','helvetica', sans-serif;
    font-size: 1.125rem;
}

.button {
    display: block;
    unset: all;
    background: var(--color-accent);
    color: var(--color-primary);
    text-decoration: none;
    padding: 20px;
    width: 240px;
    font-weight: 800;
}

body {
        width: 100%;
	color: var(--color-primary);
        max-width: 1280px;
        margin: 0px auto;
}

nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

nav ul.menu {
    padding: 0px;
    display: none;
}

nav.open ul.menu {
    display: block;
    position: absolute;
    left: 0px;
    top: calc(20px + 20px + 1.125rem + 20px);
    width: 100%;
    min-height: 50%;
    background-color: var(--color-primary);
}

nav ul.menu {
    list-style: none;
    color: var(--color-secondary);
}

nav ul.menu a {
    color: var(--color-secondary);
}

nav #mobile-menu-toggle button {
    all: unset;
    padding: 20px;
}

nav #mobile-menu-toggle button:focus-visible{
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

header {
    100%;
}

header .message {
    font-size: 1.875rem;
    font-weight: 800;
}

header h1 {
    text-transform: uppercase;
    padding: 20px;
    font-size: 2.2rem;
    width: calc(100% - 20px - 20px);
}

header .tags{
    text-transform: uppercase;
}

header video {
    width: calc(100% - 20px - 20px);
    margin: 20px;
}

header p {
    padding: 0px 20px;
}

header section#marquee {
    width: 100%;
}

header section#marquee ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0px;
    list-style: none;
}

header section#marquee ul img {
    width: 240px;
}

main {
    width: calc(100% - 20px - 20px);
    padding: 0px 20px;
}

main h2 {
    padding 20px;
    font-size: 1.875rem;
}

main #selected-works ul {
    list-style: none;
}

main section#cta {
    margin: 20px auto;
    height: calc(1.125rem + 20px + 20px);
}

footer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: var(--color-primary);
    margin-top: 0px;
    margin-bottom: auto;
}

footer div {
    min-width: 320px;
}

footer div p, footer div a {
    padding: 20px;
    text-decoration: none;
    color: var(--color-secondary);
}

footer div ul {
    padding: 0px;
    display: flex;
    list-style: none;
    height: 100%;
}

footer div ul li {
    padding: 20px 0px;
    text-decoration: none;
    color: var(--color-secondary);
}

footer div ul li:after {
    content: "/";
    margin: 0 8px;
}

footer div ul li:last-child:after {
    content: "";
    margin: 0;
}

@media screen and (min-width: 425px){

.text-title {
    font-family: 'Open Sauce Two', 'arial','helvetica', sans-serif;
    font-size: 4rem;

}

.text-section {
    font-family: 'Open Sauce Two', 'arial','helvetica', sans-serif;
    font-size: 2.5rem;
}

.text-body {
    font-family: 'Open Sauce Two', 'arial','helvetica', sans-serif;
    font-size: 1.125rem;

}

header nav #mobile-menu-toggle {
    display: none;
}

header nav ul.menu {
    display: flex;
    flex-direction: row;
}

header nav .menu a {
    text-decoration: none;
    color: var(--color-primary);
    padding: 20px;
}

header p#message br {
    display: none;
}

}