@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');



.intro {
    /* background-image: url('/img/scifi-bg-fade.jpg'); */
    /* background-image: url('/img/forest-bg-fade.jpg'); */
    /* background-image: url('/img/mha-fanart-fade.jpg'); */
    /* background-image: url('/img/FJi9.gif'); */
    background-image: url('/img/keyboard.gif');
    background-position:center;
    background-repeat:no-repeat;
    background-size: cover;
    background-blend-mode: screen;
    background-color:#898f96;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height:100vh; 
}

.pages {
    height:100vh; 
    background-color:rgba(255, 230, 0, 0.993);
}



body {
    font-family:'Montserrat', sans-serif;  
}

.logostyle {
    font-style: italic;
    font-weight: 900;
    border-bottom:solid black 2px;  
    margin-bottom:0;  
    max-width:320px;
    padding-bottom:3rem;
}

.link-group {
    margin-top:1.5rem;
    font-weight: 900;
    text-transform:uppercase;
    font-style:italic;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-items:center;
    align-content: space-between;
    flex-basis: 200px;
   

}


a {
    color:#74CCD3;
    text-shadow: 1px 1px 1px #efefef;
    text-decoration: none;}

    a:hover {
        color:#FDB92D;   
    }

.container {
    padding:1rem;
}
.cards {
    max-width: 1920px;
    margin: 0 auto;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    list-style-type: none;
  }


    .card {
        color: black;
        padding: 1rem;
       
      }

      .card img {
          width:100%;
          filter: grayscale(100%);
          transition: all .4s;
          border-radius: 3px;
      }

      .card img:hover {
        filter: grayscale(0%);
      }

      .card h1,h2,h3 {
          font-weight: 900;
          font-style: italic;
          text-transform: uppercase;
      }

      .roster-card-title {
          background-color:black;
          color:white;
          padding:.5rem 1rem;
          border-radius: 3px;
          
      }


.sort-menu {
    display:none;
    justify-content: center;
    align-items: center;
    gap:20px;
    padding-top:2rem;
    padding-bottom:2rem;
 
}

      input {
        border:solid 0px #ccc;
        border-radius: 3px;
        padding:8px 30px;
        text-transform: uppercase;
      }
      input:focus {
        outline:none;
        border-color:#aaa;
      }
      .sort {
        padding:8px 30px;
        border-radius: 3px;
        border:none;
        display:inline-block;
        color:#fff;
        text-decoration: none;
        background-color: black;
        /* height:30px; */
        text-transform: uppercase;
        font-weight:700
      }
      .sort:hover {
        text-decoration: none;
        background-color:rgb(0,0,0,.75);
       
      }
      .sort:focus {
        outline:none;
      }
      .sort:after {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid transparent;
        content:"";
        position: relative;
        top:-10px;
        right:-5px;
      }
      .sort.asc:after {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #fff;
        content:"";
        position: relative;
        top:13px;
        right:-5px;
      }
      .sort.desc:after {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #fff;
        content:"";
        position: relative;
        top:-10px;
        right:-5px;
      }

  

@media screen and (min-width: 576px) {

    .logostyle {
        font-size: 2.45em;
    }
    .link-group {
        font-size: 1em;
        margin-top:.75rem
    }

    .cards { grid-template-columns: repeat(2, 1fr);
    
    }  
  
 
  
}


@media screen and (min-width: 768px) {
    .logostyle {
        font-size: 4em;
    }
    .link-group {
        font-size: 1.6em;
    }
    .cards { grid-template-columns: repeat(2, 1fr);
    }

    .sort-menu {
        display: flex;
    }
 
}

@media screen and (min-width: 992px) {

 .logostyle {
     font-size: 6em;
 }
  .link-group {
      font-size: 1.6em;
  }

  .cards { grid-template-columns: repeat(3, 1fr);
  }

  .sort-menu {
    display: flex;
}

}