.bayon-regular {
  font-family: "Bayon", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.archivo-uniquifier {
  font-family: "Archivo", sans-serif;
  font-optical-sizing: auto; 
  font-weight: 200;
  font-style: normal;
}

svg{
 position:absolute;
 margin-top: -40%;
 margin-left: -2%;
 filter:url(#shadow);

}

body {
  background-color: #3f5c3f;
    color: #d8d4b4;
    text-shadow: '';
    }
  
    h1 {
      color: black;
      margin-top: 20%;
      margin-left: 2%;
      margin-right: 0%;
      font-size: 7.8em;
      text-align: center;
      line-height: 98%;
      position: absolute;
      display: block;
      font-family: "Bayon", sans-serif;
      color: #d8d4b4;
      z-index: 1;
    }

     
  @media only screen and (max-width: 768px) {
    h1 {
      font-size: 5em;
    }
    h2{
      font-size: 1em;
    }
  }
  
  @media only screen and (max-width: 480px) {
    h1 {
      font-size: 2.1em;
    }
    h2{
      font-size: 0.5em;
    }
  }
  
    h2{
      color: black;
      margin-top: 39%;
      margin-left: 34%;
      margin-right: 30%;
      font-size: 1.8em;
      text-align: center;
      position: absolute;
      font-family: "Bayon", sans-serif;
      color: #d8d4b4;
      z-index: 1;
    }
  
    .CountDownClock{
      color: #c7c3a3;
      margin-top: 35%;
      margin-left: 58%;
      margin-right: 0%;
      padding: 3%;
      font-size: 7.6em;
      text-align: center;
      font-family: "Archivo", sans-serif;

     
    }

    .SunsetIntroduction{
     margin-top: -2.5%;
      margin-left:66%;
      margin-right: 10%;
      margin-bottom: 0%;
      font-size: 0.8em;
      text-align: center;
      font-family: "Archivo", sans-serif;
      position: absolute;
    
     }

    .ClockExplanation{
      margin-left: 90%;
      margin-right: 15%;
      margin-top: 15%;
      font-family: "Bayon", sans-serif;
      position: absolute;
      
    }

    .NavButton{
      margin-top: 10%;
      margin-left: 43%;
      margin-right: 38%;
      margin-bottom: 10%;
      font-size: 1.2em;
      padding: 2%;
      border-radius: 10% 78% 16% 55%;
      font-family: "Bayon", sans-serif;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 
      background-color: #1c2a1f;
      color: #c7c3a3;
      border: none;
    cursor: pointer;

    }
    @media only screen and (max-width: 768px) {
      .NavButton {
        font-size: 1em;
      }

    }
    
    @media only screen and (max-width: 480px) {
      .NavButton {
        font-size: 1em;
       
      }
    }
    

    .Quote{
      line-height: 1.5em;
      color: #c7c3a3;
      display: block;
      font-size: 3.2em;
      padding: 3%;
      margin-top: 30%;
      margin-left:5%;
      margin-right: 5%;
      margin-bottom: 7%;
      text-align: center;
      font-family: "Archivo", sans-serif;
     
    }

    @media only screen and (max-width: 768px) {
      .Quote {
        font-size: 2em;
      }

    }
    
    @media only screen and (max-width: 480px) {
      .Quote {
        font-size: 1.8em;
      }
    }

    .Container{
     
    color: #1c2a1f;

    }
    
    .SunsetText{
    
      color: #c7c3a3;
      display: block;
      padding-top: 4%;
      margin-top: 0%;
      margin-left:5%;
      margin-right: 5%;
      padding: 3%;
      text-align: left;
      height: fit-content;
      position: relative;
      font-family: "Archivo", sans-serif;
      font-size: 2.1em;
      line-height: 1.5em;
      
      
    }

    @media only screen and (max-width: 768px) {
      .SunsetText{
        font-size: 1.7em;
      }

    }
    
    @media only screen and (max-width: 480px) {
      .SunsetText {
        font-size: 1.5em;
      }
    }

    .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16 {
      stroke-miterlimit: 10;
    }

    .cls-1, .cls-4, .cls-11, .cls-13 {
      stroke: #fff;
    }

    .cls-1, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 {
      fill: #32422d;
    }

    .cls-2 {
      stroke: #0f0f0e;
    }

    .cls-2, .cls-3, .cls-11 {
      fill: #f4f3db;
    }

    .cls-3 {
      stroke: #32422d;
    }

    .cls-4, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16 {
      fill: #c7c3a3;
    }

    .cls-5 {
      stroke: #c7c3a3;
    }

    .cls-6 {
      stroke: #131412;
    }

    .cls-7 {
      stroke: #1c1c1c;
    }

    .cls-8 {
      stroke: #070707;
    }

    .cls-9 {
      stroke: #0c0c0c;
    }

    .cls-10 {
      stroke: #000;
    }

    .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16 {
      stroke-width: .4px;
    }

    .cls-12 {
      stroke: #f9f9f9;
    }

    .cls-14 {
      stroke: #fffffd;
    }

    .cls-15 {
      stroke: #fcfcf7;
    }

    .cls-16 {
      stroke: #fdfffd;
    }

    .tab{
      display: inline-block;
      margin-left: 8%;
    }