*, *::before, *::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: #030637;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  margin: 0.5%;
}

.navbar {
  background-color: #150050;
  border-radius: 5px;
  overflow: hidden;
}

.topnav a {
  float: left;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topnav a:hover {
  background-color: #130241;
  color: white;
}
/* start site */

.flexstart {
  display: flex;
  flex-direction: column;
}

.maincontainer {
  margin: 1%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.yeartab {
  height: 80vh;
  width: 10%;
  background-color: #150050;
  align-items: center;
  text-align: center;
  border-radius: 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  cursor: pointer;
}

.yeartab {
  height: 80vh;
  width: 10%;
  background-color: #150050;
  align-items: center;
  text-align: center;
  border-radius: 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  cursor: pointer;
}

.yearbtn {
  background-color: #202060;
  padding: 35% 20%;
  margin: 5%;
  border-radius: 5px;
}

.yearbtn:active {
  transform: translateY(4px);
}

.weektab {
  height: 80vh;
  width: 10%;
  background-color: #150050;
  align-items: center;
  text-align: center;
  border-radius: 5px;
  overflow-y: scroll;
  overflow-x: hidden;
  cursor: pointer;
}


.weekbtn {
  background-color: #202060;
  padding: 35% 20%;
  margin: 5%;
  border-radius: 5px;
}

.weekbtn:active {
  transform: translateY(4px);
}

.yeartext {
  font-size: 100%;
  user-select: none;
}


.daytab {
  border-radius: 5px;
  height: fit-content;
  height: 80vh;
  width: 60vw;
  margin-left: 20vw;
  background-color: #150050;
}

.innerweek {
  display: flex;
  flex-direction: column;
  align-items: start;
  background-color: #202060;
  margin: 1%;
  height: 14.5vh;
  font-size: 2vh;
  border-radius: 5px;
}

.weektext {
  font-size: 100%;
  user-select: none;
}

.innertext {
  margin: 1%;
}

@media only screen and (max-width: 1080px) {
  .maincontainer {flex-direction: column; min-height: 10vh;}
  .weektab {
    display: flex;
    flex-direction: row;
    height: 10vh;
    width: 95%;
    overflow-y: hidden;
    overflow-x: scroll;
  }
  .yeartab {
    display: flex;
    flex-direction: row;
    height: 10vh;
    width: 95%;
    overflow-y: hidden;
    overflow-x: scroll;
  }
  .daytab{
    margin-top: 5%;
    height: fit-content;
    width: 95vw;
    margin-left: 0vw;
  }
  .weekbtn {margin: 1vw; width: 25vw; height: 1vh; }
  .weektext {font-size: 100%;}
  .yearbtn {margin: 1vw; width: 25vw; height: 1vh; }
  .yeartext {font-size: 100%;}
}

.purple {
  background-color: #44447b;
}