@mixin mobile
  @media (max-width: 786px)
    @content

nav
  width: 100vw
  height: 8vh
  display: flex
  position: fixed
  align-items: center
  justify-content: space-around
  z-index: 999
  
  ul
    width: 60%
    display: flex
    align-items: center
    justify-content: space-around
    list-style: none
    
    li a
      font-family: 'Poppins', sans-serif
      font-size: 1.2rem
      color: black
      text-decoration: none
      
      &:hover
        font-weight: bold
      
*
  margin: 0
  padding: 0
  box-sizing: border-box

body
  overflow-x: hidden

.seal
  width: 100px
  height: 100px
  z-index: 999
  position: fixed
  right: 0
  margin-right: 15px
  margin-top: 15px
  
  &::before
    animation: spin 20s 10s infinite
    content: ''
    width: 100%
    height: 100%
    position: absolute
    background-image: url('/res/seal.png')
    background-size: cover
  
  @include mobile
    display: none

@keyframes spin
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)

section
  height: 100vh
  width: 100vw
  display: flex
  z-index: 1

#landing
  align-items: flex-start
  justify-content: center
  flex-direction: column
  padding-left: 5vw
  font-size: 4rem
  font-family: cooper-black-std, "Arial Black", sans-serif
  color: #DA3252
  line-height: 1
  background-image: linear-gradient(to right, rgba(245, 246, 252, 0.52) 50%, rgba(255, 255, 255, 0)), url("/res/banner.png")
  text-shadow: 3px 3px #000

  @include mobile
    padding-left: 0
    font-size: 2rem
    text-align: center
    align-items: center
    background: rgba(245, 246, 252, 0.52)

.subtitle
  color: #5d8db9
  font-family: "Fugaz One", cursive

#about
  display: flex
  position: relative
  flex-direction: column
  padding: 5vw 5vh 0 5vw
  height: auto

  .row
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    width: 100%
    margin-bottom: 5vh

    .caption
      display: flex
      flex-direction: column
      justify-content: center
      align-items: center
      width: 50%
      padding: 0 5vw

      h1
        font-family: "Fugaz One", cursive
        font-size: 4rem
        color: #DA3252
        line-height: 1
        margin-bottom: 5vh

      p
        font-family: "Poppins", sans-serif
        font-size: 1.5rem
        color: #5d8db9
        line-height: 1.5
        margin-bottom: 5vh
      
    .img
      width: 100%
      height: 50vh
      background-repeat: no-repeat
      background-size: contain
      background-position: center

    #experience
      background-image: url("/res/experience.jpeg")
    
    #initatives
      background-image: url("/res/initiatives.jpg")
    
    #community
      background-image: url("/res/community.jpg")
    
    @include mobile
      flex-direction: column-reverse
  
#cta
  position: relative
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  height: 30vh
  background: #FDFD96

  h1
    font-family: cooper-black-std, cursive
    font-size: 2rem
    line-height: 1
  
  h2
    font-family: "Poppins", sans-serif
    font-size: 6rem
    color: #000
    line-height: 1
    text-decoration: underline
  
  p
    font-family: cooper-black-std, sans-serif
    font-size: 1.5rem
    color: #4b4b4b 
    line-height: 4

  &:hover
    cursor: pointer
    
    p
      color: #DA3252