style.css

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

.overlay {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgb(44, 112, 212);
  z-index: 2; 
}

.overlay__inner {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
 z-index: 2; 
}

.overlay__content {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}


.spinner {
  width: 75px;
  height: 75px;
  display: inline-block;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.05);
  border-top-color: #fff;
  animation: spin 1s infinite linear;
  border-radius: 100%;
  border-style: solid;
}

@keyframes spin {
100% {
  transform: rotate(360deg);
}
}

#welcome-msg{
    color: rgb(255, 255, 255);
    -webkit-animation: fadein 2s;
    animation: fadein 2s;
    font-size: 35px;
    padding-bottom: 20px;
    text-align: right;
    display: inline;
   
}

.flex-container {
    display: flex;
    height: 90%;

  }
.flex-container > div {
    width: 100%;
    margin: 10px;
    text-align: center;
  
}

.card {
  box-shadow: 0 10px 12px 0 rgba(0,0,0,0.2);
  background-color: rgba(250, 250, 250);
  transition: 0.3s;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  cursor: pointer;
  
}
.chemistry-card {
  cursor: pointer;
  width: 100%;
  height: 75%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color:#EA4335;
  

}
.physics-card {
  cursor: pointer;
  width: 100%;
  height: 75%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color:#FBBC05;
}
.maths-card {
  cursor: pointer;
  width: 100%;
  height: 75%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color:#4285F4;
}
.biology-card {
  cursor: pointer;
  width: 100%;
  height: 75%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #34A853;
}



.card2 {
  box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 95%;
  margin-left: 40px;
  border-radius: 10px;
  background-color: rgba(250, 250, 250, 1);
  margin-top: 50px;
  height: 220px;
  opacity: 0.1;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

/* .fade-in.one {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.fade-in.two {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay:1.2s;
  animation-delay: 1.2s;
}

.fade-in.three {
  -webkit-animation-delay: 1.8s;
  -moz-animation-delay: 1.8s;
  animation-delay: 1.8s;
}
 */



.card:hover {
    box-shadow: 0 16px 8px 0 rgba(0,0,0,0.2);
}
  
.container {
    padding: 8px 25px;
}

.countdown-container {
    color: #333;
    margin: 0 auto;
    padding: 0.5rem;
    text-align: center;
  }
  
  
  .countdown-title {
    font-weight: bold;
    margin-bottom: -15px;
    color: #4e4e4e;
    font-family: 'Nunito', sans-serif;
    margin-top: -8px;
    
  }
  
  .countdown-li {
    display: inline-block;
    color: #747272;
    font-size: 1.5em;
    font-family: 'Nunito', sans-serif;
    list-style-type: none;
    font-weight: bold;
    padding: 1em;
    text-transform: uppercase;
    
  }
  
  .countdown-time {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: 4.5rem;
  }
  
  @media all and (max-width: 1490px) {
    .countdown-title {
      font-size: 1.3rem;
      margin-top: 10px;
    }
    
    .countdown-li {
      font-size: 1.2rem;
    }
    
    .countdown-time {
      font-size: 3rem;
    }
  }

  .due-sub{
    color: white;
    
    padding-top: 25px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.9rem;
}  


  .due-topic{
    color: white;
      font-size: 1.2rem;
      margin-top:5px;
      font-family: 'Nunito', sans-serif;
  }
  .due-type{
    color: white;
    font-size: 1rem;
    margin-top: -3.5px;
    font-family: 'Nunito', sans-serif;
  }
  .due-day{
    color: rgb(83, 83, 83);
      font-size: 1.1rem;
      font-weight: bold;
      font-family: 'Nunito', sans-serif;
     
  }

  .anouncement{
    color: rgb(121, 120, 120);
    font-size: 1em;
    font-family: 'Poppins', sans-serif;

    
  }

  .an-line{
    border-left: 2px solid rgb(194, 194, 194);
  height: 260px;
  }
  div.scrolling-limit{
    width: 100%;
    height: 80px;
  
  
    overflow:hidden;
      font-size: 50px;
  
    white-space:nowrap;
    
  }
  
  div.scrolling{
    width: 50%;
    
    position: relative;
    -webkit-animation: scroll 20s infinite linear;;
    -moz-animation: scroll 20s infinite linear;
    -o-animation: scroll 20s infinite linear;
    animation: scroll 20s infinite linear;
  }
  
  @keyframes scroll{
      0%   {left: 500px;}
      100% {left: -950px;}
  }
  @-webkit-keyframes scroll{
      0%   {left: 500px;}
      100% {left: -950px;}
  }

  #hid-card{
    display: none;
  }
  @media all and (min-width: 1600px) {
    #hid-card{
      display: block;
    }

  }
  
  .message-container{
    width: fit-content;
    margin:20px auto;
    align-self: center;
    
    height:100px;
    margin-top: 60px;
    overflow:hidden;
  }
  .message-ul{
    list-style:none;
    position:relative;
  }
  .message-li{
    height:100px;
    
     text-align:center;
    
  }
  .message-h2{
    color:grey;
    padding-top:10px;
    font-family: 'Poppins', sans-serif;

  }
  .message-p{
    text-align:center;
    font-family: 'Poppins', sans-serif;

    padding:10px;
    color:grey;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
   }
   
