@import url('https://fonts.googleapis.com/css2?family=Abel&family=Poppins:wght@300;400;600&display=swap');

* {
    margin: 0;
    padding: 0;
}

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

video
{
	aspect-ratio: 16 / 9;
	width: 100%;
    height: auto;
    margin-bottom: 1rem;
}


:root {
    --main-bg-color: #f8cc17;
    --alt-bg-color: #e7bd13;

    --main-text-color: #252525;
    --highlight-text-color: #fa396e;
    --highlight-color-other: #2691c3;

    --font-text: itc-avant-garde-gothic-pro;
    /*Avant Garde weights: 300, 500, 700, Poppins weights: 300, 400, 600*/
    --font-heading: carbon;
    /*Carbon weights: normal: 400, 700, 900  italic: 400, 700*/
    /*Abel weight: 400 */
    
}

body {
    background-color: var(--highlight-color-other);
    color: var(--main-text-color);
    font-family: var(--font-text), 'Poppins', 'sans-serif';
}


h1, h2, h3, h4 {
    font-family: var(--font-heading), 'Abel', sans-serif;
}

h1.hidden {
    position: absolute;
    top: -10000px;
}

h2 {
    font-family: var(--font-heading);
    color: var(--highlight-text-color);
    font-size: 1.5rem;
    font-weight: 400;
    max-width: 250px;
    z-index: 11;
}

a {
    color: var(--highlight-text-color);
}

p {
    font-family: var(--font-text), 'Poppins', sans-serif;
    font-weight: 300;
}

/********** UNIVERSAL LAYOUT **********/

.placement {
    max-width: 800px;
    margin:1rem;
}

