/* General reset */
body, html {
  padding: 0;
  margin: 0;
}

body{
  padding: 0;
  margin: 0px 0px;
  --nav-height:calc(80px + .5vw);
  padding-top:var(--nav-height);
    background-color: #6494aa;


   
}

/*a:link{

  color:black;

}*/

/*a:visited{

  color:#a63d40;
}*/

.nav_text{

  color:#a63d40;
}

@media (max-width:900px){


.ctv{
  color:#ffffff;
  font-family:inconsolata;
  padding-top:20%;
  padding-bottom:0px;
  margin-bottom:0px;
  position:relative;
  display: flex; 
  justify-content: center;  /* Horizontally center the text */
  text-align: center;       /* Ensures the text inside is centered */

}
.top_content_text h3{
  
  font-size:3.5vw;
  font-family:inconsolata;
  color:#ffffff;
  font-weight:400;
  text-align:left;
  margin:0px;
  padding-top:20%;
  text-decoration: none;


}

.top_content h1{

  
  font-size:3vw;
  font-family:inconsolata;
  color:#a5c4d1;
  font-weight:400;
  text-align:right;
  margin:0px;
  padding-top:2%;
  padding-right:5%;


}

.top_content b{

  color:#ffffff;

}

.top_content a:link{

  color:#a5c4d1;
  text-decoration: underline;

}

.top_content a:visited{

  color:#a5c4d1;
}

.top_content a:hover{

  color:#ffffff;
}
  
.top_content{

  background-color: #6494aa;
  padding-bottom:30%;

  height:100%;
}

.top_content_text{
  margin-top:15%;
  margin-left:20%;
  margin-right:20%;

}

.top_content_text p{
    color:#ffffff;
    font-size:3.5vw;
    font-family: fira sans;
    font-weight:300;
    margin-bottom:0px;
  
}

  .top_content_text h2{

    font-family:inconsolata;
    font-size:4vw;
    text-align:left;
    padding:0px;
    margin-top:20%;
    color:#ffffff;
    margin-bottom:0px;
  }

.entire_page {
  background-color: #a63d40;
  height: 100%;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 15vw;
  justify-content: center;
  justify-items: center;
  width: 100%;
  padding-top: 5%;
  padding-bottom:35%;
}

/* Styling the button with an image background */
.linkus, .demon, .gymnast, .alberto, .aloa, .trog, .fuzzyness, .minimini{
  background-size: cover;
  background-position: center;
  color: white;
  font-size: 1.5em;
  font-family: Inconsolata;
  font-weight: bold;
  text-align: center; /* Ensure text is centered horizontally */
  display: flex;
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Center text vertically */
  cursor: pointer;
  outline: none;
  border: solid;
  border-width: 1em;
  padding: 20% 15%; /* Adjust button size */
  margin: 0px 20%;
  position: relative;
  transition: background-color 1s ease, background-image 1s ease;
}

/* Linkus button styles */
.linkus {
  background-image: url('./images/linkus.png');  /* Relative path to the image */
  background-color: #6494aa;
  border-color: #6494aa;
}

/* Demon button styles */
.demon {
  background-image: url('./images/demon_pfp.png');  /* Relative path to the image */
  background-color: #e9b872;
  border-color: #e9b872;
}

/* Gymnast button styles */
.gymnast {
  background-image: url('./images/gymnast.png');  /* Relative path to the image */
  background-color: #151515;
  border-color: #151515;
}

/*alberto button styles*/

.alberto{

  background-image: url('./images/alberto_pfp.png');
  background-color: #151515;
  border-color: #151515;
}

.aloa{

  background-image:url('./images/aloa.png');
  background-color: #90a959;
  border-color: #90a959;
}

.trog{

  background-image:url('./images/trog.png');
  background-color: #6494aa;
  border-color: #6494aa;
}

.fuzzyness{

  background-image:url('./images/fuzzyness.png');
  background-color: #e9b872;
  border-color: #e9b872;
}

.minimini{

  background-image:url('./images/minimini.png');
  background-color: #90a959;
  border-color: #90a959;
}


/* Styling the text inside buttons */
.button_text {
  visibility: hidden; /* Make text invisible initially */
  position: absolute; /* Position text within the button */
  text-align: center;
  width: 100%; /* Full width of the button */
  padding:20%;
  top: 50%; /* Vertically center the text */
  left: 50%; /* Horizontally center the text */
  transform: translate(-50%, -50%); /* Exact centering */
}

/* Hover effects to make text visible */
.linkus:hover, .demon:hover, .gymnast:hover, .alberto:hover, 
.aloa:hover, .trog:hover, .fuzzyness:hover, .minimini:hover {
  background-image: none; /* Remove background image on hover */
}

.linkus:hover .button_text,
.demon:hover .button_text,
.gymnast:hover .button_text, 
.alberto:hover .button_text,
.aloa:hover .button_text,
.trog:hover .button_text,
.fuzzyness:hover .button_text,
.minimini:hover .button_text {
  visibility: visible; /* Show text on hover */
  transition: visibility 0.5s ease; /* Smooth visibility transition */
}

.top_content_text a:link{

  text-decoration:none;
}

.top_content_text a:visited{

  text-decoration:none;
}

.top_content_text h3:hover{

  color:#151515;

}


   /*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 */
    }


}

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

