html{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px;
}
@media (max-width:900px){
p{
padding:0px;
margin:0px;
}
.history-top-text{
color:#a63d40;
font-family:inconsolata;
font-size:6.5vw;
margin-top:0px;
margin-right:20%;
margin-left:20%;
padding-top:32%;
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 #a63d40 1.5px;
}
/*yellow section*/
.history_yellow_sec{
background-color:#e9b872;
color:#ffffff;
display:grid;
grid-template-columns: 1.2fr 2.5fr;
}
.history_yellow_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:45% 0;
}
.history_yellow_text {
padding-top:25%;
margin-left:15%;
margin-right:15%;
margin-bottom:30%;
font-family:Fira Sans;
font-weight:300;
font-size: 3.5vw;
}
.history_yellow_text h3{
font-size:3vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.history_yellow_text h2{
font-size:4.5vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:4%;
}
.history_yellow_sec a:hover{
color:#151515;
}
.history_yellow_sec h3:hover{
color:#151515;
}
.history_yellow_sec a:visited{
color:#ffffff;
}
/*green section*/
.speedrunning_green_sec{
background-color:#90a959;
color:#ffffff;
display:grid;
grid-template-columns: 2.5fr 1.2fr ;
}
.speedrunning_green_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:70% 0;
}
.speedrunning_green_text {
padding-top:25%;
margin-left:15%;
margin-right:15%;
margin-bottom:30%;
font-family:Fira Sans;
font-weight:300;
font-size: 3.5vw;
}
.speedrunning_green_text h3{
font-size:3vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.speedrunning_green_text h2{
font-size:4.5vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:4%;
}
.speedrunning_green_sec a:hover{
color:#151515;
}
.speedrunning_green_sec h3:hover{
color:#151515;
}
.speedrunning_green_sec a:visited{
color:#ffffff;
}
/*blue section*/
.timeline_blue_sec{
background-color:#6494aa;
color:#ffffff;
display:grid;
grid-template-columns: 1.2fr 2.5fr;
}
.timeline_blue_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:90% 0;
}
.timeline_blue_text {
padding-top:25%;
margin-left:15%;
margin-right:15%;
margin-bottom:30%;
font-family:Fira Sans;
font-weight:300;
font-size: 3.5vw;
}
.timeline_blue_text h3{
font-size:3vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.timeline_blue_text h2{
font-size:4.5vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:4%;
}
.timeline_blue_sec a:hover{
color:#151515;
}
.timeline_blue_sec h3:hover{
color:#151515;
}
.timeline_blue_sec a:visited{
color:#ffffff;
}
/*red section*/
.players_red_sec{
background-color:#a63d40;
color:#ffffff;
display:grid;
grid-template-columns: 2.5fr 1.2fr ;
}
.players_red_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:80% 0;
}
.players_red_text {
padding-top:25%;
margin-left:15%;
margin-right:15%;
margin-bottom:30%;
font-family:Fira Sans;
font-weight:300;
font-size: 3.5vw;
}
.players_red_text h3{
font-size:3vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.players_red_text h2{
font-size:4.5vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:4%;
}
.players_red_sec a:hover{
color:#151515;
}
.players_red_sec h3:hover{
color:#151515;
}
.players_red_sec a:visited{
color:#ffffff;
}
/*footer*/
.footer{
display:grid;
grid-template-columns: 1fr 2fr;
background-color:#151515;
}
.entire_footer{
background-color:#151515;
color:#ffffff;
margin-top:0px;
padding-top:15%;
padding-bottom:5%;
font-family:inconsolata;
font-size:3vw;
line-height:8vw;
}
.foot_text_left{
margin-top:0px;
}
.foot_text_middle{
margin-top:0px;
}
.footer p:nth-child(1){
margin-left:35%;
margin-bottom:0%;
}
.footer p:nth-child(2){
margin-left:15%;
margin-bottom:0%;
}
.foot_me{
margin-top:0px;
margin-bottom:0px;
text-align:right;
margin-right:10%;
font-size:2.5vw;
}
.foot_text_left i{
display:none;
}
}
@media (max-width: 900px) and (min-width:450px){
.history-top-text{
padding-top:25%;
}
.history-top-text p{
font-size:6.5vw;
}
.history-top-text p:nth-child(2){
font-size:3vw;
margin-top:6%;
}
.history_yellow_text p{
font-size:2.5vw;
}
.history_yellow_text h3{
font-size:2.5vw;
}
.history_yellow_text h2{
font-size:3.5vw;
}
.history_yellow_sec{
grid-template-columns: 1fr 2.5fr;
}
.speedrunning_green_text p{
font-size:2.5vw;
}
.speedrunning_green_text h3{
font-size:2.5vw;
}
.speedrunning_green_text h2{
font-size:3.5vw;
}
.speedrunning_green_sec{
grid-template-columns: 2.5fr 1fr;
}
.timeline_blue_text p{
font-size:2.5vw;
}
.timeline_blue_text h3{
font-size:2.5vw;
}
.timeline_blue_text h2{
font-size:3.5vw;
}
.timeline_blue_sec{
grid-template-columns: 1fr 2.5fr;
}
.players_red_text p{
font-size:2.5vw;
}
.players_red_text h3{
font-size:2.5vw;
}
.players_red_text h2{
font-size:3.5vw;
}
.players_red_sec{
grid-template-columns: 2.5fr 1fr;
}
.entire_footer{
font-size:2.5vw;
}
.foot_me{
font-size:2vw;
}
.break_desk{
display:none;
}
}
@media (max-width: 1920px) and (min-width:901px){
.history-top-text{
font-family:inconsolata;
font-size:3.5vw;
color:#a63d40;
margin-top:0px;
margin-right:25%;
margin-left:25%;
padding-top:20%;
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:6%;
padding-bottom:1%;
border-bottom:solid #a63d40 1.9px;
}
.history-top-text p:nth-child(3){
font-size:2vw;
font-weight:300;
margin-left:96%;
line-height:2;
}
/*arrow containers*/
.arrow-container {
display: flex;
justify-content: center; /* Horizontally center the arrow line */
align-items: center; /* Vertically center */
margin: 0;
margin-top:2%;
}
.arrow {
width:50%; /* Length of the line */
height: 0;
margin-left:-50%;
max-width:1000px;
border-top: .15vw solid #ffffff; /* Line thickness and color */
position: relative;
}
/* Arrowhead on the right side */
.arrow::after {
content: "";
position: absolute;
right:-.7vw;
top:-.4vw;
border-top: .4vw solid transparent; /* Transparent top */
border-bottom: .4vw solid transparent; /* Transparent bottom */
border-left: .8vw solid #ffffff; /* Arrowhead pointing right */
}
/*yellow sec desktop*/
.history_yellow_sec{
font-family: Inconsolata;
background-color:#e9b872;
color:#ffffff;
display:grid;
grid-template-columns: 3.5fr 4fr;
}
.history_yellow_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:60% 0%;
}
.history_yellow_text {
padding-top: 15%;
margin-left:20%;
margin-right:20%;
margin-bottom:15%;
font-family:Fira Sans;
font-weight:300;
font-size: 1.5vw;
line-height:1.5;
padding-bottom:15%;
}
.history_yellow_text h3{
font-size:1.3vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.history_yellow_text h3:hover{
color:#151515;
}
.history_yellow_text h2{
font-size:2.5vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:0%;
}
/*green sec desktop*/
.speedrunning_green_sec{
font-family: Inconsolata;
background-color:#90a959;
color:#ffffff;
display:grid;
grid-template-columns: 4fr 3.5fr;
}
.speedrunning_green_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:60% 0%;
}
.speedrunning_green_text {
padding-top: 15%;
margin-left:20%;
margin-right:20%;
margin-bottom:15%;
font-family:Fira Sans;
font-weight:300;
font-size: 1.5vw;
line-height:1.5;
padding-bottom:15%;
}
.speedrunning_green_text h3{
font-size:1.3vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.speedrunning_green_text h3:hover{
color:#151515;
}
.speedrunning_green_text h2{
font-size:2.5vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:0%;
}
/*blue sec desktop*/
.timeline_blue_sec{
font-family: Inconsolata;
background-color:#6494aa;
color:#ffffff;
display:grid;
grid-template-columns: 3.5fr 4fr;
}
.timeline_blue_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:60% 0%;
}
.timeline_blue_text {
padding-top: 15%;
margin-left:20%;
margin-right:20%;
margin-bottom:15%;
font-family:Fira Sans;
font-weight:300;
font-size: 1.5vw;
line-height:1.5;
padding-bottom:15%;
}
.timeline_blue_text h3{
font-size:1.3vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.timeline_blue_text h3:hover{
color:#151515;
}
.timeline_blue_text h2{
font-size:2.5vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:0%;
}
/*red sec desktop*/
.players_red_sec{
font-family: Inconsolata;
background-color:#a63d40;
color:#ffffff;
display:grid;
grid-template-columns: 4fr 3.5fr;
}
.players_red_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:60% 0%;
}
.players_red_text {
padding-top: 15%;
margin-left:20%;
margin-right:20%;
margin-bottom:15%;
font-family:Fira Sans;
font-weight:300;
font-size: 1.5vw;
line-height:1.5;
padding-bottom:15%;
}
.players_red_text h3{
font-size:1.3vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.players_red_text h3:hover{
color:#151515;
}
.players_red_text h2{
font-size:2.5vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:0%;
}
.footer{
display:grid;
grid-template-columns: .7fr 1fr 1.5fr;
background-color:#151515;
}
.entire_footer{
background-color:#151515;
color:#ffffff;
margin-top:0px;
padding-top:7%;
padding-bottom:5%;
font-family:inconsolata;
font-size:1.7vw;
padding-left:12%;
}
.foot_text_left{
margin-top:0px;
}
.foot_text_middle{
margin-left:0px;
margin-top:0px;
padding-left:0px;
line-height:.9vw;
}
.footer p:nth-child(1){
margin-bottom:0%;
line-height:.9vw;
}
.footer p:nth-child(2){
margin-bottom:0%;
}
.foot_me{
margin-top:0px;
margin-bottom:0px;
text-align:right;
margin-right:10%;
font-size:1vw;
}
.footer i{
font-size:1vw;
margin-left:4%;
font-style:normal;
}
.break_mobile{
display:none;
}
.home_red_text a:link{
color:#ffffff;
}
.foot_image img{
height:auto;
margin-top:0px;
padding-left:6%;
width:8%;
margin-bottom:0px;
}
.foot_image{
margin-bottom:0px;
margin-top:26%;
margin-left:40%;
margin-right:0%;
}
.foot_image a:link{
margin:0px;
padding:0px;
}
}
@media (min-width: 1920px) {
.history-top-text{
font-family:inconsolata;
font-size:4vw;
color:#a63d40;
margin-top:0px;
margin-right:25%;
margin-left:25%;
padding-top:15%;
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:6%;
padding-bottom:1%;
border-bottom:solid #a63d40 1.9px;
}
.history-top-text p:nth-child(3){
font-size:2vw;
font-weight:300;
margin-left:96%;
line-height:2;
}
/*arrow containers*/
.arrow-container {
display: flex;
justify-content: center; /* Horizontally center the arrow line */
align-items: center; /* Vertically center */
margin: 0;
margin-top:2%;
}
.arrow {
width:50%; /* Length of the line */
height: 0;
margin-left:-50%;
max-width:1000px;
border-top: .1vw solid #ffffff; /* Line thickness and color */
position: relative;
}
/* Arrowhead on the right side */
.arrow::after {
content: "";
position: absolute;
right:-.7vw;
top:-.4vw;
border-top: .4vw solid transparent; /* Transparent top */
border-bottom: .4vw solid transparent; /* Transparent bottom */
border-left: .8vw solid #ffffff; /* Arrowhead pointing right */
}
/*yellow sec desktop*/
.history_yellow_sec{
background-color:#e9b872;
color:#ffffff;
display:grid;
grid-template-columns: 3.5fr 4fr;
}
.history_yellow_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:20% 0;
}
.history_yellow_text {
padding-top: 20%;
margin-left:20%;
margin-right:20%;
margin-bottom:20%;
font-family:Fira Sans;
font-weight:300;
font-size: 1vw;
line-height:1.5;
}
.history_yellow_text h3{
font-size:.8vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.history_yellow_text h3:hover{
color:#151515;
}
.history_yellow_text h2{
font-size:2vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:0%;
}
/*green sec desktop*/
.speedrunning_green_sec{
background-color:#90a959;
color:#ffffff;
display:grid;
grid-template-columns: 4fr 3.5fr;
}
.speedrunning_green_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:20% 0;
}
.speedrunning_green_text {
padding-top: 20%;
margin-left:20%;
margin-right:20%;
margin-bottom:20%;
font-family:Fira Sans;
font-weight:300;
font-size: 1vw;
line-height:1.5;
}
.speedrunning_green_text h3{
font-size:.8vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.speedrunning_green_text h3:hover{
color:#151515;
}
.speedrunning_green_text h2{
font-size:2vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:0%;
}
/*blue sec desktop*/
.timeline_blue_sec{
background-color:#6494aa;
color:#ffffff;
display:grid;
grid-template-columns: 3.5fr 4fr;
}
.timeline_blue_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:20% 0;
}
.timeline_blue_text {
padding-top: 20%;
margin-left:20%;
margin-right:20%;
margin-bottom:20%;
font-family:Fira Sans;
font-weight:300;
font-size: 1vw;
line-height:1.5;
}
.timeline_blue_text h3{
font-size:.8vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.timeline_blue_text h3:hover{
color:#151515;
}
.timeline_blue_text h2{
font-size:2vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:0%;
}
/*red sec desktop*/
.players_red_sec{
background-color:#90a959;
color:#ffffff;
display:grid;
grid-template-columns: 4fr 3.5fr;
}
.players_red_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:20% 0;
}
.players_red_text {
padding-top: 20%;
margin-left:20%;
margin-right:20%;
margin-bottom:20%;
font-family:Fira Sans;
font-weight:300;
font-size: 1vw;
line-height:1.5;
}
.players_red_text h3{
font-size:.8vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
color:#ffffff;
}
.players_red_text h3:hover{
color:#151515;
}
.players_red_text h2{
font-size:2vw;
font-family:Inconsolata;
padding-bottom:0px;
margin-bottom:0%;
}
.footer{
display:grid;
grid-template-columns: .7fr 1fr 1.5fr;
background-color:#151515;
}
.entire_footer{
background-color:#151515;
color:#ffffff;
margin-top:0px;
padding-top:7%;
padding-bottom:5%;
font-family:inconsolata;
font-size:1vw;
padding-left:12%;
}
.foot_text_left{
margin-top:0px;
}
.foot_text_middle{
margin-left:0px;
margin-top:0px;
padding-left:0px;
line-height:.9vw;
}
.footer p:nth-child(1){
margin-bottom:0%;
line-height:.9vw;
}
.footer p:nth-child(2){
margin-bottom:0%;
}
.foot_me{
margin-top:0px;
margin-bottom:0px;
text-align:right;
margin-right:10%;
font-size:.8vw;
}
.footer i{
font-size:1vw;
margin-left:4%;
font-style:normal;
}
.break_mobile{
display:none;
}
.home_red_text a:link{
color:#ffffff;
}
.foot_image img{
height:auto;
margin-top:0px;
padding-left:6.5%;
width:7%;
margin-bottom:10px;
}
.foot_image{
margin-bottom:10px;
margin-top:26%;
margin-left:45%;
margin-right:0%;
}
.foot_image a:link{
margin:0px;
padding:0px;
}
.history_drop, .category_drop, .section3{
font-size: 1vw;
}
/* Styling the dropdown buttons */
.history_drop, .category_drop, .section3{
margin: 0px 0px;
padding:0vw 1.3vw;
margin-top:0px;
}
}