*{
    box-sizing: border-box;
    border: 0;
}

body {
  background-image: url("../image/WMGgrass.png");
  background-size: auto;
  font-family: "Itim", serif;
  font-size: 0.4cqw;
}

.sizeConstraint{  
  container-type: size;
   
  margin: auto;
  font-family: "Teko", sans-serif;
  color: white;
  max-width: 1080px;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

hr {
  border: 2cqw solid var(--brown);
  border-radius: 2cqw;
}

.logo {
  width: 100%;
  margin: auto;
  cursor: pointer;
  
}
.titleLogo {
  width: 20cqw;
  margin: auto;
  
}
.titleText {
  font-family: "Itim", serif;
  margin: auto;
  font-size: 5.5cqw;
  color: var(--brown);
}

.titleDiscord{
  width: 100%;
  margin: auto;
}

.parent {
  display: grid;
  grid-template-columns: 20cqw auto;
  grid-template-rows: auto auto;
  grid-column-gap: 1cqw;
  grid-row-gap: 1cqw;
}

.title {
  grid-area: 1 / 1 / 2 / 3;
}

.side {
  grid-area: 2 / 1 / 3 / 2;
}

.main {
  grid-area: 2 / 2 / 3 / 3;
}

button {
  font-family: "Itim", serif;
  background-color: var(--brown);
  color: var(--yellow);
  border-color: var(--yellow);
  border-width: 0;
  width: 95%;
  margin: 3%;
  height: 4cqw;
  text-align: center;
  cursor: pointer;
  font-size: 2.6cqw;
  border-radius: 0.8cqw;
}
 .double{
  height:6.8cqw;
  }
  .wide{
    width: 95%;
  }

.buttonTitle {
  font-family: "Itim", serif;
  background-color: var(--yellow);
  color: var(--brown);
  width: 95%;
  margin: 3%;
  height: 4cqw;
  text-align: center;
  font-size: 2.4cqw;
  border-radius: 0.8vw;
  cursor:auto;
}

.buttonspace {
  background-color: transparent;
  border-color: transparent;
  height: 2cqw;
  cursor: auto;
}

/* Change background color of buttons on hover */
button:hover {
  transition: 0.8s;
  background-color: var(--highlight);
}

.buttonspace:hover {
  transition: 0.8s;
  background-color: transparent;
}

.buttonTitle:hover {
  transition: 0.8s;
  background-color: transparent;
}

/* Style the title scorecard */
.scorecardt {
  display: grid;
  grid-template-columns: 20cqw Auto 24cqw;
  padding: 0.5cqw;
  grid-column-gap: 1cqw;
  background-color: var(--yellow);
  height: 12cqw;
  border-radius: 0.8cqw;
  box-shadow: 0.5cqw 0.5cqw 1cqw rgba(0, 0, 0, 0.5);
}


/* Style the tab content */
.scorecards {
  background-color: var(--yellow);
  font-size: 1.5cqw;
  padding: 0.5cqw;
  height: auto;
  border-radius: 0.8cqw;
  box-shadow: 0.5cqw 0.5cqw 1cqw rgba(0, 0, 0, 0.5);
}

/* Style the Main Content Scorecard*/
.scorecardm {
  width: 98%;
  background-color: #ffff62;
  font-size: 0.4cqw;
  padding: 0.5cqw;
  border-radius: 0.8cqw;
  
  overflow: hidden;
}

object {
  width: 100%;
  height:auto;
  height: calc(9.7cqw*32);
  font-size: 0.6cqw;
  border-radius: 0.8cqw;
  box-shadow: 0.5cqw 0.5cqw 1cqw rgba(0, 0, 0, 0.5);
  overflow: auto;
  margin: 0%;
}