@font-face { font-family: Brandon; src: url('Media/Fonts/Brandon Text/BrandonText-Regular.otf'); } 
@font-face { font-family: Brandon; font-weight: bold; src: url('Media/Fonts/Brandon Text/BrandonText-Bold.otf');}
@font-face { font-family: Brandon; font-style: italic; src: url('Media/Fonts/Brandon Text/BrandonText-RegularItalic.otf');}


body {
    padding: 2%;
    margin: 2%;

    font-family: Brandon, Avenir, Arial, Helvetica, sans-serif;
    background-color: #ffffff
  }
.buttonDivs{
    text-align: center;
    width:25%;
    height:25%;
}

.buttonDivs{
    position:absolute;
    text-align: center;
    transition: .5s;
    z-index: 2;
}

#firstTitle{
    font-size:30pt;
      font-family: Brandon;
     font-style: italic;
}

  .mainButtons{
    /* transform: scale(); */
    font-size:16pt;
    position: relative;
    margin:auto;
    left:0px;
    width:80%;
    height:90%;
    z-index: 3;
    font-family: Brandon;
    font-weight:bold;
    border:solid;
    border-radius: 20px;
    border-width: 5px;
    border-color:  #3D3935;
    background-color:#ffffff;
    color:#3D3935;
    transition:.5s;
  }

  #button04{
    font-size: 12pt;
  }

  .column01{
    left:0%;
  }

  .column02{
    left:25%;
  }

  .column03{
    left:50%;
  }
  .column04{
    left:75%;
  }
  .row01{
    top:20%;
  }
  .row02{
    top:45%;
  }
  .row03{
    top:70%;
  }

  .mainButtons:hover{
    z-index: 4;
    transform:scale(1.1)
  }

  .mainButtons:focus{
    z-index: 4;
    transform:scale(1.1)
  }

#returnButtonClicker{
  font-size:calc(12px + 1vw);
  bottom:7%;
  position: fixed;
  margin:auto;
  width:calc(80px + 1vw);
  height:calc(40px + 2vw);
  z-index: 8;
  font-family: Brandon;
  font-weight:bold;
  border:solid;
  border-radius: 20px;
  border-width: 5px;
  border-color:  #3D3935;
  background-color:#ffffff;
  color:#3D3935;
  transition:.5s;
}

#returnButtonClicker:hover{
   transform:scale(1.1);
}

#returnButtonClicker:focus{
    transform:scale(1.1);
 }

.sideDivs{
    position:absolute;
    padding:00px;
    /* background-color: #00000044; */
    transition: .5s;
}
.blueCanvas{
    color:#3D3935;
    background-color: #ffffff;
    margin: auto;
    padding: 0px;
    width: 100%;
    text-align: center;
    position:fixed;
    top:0px;
    left:0px;
    z-index:1;
    /* background-color: #1b1b1b; */
}


.blueCanvasOne{
    z-index: -1;
}

.principleTitles{
    z-index:2;
    /* position:fixed; */
    top:0vh;
    font-family: Brandon;
    font-style: italic;
    font-size: 40pt;
    /* padding: 30px; */
    margin-left:5vw;
    margin-top: 1vh;
    background-color: #ffffffdd;
    /* line-height: 2vh; */
}
#title_01{
    margin-left:0vw;
    left: 2vw;
    width:60vw;
    font-size: 7vw;
}
#title_02{
    left:20vw;
}
#title_03{
    left:2vw;
    text-justify: center;
    /* background-color: #000000; */
}



.sideParagraphs{
    position:fixed;
    z-index: 2;
    font-size: 18pt;
    background-color: #ffffffdd;
    padding:5px;
    text-align: left;
}

#pdiv01{
    position:fixed;
    z-index:3;
    top:13vw;
    left: 4vw;
    width:60vw;
    text-align:left;
    padding-right:40px;
}

#pdiv02{
    position:fixed;
    z-index:3;
    top:80px;
    left: 3.5vw;
    text-align:left;
    width:50vw;
    padding-left:0px;
}
#pdiv03{
    text-align: left;
    margin-top:80px;
    margin-left:3vw;
}
#pdiv04a{
    text-align: left;
    margin-top:20pt;
    margin-left:3vw;
    padding-right:5px;
}
.ptp{
    font-size: 16pt;
}


.principleGIFs{
    position:fixed;
    z-index:-1;
    object-fit: contain;
   }

#squashStretchGIF{
    left:68vw;
    top:0vw;
    width: 28vw;
    max-height: 98vh;
    margin:0vw;
}

#anticipationGIF{
    height: 60vw;
    left:58vw;
    top:-8vw;
    width: 38vw;
}
#stagingGIF{
   margin-top:-80px;
   padding:10px;
   width:40vw;
   height:30vw;
    /* height: 60vw;
    left:45vw;
    top:-7vw;
    width: 50vw; */
}



@media(max-width: 680px){
    /* ================ Mid-width adjustments ================ */
    .mainButtons{
        font-size:14pt;
      }
      #button04{
        font-size: 12pt;
      }
      #button10{
        font-size: 12pt;
      }
      #button02{
        font-size: 12pt;
      }
      .sideParagraphs{
        position:fixed;
        z-index: 2;
        font-size: 16pt;
    }
    .principleTitles{
        font-size: 30pt;
    }

    #firstTitle{
        font-size:25pt;
          font-family: Brandon;
         font-style: italic;
    }

    .ptp{
        font-size: 14pt;
    }
    
    }
    
    @media(max-width: 550px){
    /* ================ Narrow-width adjustments ================ */
    .principleTitles{
        font-size: 25pt;
    }
    .mainButtons{
        font-size:12pt;
      }
      #button04{
        font-size: 11pt;
      }
      #button10{
        font-size: 10pt;
      }
      #button02{
        font-size: 10pt;
      }
      #firstTitle{
        font-size:24pt;
          font-family: Brandon;
         font-style: italic;
    }
    .sideParagraphs{
        position:fixed;
        z-index: 2;
        font-size: 14pt;
    }

    .ptp{
        font-size: 12pt;
    }
    }
        
    @media(max-width: 450px){
        .principleTitles{
            font-size: 16pt;
        }
        .ptp{
            font-size: 10pt;
        }
        .sideParagraphs{
            position:fixed;
            z-index: 2;
            font-size: 13pt;
        }

        #button10{
            font-size: 8pt;
          }
          #button02{
            font-size: 8pt;
          }
        /* ================ Mobile adjustments ================ */
        }