body {    font-family: 'Times New Roman', Times, serif;
                margin: 0;
    font-weight: normal;
    font-style: normal;

                background-color: #000000;
                /* you can delete the line below if you'd prefer to not use an image */
                color: #000000;
          
         font-family: 'Times New Roman', Times, serif;
                margin: 0;
        
   text-shadow: 2px 2px 2px #ffffffa4; 
                background-image: url(graph_paper.png);
              height:100vh; /* use 100% of the height of the viewport */
                display:grid;             
  place-items: center;
                    -webkit-animation: scrolling 5s linear infinite;
    -moz-animation: scrolling 2s linear infinite;
    -o-animation: scrolling 2s linear infinite;
    animation: scrolling 10s linear infinite;
}

@keyframes scrolling {
  from{
      background-position: 0 0;
  }
  to{
     background-position: 307px 133px;
  }


            }


    
.box {


  padding: 5px;
  margin: 5px;
  height: 500px;
  max-width: 900px;
    margin: auto;
}



#minibox {

 display: flex;
   width: 370px;
  height: 360px;

                padding: 10px;
                text-align: center;
                overflow: clip;
                scrollbar-width: thin;
                 overflow-x: hidden;
                 display:inline-block;
                   padding: 10px;
 margin: 15px;
 align-items: center;
}
#minibox2 {

 display: flex;
   width: 370px;
  height: 300px;

                padding: 10px;
                text-align: center;
                overflow: clip;
                scrollbar-width: thin;
                 overflow-x: hidden;
                 display:inline-block;
                   padding: 10px;
 margin: 15px;
 align-items: center;
}
.container {
justify-items: center;


}
.grid-container {
  display: grid;
  grid-template-areas: 'header header header header header'
                       'main main main main main'                                  ;
  gap: 10px;
  background-color: rgba(240, 247, 255, 0.719);
  padding: 10px;
  align-items: center;
  border-radius: 1%;
  border: 2px solid white;
}

.grid-container > div {

  color:#000;
  padding: 10px;
 
  text-align: center;
    border-radius: 1%;
}

.item1 {
  grid-area: header;
    border-radius: 1%;
    color: #ffffff;

}
             
.item2 {
  grid-area: main;
    width: 900px;
    height: 500px;
                overflow-x: hidden;
                   scrollbar-width: thin;
                   scrollbar-color: #ffffff rgba(0, 0, 0, 0);
   
  
}

   #img1 {
    
   align-self: center;
   }



#img1:hover {

  transform: rotate(-5deg);
    transition: all 0.1s ease-in-out 0s;
}
       
             
#logo {
  animation: logo 15s ease 0s infinite normal forwards;
}

@keyframes logo {
	0%,
	100% {
		transform: rotate(0deg);
		transform-origin: 50% 50%;
	}

	10% {
		transform: rotate(1deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-3deg);
	}

	30%,
	50%,
	70% {
		transform: rotate(3deg);
	}

	80% {
		transform: rotate(-1deg);
	}

	90% {
		transform: rotate(3deg);
	}
}
#graphic {

 
    border: solid 2px #000000;
    border-radius: 10px;
}
#graphic:hover {

      
  transform: scale(1.01);  
    transition: all 0.1s ease-in-out 0s;
    
}

#disc {
    transition: transform 1s;
}
#disc:hover {
  
    transform: rotate(360deg);

}
            h1,
            h2,
            h3 {
                color: #000000;
            }

            h1 {
                font-size: 25px;
            }

            strong {
                /* this styles bold text */
                color: #000000;;
                
            }
a:link { color:  #000000; 
  text-decoration: none;}  
a:visited { color: #000000;}  
a:hover { color: #5a5a5a; 
 font-style: italic;
    letter-spacing: 1px;}  
a:active { color: #000000; } 
hr.solid {
  border-top: 1px solid #ffffff;
   border-bottom: 1px solid rgba(0, 0, 0, 0.411); }