html{

  margin:0px;
  padding:0px;
 
}

body{

  margin:0px;
  padding:0px;

}

@media (max-width:900px){

  .history-top-text{

  color:#e9b872;

  font-family:inconsolata;
  font-size:6.5vw;
  margin-top:0px;
margin-right:20%;
margin-left:20%;
padding-top:calc(130px + 1vw);
padding-bottom:15%;


}

.history-top-text p{

  margin-top:0px;
  margin-bottom:0px;
  font-weight:bold;
}

.history-top-text p:nth-child(2){

  font-size:3vw;
  margin-top:8%;
  padding-bottom:1%;
  border-bottom:solid #e9b872 1.5px;
}

.resource_entire{

  background-color: #a63d40 ;
  color:#ffffff;
  font-family:fira sans;
  padding-top:20%;
  padding-bottom:30%;
 
}

.speedrun_resource{

  display:grid;
  grid-template-columns:.3fr 2fr;
  margin-left:15%;
  margin-right:15%;
 
}

img{

    width:100%;
}

.speedrun_resource h3{

  padding:0px;
  margin:0px;
  font-size:5vw;
  font-family:inconsolata;
  color:#ffffff;
 

}
.speedrun_resource h3:hover{
  color:black;
}
  
.speedrun_text{
  margin-left:8%;
  padding-left:10%;
  border-left: solid .3vw #ffffff;
}

.speedrun_text p{

  font-size:3.5vw;
  font-weight:300;
  margin-top:10%;
  padding-bottom:20%;
}

   /*arrow containers*/

    
 .arrow-container5 {
      display: flex;
      justify-content: center;  /* Horizontally center the arrow line */
      align-items: center;      /* Vertically center */
  
      margin: 0;
       margin-top:2%;
    }

      .arrow5 {
      width:100%;  /* Length of the line */
      height: 0;
      max-width:500px;
      border-top:  .35vw solid #ffffff;  /* Line thickness and color */
      position: relative;
    }

    /* Arrowhead on the right side */
    .arrow5::after {
      content: "";
      position: absolute;                                         
      right:-1vw;                              
      top:-1.1vw;
      border-top: 1.1vw solid transparent;  /* Transparent top */
      border-bottom: 1.1vw solid transparent; /* Transparent bottom */
      border-left: 1.5vw solid #ffffff;   /* Arrowhead pointing right */
    }
  


  a{

    color:#ffffff;
  }

  a:link{

    color:#ffffff;
  }

  a:hover{

    color:black;
  }

.gdq p{

  margin-bottom:0px;
  padding-bottom:0px;
}

}

@media (max-width:900px) and (min-width:450px) {

  .history-top-text{

  color:#e9b872;

  font-family:inconsolata;
  font-size:4.5vw;
  margin-top:8%;
margin-right:20%;
margin-left:20%;
padding-top:calc(130px + 1vw);
padding-bottom:15%;


}

.history-top-text p{

  margin-top:0px;
  margin-bottom:0px;
  font-weight:bold;
}

.history-top-text p:nth-child(2){

  font-size:2vw;
  margin-top:8%;
  padding-bottom:1%;
  border-bottom:solid #e9b872 1.5px;
}

.resource_entire{

  background-color: #a63d40 ;
  color:#ffffff;
  font-family:fira sans;
  padding-top:20%;
  padding-bottom:30%;
 
}

.speedrun_resource{

  display:grid;
  grid-template-columns:.25fr 2fr;
  margin-left:15%;
  margin-right:15%;
 
}

img{

    width:100%;
}

.speedrun_resource h3{

  padding:0px;
  margin:0px;
  font-size:3.5vw;
  font-family:inconsolata;
  color:#ffffff;
 

}
.speedrun_resource h3:hover{
  color:black;
}
  
.speedrun_text{
  margin-left:8%;
  padding-left:10%;
  border-left: solid .2vw #ffffff;
}

.speedrun_text p{

  font-size:2.5vw;
  font-weight:300;
  margin-top:10%;
  padding-bottom:20%;
}

   /*arrow containers*/

    
 .arrow-container5 {
      display: flex;
      justify-content: center;  /* Horizontally center the arrow line */
      align-items: center;      /* Vertically center */
  
      margin: 0;
       margin-top:2%;
    }

      .arrow5 {
      width:100%;  /* Length of the line */
      height: 0;
      max-width:500px;
      border-top:  .2vw solid #ffffff;  /* Line thickness and color */
      position: relative;
    }

    /* Arrowhead on the right side */
    .arrow5::after {
      content: "";
      position: absolute;                                         
      right:-1vw;                              
      top:-1.1vw;
      border-top: 1.1vw solid transparent;  /* Transparent top */
      border-bottom: 1.1vw solid transparent; /* Transparent bottom */
      border-left: 1.5vw solid #ffffff;   /* Arrowhead pointing right */
    }
  


  a{

    color:#ffffff;
  }

  a:link{

    color:#ffffff;
  }

  a:hover{

    color:black;
  }

.gdq p{

  margin-bottom:0px;
  padding-bottom:0px;
}

}