.top_content h1{

  
  font-size:2vw;

}

.text_nav_history b{

  color:#ffffff;
}

.text_nav_history a:link{

  color:#a5c4d1;
  text-decoration: underline;
}

.text_nav_history a:visited{

  color:#a5c4d1;
}

.text_nav_history a:hover{

  color:#ffffff;
}

  .top_content_text h2{

    font-size:3vw;
  }

  .top_content_text p{

  
    color:#ffffff;
    font-size:2.6vw;
  

  }

  .top_content_text h3{
  
  font-size:2.6vw;

}


   /*arrow containers*/

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

      .arrow {
      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 */
    .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 */
    }

/* Styling the button with an image background */
.linkus, .demon, .gymnast, .alberto, .aloa, .trog, .fuzzyness, .minimini{
 
  font-size: 1.2em;
  border-width: 1em;
  padding: 20% 15%; /* Adjust button size */
  margin: 0px 25%;
  position: relative;
  transition: background-color 1s ease, background-image 1s ease;
}

.buttons{
  gap:10vw;
}

}

@media (min-width:900px) and (max-width:1920px){
  .ctv{
  color:#ffffff;
  font-family:inconsolata;
  padding-top:20%;
  padding-bottom:0px;
  margin-bottom:0px;
  position:relative;
  display: flex; 
  justify-content: center;  /* Horizontally center the text */
  text-align: center;       /* Ensures the text inside is centered */

}
  
.margin{

  background-color: #a63d40;
  padding-left:10%;
  padding-right:10%;
} 
  
.top_content_text h3{
  
  font-size:1.6vw;
  font-family:inconsolata;
  color:#ffffff;
  font-weight:400;
  text-align:left;
  margin:0px;
  padding-top:15%;
  text-decoration: none;


}

.top_content h1{

  
  font-size:1.2vw;
  font-family:inconsolata;
  color:#a5c4d1;
  font-weight:400;
  text-align:right;
  margin:0px;
  padding-top:2%;
  padding-right:5%;


}

.top_content b{

  color:#ffffff;

}

.top_content a:link{

  color:#a5c4d1;
  text-decoration: underline;

}

.top_content a:visited{

  color:#a5c4d1;
}

.top_content a:hover{

  color:#ffffff;
}
  
.top_content{

  background-color: #6494aa;
  padding-bottom:30%;

  height:100%;
}

.top_content_text{
  margin-top:10%;
  margin-left:20%;
  margin-right:20%;

}

.top_content_text p{
    color:#ffffff;
    font-size:1.6vw;
    font-family: fira sans;
    font-weight:300;
    margin-bottom:0px;
  
}

  .top_content_text h2{

    font-family:inconsolata;
    font-size:2vw;
    text-align:left;
    padding:0px;
    margin-top:15%;
    color:#ffffff;
    margin-bottom:0px;
  }

.entire_page {
  background-color: #a63d40;
  height: 100%;
  width:100%;

}

.buttons {

  display: grid;
    grid-template-columns: repeat(2, 1fr); /* Creates 2 even columns */
    row-gap: 10vw; /* Optional space between the buttons */
  width: 100%;
  padding-top:10%;
  padding-bottom:35%;
  position:left;



}

/* Styling the button with an image background */
.linkus, .demon, .gymnast, .alberto, .aloa, .trog, .fuzzyness, .minimini{
  background-size: cover;
  background-position: center;
  color: white;
  font-size: 1.5em;
  font-family: Inconsolata;
  font-weight: bold;
  text-align: center; /* Ensure text is centered horizontally */
  display: flex;
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Center text vertically */
  cursor: pointer;
  outline: none;
  border: solid;
  border-width: 1em;
  padding: 20% 15%; /* Adjust button size */
margin:0px 10%;
  position: relative;
  transition: background-color 1s ease, background-image 1s ease;
}

/* Linkus button styles */
.linkus {
  background-image: url('./images/linkus.png');  /* Relative path to the image */
  background-color: #6494aa;
  border-color: #6494aa;

}

/* Demon button styles */
.demon {
  background-image: url('./images/demon_pfp.png');  /* Relative path to the image */
  background-color: #e9b872;
  border-color: #e9b872;
}

/* Gymnast button styles */
.gymnast {
  background-image: url('./images/gymnast.png');  /* Relative path to the image */
  background-color: #151515;
  border-color: #151515;
}

/*alberto button styles*/

.alberto{

  background-image: url('./images/alberto_pfp.png');
  background-color: #151515;
  border-color: #151515;
}

.aloa{

  background-image:url('./images/aloa.png');
  background-color: #90a959;
  border-color: #90a959;
}

.trog{

  background-image:url('./images/trog.png');
  background-color: #6494aa;
  border-color: #6494aa;
}

.fuzzyness{

  background-image:url('./images/fuzzyness.png');
  background-color: #e9b872;
  border-color: #e9b872;
}
.minimini{

  background-image:url('./images/minimini.png');
  background-color: #90a959;
  border-color: #90a959;
}





/* Styling the text inside buttons */
.button_text {
  visibility: hidden; /* Make text invisible initially */
  position: absolute; /* Position text within the button */
  text-align: center;
  width: 100%; /* Full width of the button */
  padding:20%;
  top: 50%; /* Vertically center the text */
  left: 50%; /* Horizontally center the text */
  transform: translate(-50%, -50%); /* Exact centering */
}

/* Hover effects to make text visible */
.linkus:hover, .demon:hover, .gymnast:hover, .alberto:hover, 
.aloa:hover, .trog:hover, .fuzzyness:hover, .minimini:hover {
  background-image: none; /* Remove background image on hover */
}

.linkus:hover .button_text,
.demon:hover .button_text,
.gymnast:hover .button_text, 
.alberto:hover .button_text,
.aloa:hover .button_text,
.trog:hover .button_text,
.fuzzyness:hover .button_text,
.minimini:hover .button_text {
  visibility: visible; /* Show text on hover */
  transition: visibility 0.5s ease; /* Smooth visibility transition */
}

.top_content_text a:link{

  text-decoration:none;
}

.top_content_text a:visited{

  text-decoration:none;
}

.top_content_text h3:hover{

  color:#151515;

}


   /*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;
      max-width:500px;
      border-top:  .17vw solid #ffffff;  /* Line thickness and color */
      position: relative;
    }

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


}
@media (min-width:1920px){
.ctv{
  color:#ffffff;
  font-family:inconsolata;
  padding-top:20%;
  padding-bottom:0px;
  margin-bottom:0px;
  position:relative;
  display: flex; 
  justify-content: center;  /* Horizontally center the text */
  text-align: center;       /* Ensures the text inside is centered */
  font-size:1.5vw;
}
.margin{

  background-color: #a63d40;
  padding-left:10%;
  padding-right:10%;
}
.top_content_text h3{
  
  font-size:1.3vw;
  font-family:inconsolata;
  color:#ffffff;
  font-weight:400;
  text-align:left;
  margin:0px;
  padding-top:15%;
  text-decoration: none;


}

.top_content h1{

  
  font-size:1vw;
  font-family:inconsolata;
  color:#a5c4d1;
  font-weight:400;
  text-align:right;
  margin:0px;
  padding-top:2%;
  padding-right:5%;


}

.top_content b{

  color:#ffffff;

}

.top_content a:link{

  color:#a5c4d1;
  text-decoration: underline;

}

.top_content a:visited{

  color:#a5c4d1;
}

.top_content a:hover{

  color:#ffffff;
}
  
.top_content{

  background-color: #6494aa;
  padding-bottom:20%;

  height:100%;
  width:100%;
}

.top_content_text{
  margin-top:10%;
  margin-left:25%;
  margin-right:25%;

}

.top_content_text p{
    color:#ffffff;
    font-size:1.3vw;
    font-family: fira sans;
    font-weight:300;
    margin-bottom:0px;
  
}

  .top_content_text h2{

    font-family:inconsolata;
    font-size:2vw;
    text-align:left;
    padding:0px;
    margin-top:20%;
    color:#ffffff;
    margin-bottom:5%;
  }

.entire_page {
  background-color: #a63d40;
  height: 100%;
  width:100%;

}

.buttons {

  display: grid;
    grid-template-columns: repeat(4, 2fr); /* Creates 2 even columns */
   gap:5%;
  padding-top: 5%;
  padding-bottom:35%;
  position:left;



}

/* Styling the button with an image background */
.linkus, .demon, .gymnast, .alberto, .aloa, .trog, .fuzzyness, .minimini{
  background-size: cover;
  background-position: center;
  color: white;
  font-size: 1.5em;
  font-family: Inconsolata;
  font-weight: bold;
  text-align: center; /* Ensure text is centered horizontally */
  display: flex;
  justify-content: center; /* Center text horizontally */
  align-items: center; /* Center text vertically */
  cursor: pointer;
  outline: none;
  border: solid;
  border-width: 1em;
  padding: 20% 15%; /* Adjust button size */
  margin:0px 5%;
  position: relative;
  transition: background-color 1s ease, background-image 1s ease;
}

/* Linkus button styles */
.linkus {
  background-image: url('./images/linkus.png');  /* Relative path to the image */
  background-color: #6494aa;
  border-color: #6494aa;

}

/* Demon button styles */
.demon {
  background-image: url('./images/demon_pfp.png');  /* Relative path to the image */
  background-color: #e9b872;
  border-color: #e9b872;
}

/* Gymnast button styles */
.gymnast {
  background-image: url('./images/gymnast.png');  /* Relative path to the image */
  background-color: #151515;
  border-color: #151515;
}

/*alberto button styles*/

.alberto{

  background-image: url('./images/alberto_pfp.png');
  background-color: #151515;
  border-color: #151515;
}

.aloa{

  background-image:url('./images/aloa.png');
  background-color: #90a959;
  border-color: #90a959;
}

.trog{

  background-image:url('./images/trog.png');
  background-color: #6494aa;
  border-color: #6494aa;
}

.fuzzyness{

  background-image:url('./images/fuzzyness.png');
  background-color: #e9b872;
  border-color: #e9b872;
}
.minimini{

  background-image:url('./images/minimini.png');
  background-color: #90a959;
  border-color: #90a959;
}





/* Styling the text inside buttons */
.button_text {
  visibility: hidden; /* Make text invisible initially */
  position: absolute; /* Position text within the button */
  text-align: center;
  width: 100%; /* Full width of the button */
  padding:20%;
  top: 50%; /* Vertically center the text */
  left: 50%; /* Horizontally center the text */
  transform: translate(-50%, -50%); /* Exact centering */
}

/* Hover effects to make text visible */
.linkus:hover, .demon:hover, .gymnast:hover, .alberto:hover, 
.aloa:hover, .trog:hover, .fuzzyness:hover, .minimini:hover {
  background-image: none; /* Remove background image on hover */
}

.linkus:hover .button_text,
.demon:hover .button_text,
.gymnast:hover .button_text, 
.alberto:hover .button_text,
.aloa:hover .button_text,
.trog:hover .button_text,
.fuzzyness:hover .button_text,
.minimini:hover .button_text {
  visibility: visible; /* Show text on hover */
  transition: visibility 0.5s ease; /* Smooth visibility transition */
}

.top_content_text a:link{

  text-decoration:none;
}

.top_content_text a:visited{

  text-decoration:none;
}

.top_content_text h3:hover{

  color:#151515;

}


   /*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;
      max-width:500px;
      border-top:  .17vw solid #ffffff;  /* Line thickness and color */
      position: relative;
    }

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


}

.buttons a:visited{

  color:#ffffff;
}

.buttons a:link{

  color:#ffffff;
}

.button_text {

  color:#ffffff;
}

button {

  color:#ffffff;
}