body {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif
}

.material-symbols-outlined{
    font-size: 9em;
    text-align: center;
}

.arrow {
    border: solid rgb(255, 255, 255);
    border-width: 0 6px 6px 0;
    display: inline-block;
    padding: 2.5vh;
    margin: 3vh;

  }

.arrow:hover {
    border: solid #FFC73B;
    border-width: 0 6px 6px 0;
    display: inline-block;
    padding: 2.5vh;
    margin: 3vh;

}


.black-arrow {
    border: solid rgb(0, 0, 0);
    border-width: 0 6px 6px 0;
    display: inline-block;
    padding: 2.5vh;
    margin: 3vh;
  }

  .black-arrow:hover {
    border: solid #F04F3F;
    border-width: 0 6px 6px 0;
    display: inline-block;
    padding: 2.5vh;
    margin: 3vh;
  }

  .black-arrow:active {
    border: solid #FFC73B;
    border-width: 0 6px 6px 0;
    display: inline-block;
    padding: 2.5vh;
    margin: 3vh;
  }


  
  .right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  
  .left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
  
  .up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
  }
  
  .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
/* ---------Copy & Lists--------- */
/* Paragraph styles, including margins. Consider limiting the line lengths with a maximum width. */
p {
   margin: 1em 0 0 0;
   max-width:80vw; /* check safari inspect by eyeballing */
   font-size: 1em;
   line-height: 30px;

}

.three-thirds p {
    font-size: .8em;
    line-height: 25px;
}

/* --------Headings------- */

/* Change heading typefaces, margins, letter spacing and general line heights here */
h1,
h2,
h3,
h4,
h5,

/* Change font size and more specific rules as needed per heading type */
h1 {
    font-weight: 500;
    font-size: 6em;
    color: black;
    line-height: 1.2em;
}
h2 {
    font-weight: 500;
    font-size: 2em;
    margin-bottom: 5vh;
}

h3 {
    font-size: 2rem;
    color: white;
    letter-spacing: 4px;
}
h4 {
    font-size: 1rem;
}
h5 {
    font-size: .7rem;
}
h6 {
    font-size: .5rem;
}

/* ---------Links----------- */

/* -----Text links----- */


/*
/* Hover states only work when using a mouse; focus states also work for keyboard focus */
a:hover, a:visited:hover, a:focus, a:visited:focus {
    color: rgb(246, 50, 46);
    text-decoration: underline;

}

/* Active states will work on click, on "Enter" (with keyboard), and on tap */
a:active, a:visited:active {
    color: rgb(210, 134, 20);
}

/* -----Buttons------- */
/* rules that both buttons share, like padding, corner shape, font size, line height, text decoration (underline or not) */
.primary-button, .secondary-button {
    padding: 1em 1.5em;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 1em;
}

/* rules that are unique to primary, like background colour, maybe font colour */
.primary-button {
    background-color: rgb(13, 173, 56);
}
.primary-button:hover, .primary-button:focus, .primary-button:visited:hover, .primary-button:visited:focus {
    background-color: blue;
}
.primary-button:active, .primary-button:visited:active {
    background-color: brown;
}

/* rules that are unique to secondary, like background colour, maybe font colour */

/* Additional class to add to elements to remove top margin */
.flush-top {
    margin-top: 0;
}

/*  -------Media queries----------- */

@media (min-width: 768px) {

    p {
        max-width: 55vw;
    }

    h1 {
        font-weight: 500;
        font-size: 8em;
        color: black;
    }

    h2 {
        font-weight: 500;
        font-size: 4.5em;
        padding-bottom: 1em;
        margin-bottom: 0vh;
    }   

    h3 {
        font-size: 2.5rem;
    }

    p {
        margin: 1.5em 0 0 0;
        max-width:80vw; /* check safari inspect by eyeballing */
        font-size: 1.5em;
        line-height: 40px;
     
     }

}

@media (min-width: 900px) {

    p {
        max-width: 55vw;
    }

    
    h1 {
        font-weight: 500;
        font-size: 8em;
        color: black;
    }

    h2 {
        font-weight: 500;
        font-size: 4.5em;
        margin-bottom: 0vh;
    }   

    h3 {
        font-size: 2.5rem;
    }

    p {
        margin: 1.5em 0 0 0;
        max-width:80vw; /* check safari inspect by eyeballing */
        font-size: 1.5em;
        line-height: 40px;
     
     }

}

@media (min-width: 1300px) {
 
    p {
        max-width: 55vw;
    }

    h1 {
        font-weight: 500;
        font-size: 8em;
        color: black;
    }

    h2 {
        font-weight: 500;
        font-size: 4.5em;
        padding-bottom: 1em;
        margin-bottom: 0vh;
    }   

    h3 {
        font-size: 2.5rem;
    }

    p {
        margin: 1.5em 0 0 0;
        max-width:55vw; /* check safari inspect by eyeballing */
        font-size: 1.5em;
        line-height: 40px;
     
     }
}