@media (max-width:1920px) and (min-width:900px){

  .history-top-text{

  color:#e9b872;

  font-family:inconsolata;
  font-size:3.5vw;
  margin-top:8%;
margin-right:25%;
margin-left:25%;
padding-top:calc(130px + 1vw);
padding-bottom:20%;


}

.history-top-text p{

  margin-top:0px;
  margin-bottom:0px;
  font-weight:bold;
}

.history-top-text p:nth-child(2){

  font-size:2vw;
  margin-top:8%;
  padding-bottom:1%;
  border-bottom:solid #e9b872 1.5px;
}

.resource_entire{

  background-color: #a63d40 ;
  color:#ffffff;
  font-family:fira sans;
  padding-top:20%;
  padding-bottom:30%;
 
}

.speedrun_resource{

  display:grid;
  grid-template-columns:.2fr 2fr;
  margin-left:15%;
  margin-right:50%;
 
}

img{

    width:100%;
}

.speedrun_resource h3{

  padding:0px;
  margin:0px;
  font-size:2vw;
  font-family:inconsolata;
  color:#ffffff;
 

}
.speedrun_resource h3:hover{
  color:black;
}
  
.speedrun_text{
  margin-left:8%;
  padding-left:10%;
  border-left: solid .1vw #ffffff;
}

.speedrun_text p{

  font-size:1.5vw;
  font-weight:300;
  margin-top:8%;
  padding-bottom:20%;
}

   /*arrow containers*/

    
 .arrow-container5 {
      display: flex;
      justify-content: center;  /* Horizontally center the arrow line */
      align-items: center;      /* Vertically center */
      
      margin: 0;
       margin-top:2%;

    }

      .arrow5 {
      width:100%;  /* Length of the line */
      height: 0;
      max-width:500px;
      border-top:  .1vw solid #ffffff;  /* Line thickness and color */
      position: relative;
    }

    /* Arrowhead on the right side */
    .arrow5::after {
      content: "";
      position: absolute;                                         
       right:-.9vw;                              
      top:-.5vw;
      border-top: .5vw solid transparent;  /* Transparent top */
      border-bottom: .5vw solid transparent; /* Transparent bottom */
      border-left: 1vw solid #ffffff;   /* Arrowhead pointing right */
    }
  


  a{
  
    color:#ffffff;
  }

  /*a:link{

    color:#ffffff;
  }*/

  a:hover{

    color:black;
  }

.gdq p{

  margin-bottom:0px;
  padding-bottom:0px;
}

}

@media (min-width:1920px){

  .history-top-text{

  color:#e9b872;

  font-family:inconsolata;
  font-size:3vw;
  margin-top:8%;
margin-right:25%;
margin-left:25%;
padding-top:calc(130px + 1vw);
padding-bottom:20%;


}

.history-top-text p{

  margin-top:0px;
  margin-bottom:0px;
  font-weight:bold;
}

.history-top-text p:nth-child(2){

  font-size:1.5vw;
  margin-top:8%;
  padding-bottom:1%;
  border-bottom:solid #e9b872 1.5px;
}

.resource_entire{

  background-color: #a63d40 ;
  color:#ffffff;
  font-family:fira sans;
  padding-top:20%;
  padding-bottom:20%;
 
}

.speedrun_resource{

  display:grid;
  grid-template-columns:.2fr 2fr;
  margin-left:20%;
  margin-right:40%;
 
}

img{

    width:100%;
}

.speedrun_resource h3{

  padding:0px;
  margin:0px;
  font-size:1.5vw;
  font-family:inconsolata;
  color:#ffffff;
 

}
.speedrun_resource h3:hover{
  color:black;
}
  
.speedrun_text{
  margin-left:8%;
  padding-left:10%;
  border-left: solid .1vw #ffffff;
}

.speedrun_text p{

  font-size:1vw;
  font-weight:300;
  margin-top:5%;
  padding-bottom:20%;
}

   /*arrow containers*/

    
 .arrow-container5 {
      display: flex;
      justify-content: center;  /* Horizontally center the arrow line */
      align-items: center;      /* Vertically center */
      
      margin: 0;
       margin-top:2%;

    }

      .arrow5 {
      width:100%;  /* Length of the line */
      height: 0;
      max-width:500px;
      border-top:  .09vw solid #ffffff;  /* Line thickness and color */
      position: relative;
    }

    /* Arrowhead on the right side */
    .arrow5::after {
      content: "";
      position: absolute;                                         
       right:-.9vw;                              
      top:-.4vw;
      border-top: .4vw solid transparent;  /* Transparent top */
      border-bottom: .4vw solid transparent; /* Transparent bottom */
      border-left: 1vw solid #ffffff;   /* Arrowhead pointing right */
    }
  


  a{
  
    color:#ffffff;
  }

  /*a:link{

    color:#ffffff;
  }*/

  a:hover{

    color:black;
  }

.gdq p{

  margin-bottom:0px;
  padding-bottom:0px;
}

}