html{
margin:0px;
padding:0px;
width:100%;
height:100%;
box-sizing:border-box;
overflow-x:hidden;
}
body{
padding: 0;
margin: 0px 0px;
--nav-height:calc(80px + .5vw);
padding-top:var(--nav-height);
}
a:link{
color:#a63d40;
}
a:visited{
color:#a63d40;
}
a:hover{
color:#e9b872;
transition:ease .1s;
}
@media (max-width: 900px) {
body{
--nav-height:calc(80px + .5vw);
padding-top:var(--nav-height);
}
}
/*This is a non media query nav stuff*/
.logo {
width: 180px; /* You can adjust this size as needed */
display: block;
margin-left: 5vw;
max-width:100%;
height: auto; /* Maintain aspect ratio */
}
.navi{
background-color: whitesmoke;
width:100%;
height:var(--nav-height);
position:fixed;
top:0;
box-sizing:border-box;
padding:0px;
left:0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
transition: ease 0.5s;
z-index:1000;
}
.nav--hidden{
transform: translateY(calc(-1 * var(--nav-height)));
box-shadow:none;
}
.nav_items{
display:flex;
justify-content:space-between;
align-items:right;
width:100%;
background-color:none;
font-family:inconsolata;
font-size:1.2vw;
box-sizing:border-box;
margin-top:25px;
}
.nav_text{
display:flex;
align-items:right;
margin-right:5vw;
}
.nav_text a{
margin-left:3vw;
text-decoration:none;
}
/*this is the dropdown*/
.history_drop_content, .category_drop_content {
display: none;
position: absolute;
margin-top:20px;
padding:10px;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.history_drop_content a, .category_drop_content a {
color: black;
margin-left:0px;
padding: 20px;
text-decoration: none;
display: block;
text-align: left;
}
/* Style links on hover */
.history_drop_content a:hover, .category_drop_content a:hover {
background-color: #ddd;
color: black;
}
/* Display the dropdown content when hovering over the parent button */
.dropdown1:hover .history_drop_content, .dropdown2:hover .category_drop_content {
display: block;
}
/* Styling the dropdown buttons */
.history_drop, .category_drop, .section3{
font-size: 1.25vw;
border: none;
outline: none;
color: #6494aa;
background-color: inherit;
font-family: inconsolata;
margin: 0px 0px;
padding:0vw 1.7vw;
margin-top:10px;
}
button{
padding:0px;
}
nav .hamburger-icon{
padding:1rem;
background-color:none;
display:flex;
jusitfy-content:flex-end;
align-items:center;
}
.hamburger-menu{
background-color:none;
height:30px;
width:10px;
position: relative;
cursor:pointer;
padding:1rem;
margin-top:0px;
padding-top:0px;
margin-right:1vw;
}
.ham-bar{
width:70%;
height:2px;
background-color:white;
border-radius:5px;
position:absolute;
top:0;
left:50%;
transform:translate(-50%, -50%);
transition:transform .6s, opacity .8s, top .6s;
}
.bar-top{
top:10%;
background-color:#a63d40;
}
.bar-bottom{
top:50%;
background-color:#006796;
}
.bar-mid{
top:30%;
background-color:#e9b872;
}
.hamburger-menu.active .bar-top{
transform: translate(-50%,-50%) rotate(-315deg);
top:50%;
}
.hamburger-menu.active .bar-mid{
top:50%;
opacity:0;
}
.hamburger-menu.active .bar-bottom{
transform:translate(-50%, -50%) rotate(-225deg);
top:50%;
}
.off-screen-menu{
position:fixed;
top:0;
right:-100%;
background-color:lightgray;
height:150vh;
width:100%;
transition:right .5s;
}
.menu-text{
margin-top:50px;
font-size:20px;
padding-left:15px;
margin-left:30px;
height:37%;
}
.menu-text li{
margin-top:10px;
}
.menu_sub {
margin-left:-20px;
font-size:15px;
}
.off-screen-menu li{
color:#006796;
list-style-type:none;
}
.off-screen-menu.active{
position:absolute;
right:0;
z-index:100;
}
.hamburger-icon,
.off-screen-menu {
display: none;
}
/*this is some link styling*/
.home_blue_sec a:link{
color:#ffffff;
text-decoraton:none;
}
.home_blue_sec a:visited{
color:#ffffff;
text-decoraton:none;
}
a{
text-decoration: none;
}
.home_red_sec a:visited{
color:#ffffff;
text-decoraton:none;
}
.home_red_sec a:hover{
color:#e9b872;
}
.home_blue_sec a:hover{
color:#e9b872;
}
.entire_footer a:visited{
color:#ffffff;
text-decoraton:none;
}
.entire_footer a:hover{
color:#e9b872;
}
/* Show hamburger menu only when screen width is 900px or less */
@media (max-width: 900px) {
.hamburger-icon,
.off-screen-menu {
display: flex;
}
.hamburger-icon{
margin-right:5vw;
margin-top:1vw;
position:realtive;
z-index:100;
}
.logo {
width: 150px; /* You can adjust this size as needed */
height: 100%;
display: block;
max-width:100%;
margin-left:5vw;
margin-top:1vw;
}
/* Hide the nav items at smaller screen sizes (for mobile view) */
.nav_text {
display: none;
}
}
.menu-text a:link {
color:#6494aa;
text-decoration:none;
}
.menu-text a:visited{
color:#6494aa;
}
.menu-text a:hover{
color:#a30023;
text-decoration:underline;
font-style:italic;
transition:ease .5s;
}
//*Video*//
.video-player {
max-width:100%;
position:fixed;
overflow:hidden;
}
.video{
display:flex;
width:100vw;
height:auto;
background-color:#90a959;;
}
/*this is some more max width 900 px and below stuff*/
@media (max-width: 900px) {
.home-def {
background-color:#90a959;
margin-top:0px;
padding:0px;
font-family:inconsolata;
}
.home-desc{
margin-top:0px;
margin-right:20%;
margin-left:20%;
padding-top:20%;
padding-bottom:20%;
margin-bottom:0px;
font-size:4.5vw;
line-height:6.5vw;
color:#ffffff;
font-weight:bold;
}
.home-top-text{
color:#90a959;
font-family:inconsolata;
font-size:9vw;
margin-top:0px;
margin-right:20%;
margin-left:20%;
padding-top:15%;
padding-bottom:15%;
}
.home-top-text p{
margin-top:0px;
margin-bottom:0px;
font-weight:bold;
}
.home-top-text p:nth-child(2){
font-size:4vw;
margin-top:8%;
padding-bottom:1%;
border-bottom:solid #90a959 1.5px;
}
.break_desk{
display:none;
}
.home-top-text p:nth-child(3){
font-size:2.5vw;
font-weight:400;
margin-left:96%;
line-height:2;
}
.foot_image{
display:none;
}
}
/*this is max-width900px*/
@media (max-width: 900px){
.home_red_text a:link{
color:#ffffff;
}
.home_blue_sec{
background-color:#6494aa;
color:#ffffff;
padding-top:30%;
padding-bottom: 30%;
}
.home_start{
display:grid;
grid-template-columns: .5fr 2.5fr;
margin-left:10%;
margin-right:10%;
}
.start_text{
border-left: solid #ffffff .3vw;
padding-left:10%;
padding-top:0px;
margin-top:0px;
line-height: 10px;
font-size:5.7vw;
padding-bottom: 2%;
font-family:inconsolata;
font-weight:bold;
}
.start_text p{
line-height:1.3;
margin-bottom:30%;
font-family:Fira Sans;
font-size:4vw;
font-weight:300;
}
.replay_text{
border-left: solid #ffffff .3vw;
padding-left:10%;
padding-top:0px;
margin-top:0px;
line-height: 10px;
font-size:5.5vw;
font-family:inconsolata;
font-weight:bold;
}
.replay_text p{
line-height:1.3;
margin-bottom:0px;
font-family:Fira Sans;
font-size: 4vw;
font-weight:300;
}
.replay_text h3{
font-size:4vw;
line-height:1.2;
padding-top:5%;
font-weight: 600;
margin-bottom:0px;
}
.start_img img{
position:relative;
width:30%;
height:auto;
align-items:center;
align-content:center;
justify-content:center;
}
.pause_text{
border-left: solid #ffffff .3vw;
padding-left:10%;
padding-top:0px;
margin-top:0px;
line-height: 10px;
font-size:5.5vw;
font-family:inconsolata;
font-weight:bold;
padding-bottom:30%;
}
.pause_text p{
line-height:1.3;
margin-bottom:0px;
font-family:Fira Sans;
font-size: 4vw;
font-weight:300;
}
.pause_text h3{
font-size:4vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
}
.home_red_sec{
background-color:#a63d40;
color:#ffffff;
display:grid;
grid-template-columns: 1.2fr 2.5fr;
}
.home_red_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:55% 0;
}
.home_red_text {
padding-top:20%;
margin-left:15%;
margin-right:15%;
margin-bottom:30%;
font-family:Fira Sans;
font-weight:300;
font-size: 3.5vw;
}
.home_red_text h3{
font-size:3vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
}
.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;
}
/*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:100%; /* Length of the line */
height: 0;
max-width:500px;
border-top: .3vw solid #ffffff; /* Line thickness and color */
position: relative;
}
/* Arrowhead on the right side */
.arrow::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 */
}
}
/*this is the between 450 and 900 px*/
@media (max-width: 900px) and (min-width:450px){
.home-top-text p{
font-size:6.5vw;
}
.home-top-text p:nth-child(2){
font-size:3vw;
margin-top:6%;
}
.home_start{
margin-left:25%;
margin-right:25%;
}
.start_text{
font-size:3.5vw;
}
.start_text p{
font-size:2.5vw;
padding-top:5%;
}
.pause_text{
font-size:3.5vw;
}
.pause_text p{
font-size:3.5vw;
padding-top:5%;
}
.pause_text h3{
font-size:2.5vw;
}
.replay_text{
font-size:3.5vw;
}
.replay_text h3{
font-size:2.5vw;
}
.replay_text p{
font-size:2.5vw;
padding-top:5%;
}
.home_red_text p{
font-size:2.5vw;
}
.home_red_text h3{
font-size:2.5vw;
}
.home_red_sec{
grid-template-columns: 1fr 2.5fr;}
.entire_footer{
font-size:2.5vw;
}
.foot_me{
font-size:2vw;
}
.break_desk{
display:none;
}
}
/*this is the desktop stuff*/
@media (max-width: 1920px) and (min-width:901px){
.home-top-text{
font-family:inconsolata;
font-size:3.5vw;
color:#90a959;
margin-top:0px;
margin-right:25%;
margin-left:25%;
padding-top:15%;
padding-bottom:20%;
}
.home-top-text p{
margin-top:0px;
margin-bottom:0px;
font-weight:bold;
}
.home-top-text p:nth-child(2){
font-size:2vw;
margin-top:6%;
padding-bottom:1%;
border-bottom:solid #90a959 1.9px;
}
.home-top-text p:nth-child(3){
font-size:2vw;
font-weight:300;
margin-left:96%;
line-height:2;
}
.home-def {
background-color:#90a959;
margin-top:0px;
padding:0px;
font-family:inconsolata;
}
.home-desc{
margin-top:0px;
margin-right:25%;
margin-left:25%;
padding-top:20%;
padding-bottom:20%;
margin-bottom:0px;
font-size:4vw;
line-height:5vw;
color:#ffffff;
font-weight:bold;
}
.home_blue_sec{
display:grid;
background-color:#6494aa;
color:#ffffff;
padding-top:18%;
padding-bottom: 18%;
}
.home_start{
display:grid;
grid-template-columns: .5fr 2.5fr;
margin-left:12%;
margin-right:50%;
}
.start_text{
border-left: solid #ffffff .2vw;
padding-left:10%;
padding-top:0px;
margin-top:0px;
line-height: 10px;
font-size:2vw;
padding-bottom: 3%;
font-family:inconsolata;
font-weight:bold;
padding-bottom:20%;
}
.start_text p{
line-height:1.3;
margin-top:8%;
font-family:Fira Sans;
font-size:1.5vw;
font-weight:300;
}
.replay_text{
border-left: solid #ffffff .2vw;
padding-left:10%;
padding-top:0px;
margin-top:0px;
line-height: 10px;
font-size:2vw;
padding-bottom:2%;
font-family:inconsolata;
font-weight:bold;
}
.replay_text p{
line-height:1.5;
margin-top:8%;
margin-bottom:0px;
font-family:Fira Sans;
font-size: 1.5vw;
font-weight:300;
}
.replay_text h3{
font-size:1.3vw;
line-height:1.2;
padding-top:2%;
font-weight: 600;
margin-bottom:0px;
}
.start_img img{
position:relative;
width:28%;
height:auto;
align-items:center;
align-content:center;
justify-content:center;
}
.pause_text{
border-left: solid #ffffff .2vw;
padding-left:10%;
padding-top:0px;
margin-top:0px;
line-height: 10px;
font-size:2vw;
font-family:inconsolata;
font-weight:bold;
padding-bottom:20%;
}
.pause_text p{
line-height:1.5;
margin-bottom:0px;
margin-top:8%;
font-family:Fira Sans;
font-size: 1.5vw;
font-weight:300;
}
.pause_text h3{
font-size:1.3vw;
line-height:1.2;
padding-top:2%;
font-weight:600;
margin-bottom:0px;
}
/*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 */
}
/*red sec desktop*/
.home_red_sec{
background-color:#a63d40;
color:#ffffff;
display:grid;
grid-template-columns: 3.5fr 4fr;
}
.home_red_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:20% 0;
}
.home_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;
}
.home_red_text h3{
font-size:1.3vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
}
.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;
line-height:1.5vw;
}
.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;
}
}
/*this is the stuff that is really really big fuck this shit i am out i hate coding so much if you are reading this i hope you are laughing your ass off*/
@media (min-width: 1920px) {
.home-top-text{
font-family:inconsolata;
font-size:4vw;
color:#90a959;
margin-top:0px;
margin-right:25%;
margin-left:25%;
padding-top:15%;
padding-bottom:20%;
}
.home-top-text p{
margin-top:0px;
margin-bottom:0px;
font-weight:bold;
}
.home-top-text p:nth-child(2){
font-size:2vw;
margin-top:6%;
padding-bottom:1%;
border-bottom:solid #90a959 1.9px;
}
.home-top-text p:nth-child(3){
font-size:2vw;
font-weight:300;
margin-left:96%;
line-height:2;
}
.home-def {
background-color:#90a959;
margin-top:0px;
padding:0px;
font-family:inconsolata;
}
.home-desc{
margin-top:0px;
margin-right:25%;
margin-left:25%;
padding-top:20%;
padding-bottom:20%;
margin-bottom:0px;
font-size:3vw;
line-height:5vw;
color:#ffffff;
font-weight:bold;
}
.home_blue_sec{
display:grid;
background-color:#6494aa;
color:#ffffff;
padding-top:18%;
padding-bottom: 18%;
}
.home_start{
display:grid;
grid-template-columns: .5fr 2.5fr;
margin-left:15%;
margin-right:50%;
}
.start_text{
border-left: solid #ffffff .15vw;
padding-left:10%;
padding-top:0px;
margin-top:0px;
line-height: 10px;
font-size:1.2vw;
padding-bottom: 2%;
font-family:inconsolata;
font-weight:bold;
padding-bottom:18%;
}
.start_text p{
line-height:1.3;
margin-top:5%;
font-family:Fira Sans;
font-size:.8vw;
font-weight:300;
}
.replay_text{
border-left: solid #ffffff .15vw;
padding-left:10%;
padding-top:0px;
margin-top:0px;
line-height: 10px;
font-size:1.2vw;
padding-bottom:2%;
font-family:inconsolata;
font-weight:bold;
}
.replay_text p{
line-height:1.3vw;
margin-top:5%;
margin-bottom:0px;
font-family:Fira Sans;
font-size: .8vw;
font-weight:300;
}
.replay_text h3{
font-size:1vw;
line-height:1;
padding-top:2%;
font-weight: 600;
margin-bottom:0px;
}
.start_img img{
position:relative;
width:20%;
height:auto;
align-items:center;
align-content:center;
justify-content:center;
}
.pause_text{
border-left: solid #ffffff .15vw;
padding-left:10%;
padding-top:0px;
margin-top:0px;
line-height: 10px;
font-size:1.2vw;
font-family:inconsolata;
font-weight:bold;
padding-bottom:20%;
}
.pause_text p{
line-height:1.5;
margin-bottom:0px;
margin-top:5%;
font-family:Fira Sans;
font-size: .8vw;
font-weight:300;
}
.pause_text h3{
font-size:1vw;
line-height:1;
padding-top:2%;
font-weight:600;
margin-bottom:0px;
}
/*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 */
}
/*red sec desktop*/
.home_red_sec{
background-color:#a63d40;
color:#ffffff;
display:grid;
grid-template-columns: 3.5fr 4fr;
}
.home_red_sec img{
width:100%;
height:100%;
object-fit:cover;
object-position:20% 0;
}
.home_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;
}
.home_red_text h3{
font-size:.8vw;
line-height:1.2;
padding-top:5%;
font-weight:600;
margin-bottom:0px;
font-family:inconsolata;
}
.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;
line-height:1.5vw;
}
.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;
}
}
.foot_text_left a:link{
color:#ffffff;
}
.foot_text_middle a:link{
color:#ffffff;
}
.foot_me a:link {
color:#ffffff;
}