/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  color: white;
  font-family: Verdana;
  image-rendering: optimizespeed;
  background-image: url("tile.png");
  background-repeat: repeat;
}

  .ArticleHolders {
  width: 75%;
  border: 5px solid #f18dff;
  padding: 5%;
  margin-left: auto;
  margin-right: auto;
  margin: auto;
    margin-bottom: 3%;
  margin-top: 3%;
  background-color: #ffd3ff;
  }
  
    .tenor-gif-embed {
        display: flex;
  justify-content: center;
  flex-wrap: wrap;
  }
  
    .Holders2 {
width: max(40vw, 420px);
justify-content: center;
display:grid;
  border: 5px solid #f18dff;
  padding: 5%;
  margin-left: auto;
  margin-right: auto;
  margin: auto;
    margin-bottom: 3%;
  margin-top: 3%;
  background-color: #ffd3ff;
  }
  
      .WrittenHolder {
width: max(40vw, 1212px);
justify-content: center;
display:grid;
  border: 5px solid #f18dff;
  padding: 5%;
  margin-left: auto;
  margin-right: auto;
  margin: auto;
    margin-bottom: 3%;
  margin-top: 3%;
  background-color: #ffd3ff;
  }
  
    .InfoPage {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 2rem;
  flex: 1;
      
  }
  
      .infocontent {
        display: block;
        margin: 0 auto;
        padding: 3%;
        height: auto;
        width: 100%;
      
  }
  
  
    .Logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 29%;
  height: auto;
  }
  
  
      .GradingSystem {
  width: 71%;
  height:auto;
  }
  
        .GradingSystemHold {
          width: max(40vw, 420px);
    display: flex;
  justify-content: center;
  align-items: center;
  }
  
  
      .Dis {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
  height: auto;
      margin-bottom: 1%;
  margin-top: 1%;
  }
  
        .ArtImg {
  margin-left: auto;
  margin-right: auto;
  width: auto;
  height: auto;
      margin-bottom: 3%;
  margin-top: 3%;
    display: flex;
  justify-content: center;
  align-items: center;
  }
  
  
          .Text1 {
            font-size: 35;
            text-align: center;
            color: #7a43c6;
            font-family: "Futura";
    display: flex;
  justify-content: center;
  align-items: center;
  }
  
            .SmallText {
            font-size: 15;
            text-align: center;
            color: #7a43c6;
            font-family: "Futura";
  }
  
            .LinkHolder {
    display: flex;
  justify-content: center;
  align-items: center;
  }
  
              .LinkButton {
padding: 1%;
    display: flex;
  justify-content: center;
  align-items: center;
  }
  
            .Text1sub {
            font-size: 28;
            text-align: center;
            color: #f44aea;
            font-family: "Futura";
    display: flex;
  justify-content: center;
  align-items: center;
  }
  
              .WrittenText {
            font-size: 33;
            color: #472379;
            font-family: "Futura";
    display: flex;
    text-align: center;
  justify-content: center;
  align-items: center;
  }
  
            .Text2 {
              text-align: center;
            font-size: 65;
            color: #7a43c6;
            font-family: "Futura";
    display: flex;
  justify-content: center;
  align-items: center;
  }
  
              .Text3 {
                text-align: center;
            font-size: 45;
            color: #7a43c6;
            font-family: "Futura";
    display: flex;
  justify-content: center;
  align-items: center;
  }
  
  
  
    .Article {
    display: block; 
  margin: auto;
  margin-bottom: 3%;
  margin-top: 3%;
  width: auto;
  height: auto;
  padding: 1%;
  border: 5px solid #7a43c6;
  background-color: #fff;
  }

@font-face {
font-family: "Futura";
src: url("futurabkbt.ttf") format("truetype");
}