/* Header */
a.header {
    min-width: 110%;
    margin-left: -5%;
    z-index: 10;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

p.heading-blurb {
    z-index: 10;
    font-family: var(--font-heading), 'Abel', sans-serif;
    color: white;
    text-align: center;
    text-shadow: 0 0 12px #675407;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

/* Page Title */

.heading-circle {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    width:100%;
    margin:auto;
}

h2.virtual-h2 {    
    line-height: 1em;
    text-align: right;
    margin-right:2.5rem;
    max-width: 225px;
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    justify-self: center;
    align-self: center;
}

.heading-span { /* Separately colored and sized section of H2 title text */
    color: var(--highlight-color-other);
    font-size: 2.5rem;
    line-height: 1em;
} 

.heading-circle {    
    max-width: 240px;
}

/* Footer Content */

.footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    margin: 1rem 0;
}

.footer-text {
    color: white;
    font-size: 0.8rem;
    margin: 0.4rem 0;
}

.footer a {
    color: var(--main-bg-color);
}

.footer-logo {
    max-width: 80px;
    margin-top: .5rem;
    margin-bottom: .75rem;
}

.items {
    display: inline-block;
}

/********** SIDEBAR LAYOUT **********/
/* Visible at 1000px width and above */
.sidebar {
    display: none;
}

/********** HOME PAGE LAYOUT **********/

.container {
    background-color: var(--main-bg-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 8fr;
}

#content
{
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    align-self: center;
}

.subhead
{
    text-align: center;
    margin-top:1rem;
}

.body-text {
    margin: 0;
    padding: 1rem;
}

.schedule,
.portfolio-night {
    font-size: 1.25rem;
    font-weight: 400;
}
.schedule a:hover {
    color:#fff;
}

#tramline
{
grid-column: 1 / 3;
grid-row: 5 / 7;
width:100%;
display:grid;
grid-template-columns: 2rem 1.2rem 1fr 1rem;
grid-template-rows: 60px 120px 100px;
}

#firstbox
{
  grid-column: 1 / 2;
  border-top:4px solid var(--highlight-color-other);
}

#dotbox
{
  grid-column: 2 / 3;
  border-left:4px solid var(--highlight-color-other);
}

#linkbox
{
    grid-column: 3 / 4;
    align-self: center;
}

#thirdbox
{
  grid-column: 2 / 4;
  grid-row: 2 / 3;
  border-bottom:4px solid var(--highlight-color-other);
}

#fourthbox
{
    grid-column: 2 / 4;
    grid-row: 2 / 3;
    border-left:4px solid var(--highlight-color-other);

}


.svg-dot {
    fill: #fff;
    stroke:  #fff;
    z-index: 10;
    max-width: 32px;
    transition: fill 0.6s ease-out;
    margin: 1rem 0 0.6rem -1.1rem;
}


div.portfolio-night {
    width: 160px;
    height: 160px;
    padding:0.5rem;
    border-radius: 50%;
    background-color: var(--highlight-text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: end;
    align-self: center;
    grid-column: 3 / 4;
    grid-row: 2 / 4;
    margin:10px 0 0 0;
    border: 4px solid var(--highlight-color-other);
}


h2.portfolio-night-h2 {
    color: white;
}

.portfolio-night-text {
    grid-column: 1 / 3;
    grid-row: 7 / 8;
    padding:1rem;
    max-width:600px;
}

.space-above {
    margin-top: 1rem;
}

.portfolio-date {
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}

/********** SCHEDULE PAGE LAYOUT **********/

.sched-wrap {
    grid-column: 1 / 3;
    grid-row: 5;
    margin-top:1rem;
}

.one-day {
    padding:1rem;
    position: relative;
}

.one-day:nth-child(odd) {
    background-color: var(--alt-bg-color);
}

.sched-dot {
    width:30px;
    height:30px;
    background-color:white;
    border-radius:50%;
    position:absolute;
    left: -15px;
    top: 30px;
}

.date {
    font-size: 1.3rem;
    margin-top: 1rem;
    margin-left: 0.5rem;
}

.time {
    font-size: 1rem;
    margin-top: 1rem;
    margin-bottom: 0.1rem;
    font-weight: 500;
}

.school {
    color: #252525;
}

.register
{
    line-height:1.5rem;
}



/********** MEDIA QUERIES **********/


@media only screen and (min-width: 640px) {
.container
{
    grid-template-columns: 300px 1fr;
}

p.heading-blurb
{
    grid-column: 2 / 3;
    text-align: right;
    margin: 1rem;
    font-size: 1.2rem;
    max-width:30ch;
    justify-self: end;
}   

#content
{
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.subhead
{
    margin-left:1rem;
    text-align: left;
}

h2.virtual-h2
{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

.heading-circle
{
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}


} /*end 640 @media */


@media only screen and (min-width: 730px) {
   
    .portfolio-night-text
    {
        text-align: right;
        justify-self: end;
        margin-right:1rem;
    }
    
    .portfolio-date
    {
        text-align: right;
        justify-self: end;
    }
    
        

} /*end 730 @media */


@media only screen and (min-width: 1000px) {
    body
    {
        display: flex;
    }

    .placement
    {
        min-width: 800px;
        margin:1rem 0 1rem 1rem;
    }

    .sidebar{
    width: 100%;
    max-height: 1450px;
    display: grid;
    z-index: -1;
    }
    
    .sidebar-sched {
    max-height: 2500px;
    }
    
    .track-line {
    stroke-width: 6px;
    fill: none;
    }
    
    /* ------- WHITE PATH ------- */
    #path1 {
    stroke: white;
    stroke-dasharray: 1650;
    stroke-dashoffset: 1650;
    animation: dash 4s linear forwards;
    }
    @keyframes dash {
    to {
    stroke-dashoffset: 0;
    }
    }
    
    
    /* ------- YELLOW PATH ------- */
    #path2 {
    stroke: var(--main-bg-color);
    stroke-dasharray: 1650;
    stroke-dashoffset: 1650;
    animation: dash 3s linear forwards;
    }
    @keyframes dash {
    to {
    stroke-dashoffset: 0;
    }
    }
    
    #circle2 {
    stroke: var(--main-bg-color);
    fill: transparent;
    stroke-width: 4px;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: appear2 1s linear forwards 1.7s;
    }
    @keyframes appear2 {
    to {
    fill: var(--main-bg-color);
    stroke-dashoffset: 0;
    }
    }
    
    /* ------- PINK PATH ------- */
    #path3 {
    stroke: var(--highlight-text-color);
    stroke-dasharray: 1650;
    stroke-dashoffset: 1650;
    animation: dash 3s linear forwards;
    }
    @keyframes dash {
    to {
    stroke-dashoffset: 0;
    }
    }
    
    #circle3 {
    stroke: var(--highlight-text-color);
    fill: transparent;
    stroke-width: 4px;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: appear3 1s linear forwards 2.1s;
    }
    @keyframes appear3 {
    to {
    fill: var(--highlight-text-color);
    stroke-dashoffset: 0;
    }
    }