.item{
  background: white;    
  text-align: center;
  height: 300px !important;
}

.carousel{
  margin-top: 20px;
}

.bs-example{
margin: 20px;
}

.carousel.carousel-fade .item {
opacity:0;
filter: alpha(opacity=0); /* ie fix */
}

.carousel.carousel-fade .active.item {
  opacity:1;
  filter: alpha(opacity=100); /* ie fix */
}





.graph {
	margin-bottom:1em;
  font:normal 100%/150% arial,helvetica,sans-serif;
}

.graph caption {
	font:bold 150%/120% arial,helvetica,sans-serif;
	padding-bottom:0.33em;
}

.graph tbody th {
	text-align:right;
}

@supports (display:grid) {

	@media (min-width:32em) {

		.graph {
			display:block;
      width:100%;
      height:150px;
		}

		.graph caption {
			display:block;
      font-family: 'Poppins', sans-serif;
      color: rgb(121, 120, 120);


		}

		.graph thead {
			display:none;
		}

		.graph tbody {
			position:relative;
			display:grid;
			grid-template-columns:repeat(auto-fit, minmax(2em, 1fr));
			column-gap:2.5%;
			align-items:end;
			height:100%;
			margin:3em 0 1em 2.8em;
			padding:0 1em;
			border-bottom:2px solid rgba(0,0,0,0.5);
		
		}

		.graph tbody:before,
		.graph tbody:after {
			position:absolute;
			left:-3.2em;
			width:2.8em;
			text-align:right;
			font:bold 80%/120% arial,helvetica,sans-serif;
		}

		.graph tbody:before {
			content:"100%";
			top:-0.6em;
      color: rgb(121, 120, 120);
      font-family: 'Poppins', sans-serif;

		}

		.graph tbody:after {
			content:"0%";
			bottom:-0.6em;
		}

		.graph tr {
			position:relative;
			display:block;
		}

		.graph tr:hover {
			z-index:999;
		}

		.graph th,
		.graph td {
			display:block;
			text-align:center;
		}

		.graph tbody th {
			position:absolute;
      color: rgb(121, 120, 120);
			top:-3em;
			left:0;
			width:100%;
			font-weight:normal;
			text-align:center;
      white-space:nowrap;
			text-indent:0;
      font-family: 'Poppins', sans-serif;

		}

		.graph tbody th:after {
			content:"";
		}

		.graph td {
			width:100%;
			height:100%;
			background:rgb(54, 134, 209);
			border-radius:0.5em 0.5em 0 0;
			transition:background 0.5s;

		}

		.graph tr:hover td {
			opacity:0.7;
		}

		.graph td span {
			overflow:hidden;
			position:absolute;
			left:50%;
			top:50%;
			width:0;
			padding:0.5em 0;
			margin:-1em 0 0;
			font:normal 85%/120% arial,helvetica,sans-serif;
/* 			background:white; */
/* 			box-shadow:0 0 0.25em rgba(0,0,0,0.6); */
			font-weight:bold;
			opacity:0;
			transition:opacity 0.5s;
      color:white;
		}

		.toggleGraph:checked + table td span,
		.graph tr:hover td span {
			width:4em;
			margin-left:-2em; /* 1/2 the declared width */
			opacity:1;
		}



    


	} /* min-width:32em */
}