/*   IMPORTANT GRID STUFF -
grid is the whole thang, if you ever need more rows you will add more brackets. 
TO ADJUST THE ROWS: dick around with the item settings. apertnyl overlap can happen???
Coulums = the long way 
Rows = the hamburger way */
body {
background-color: darkgreen;
background-image: url(https://file.garden/aEXhp4cpXwi1DCEo/Test/BackgroundGreenLines.jpg);
 background-size: 200px 200px;
 height: 2000px;
  width: 100%;

}

.container{
margin-top: 50px;
margin-left: 100px;
margin-right: 100px;



display: grid;
grid-template-columns: [first] 270px [line2] auto [line3] 270px [end];
grid-template-rows: [first] 200px [line2] 800px [line3] 1100px [end];

justify-content: center;

}

/* ITEM1 contains the nav stuff */
.item1 {
  grid-column-start: 2;
  grid-column-end: line3;
  grid-row-start: 1;
  grid-row-end: 1;
 
  border: 10px;
  border-style: ridge;
 border-color: #48d3ae;

background-color: rgba(38, 16, 135, 0.493);
overflow: auto;
}

.item2 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: end;


  border: 10px;
border-style: groove;
border-color: #6444be;

background-color:  rgba(38, 16, 135, 0.493);


}

.item3 {
  grid-column-start: line2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;

  border: 10px;
border-style: groove;
 border-color: rgb(192, 74, 243);

background-color:rgba(38, 16, 135, 0.493);

overflow: auto;
}



.item4 {
  grid-column-start: 3;
  grid-column-end: end;
  grid-row-start: 2;
  grid-row-end: end;

  border: 10px;
border-style: groove;
border-color: #6444be;

background-color:  rgba(38, 16, 135, 0.493);
}

.item5 {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 3;
 
  border: 10px;
border-style: groove;
border-color:#48d3ae;

background-color: rgba(38, 16, 135, 0.493);

}

/* General Stuff */

/* ITEM5 GRID */

.minicon {
  margin-right: -200px;

display: grid;
grid-template-columns: [first] 500px [line2] 300px [line3] 200px [end];
grid-template-rows: [first] 200px [line2] 90px [line3] 90px [end];
justify-content: center;

overflow: auto;

}

.rightdiv {

  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 3;

   text-align: center;
border: 4px;
border-style: dashed;
overflow: auto;
border-color: lightgreen;
background-color: black;

}


.left1div {
 
grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
  
  
 text-align: center;
border: 4px;
border-style: dashed;
overflow: auto;

background-color: lightgreen;
}


.left2div {
 
grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
  
  
 text-align: center;
border: 4px;
border-style: dashed;
border-color: lightgreen;
background-color: black;
}

/* ITEM5 GRID END */

/* MINI DIVS */
.mindiv {
 margin-left: 70px;
  margin-right: 70px;
   margin-bottom: 30px;
   margin-top: 30px;
padding: 20px;
  
 text-align: center;
border: 4px;
border-style: dashed;
border-color: lightgreen;

background-color: black;

}  

.sidediv {

 text-align: center;
border: 4px;
border-style: dashed;
border-color: lightgreen;
background-color: black;

}

.rightmaindiv {

  position: relative;
  left: 130px;
 top: 130px;

height: 210px;
width: 260px;
background-color: black;
margin: -120px;
text-align: center;
padding: 10px;
border: 4px;
border-style: dashed;
border-color: lightgreen;
}

.leftmaindiv {

  position: relative;
  left: 750px;
bottom: 250px;

height: 210px;
width: 260px;
background-color: black;
margin: -120px;
text-align: center;
padding: 10px;
border: 4px;
border-style: dashed;
border-color: lightgreen;
}

/* MINI DIVS END */

.ann {

margin-top: -10px;
margin-left: 120px;
}



nav {

font-size: 41px;
text-align: center;
padding: 10px;
}

 nav a {
    font-family: 'ATcomputer', 'Times New Roman', Times, serif;
    font-size: 40px;
    float: none;
    padding: 15px;
    color: rgb(0, 0, 0);
    text-decoration: none;
  }


div{

margin: 10px;
padding: 5px;
}

span {
display: flex;
border: 7px;
border-style: ridge ;
margin: 10px;
 border-color: rgb(192, 74, 243);

}

ul {

 list-style-image: url(https://file.garden/aEXhp4cpXwi1DCEo/Test/BugCicadaFavicon.gif);

text-align:left
}

.cic {

padding: 5px;

}

.left {

margin-top: 1px;
margin-left: -10px;

}


.cicgra{

position: relative;
 top:5px;
 left: 5px;
 margin-bottom: -50px;
}


.sidestamp {

  position: relative;
left: 10px;

}

.month {
border: 7px;
border-style: ridge;
margin: -5px;
 border-color: rgb(192, 74, 243);

}

.mail{
position: relative;
bottom: 80px;
}

.green{
font-size: large;
  color: chartreuse;
  margin: -5px;
}

a:link{

 color:#48d3ae;
  background-color: transparent;
  text-decoration: underline;

}

a:hover {

  color: rgb(192, 74, 243);

}

a:visited{

 color: #6444be;
  background-color: transparent;
  text-decoration: underline;

}


.zeep {

margin-top: -5px;

}


.lin:hover {

transform: scale(1.5);
transition:  0.3s;

}



.button {
  position: absolute;
  display: flex;
width: 2000px;
margin-left: 230px;
margin-top: 0px;
margin-bottom:-50px

}




#container {
    width: 200%;
    height: 2.5rem;
    position: flex;
    overflow: hidden;
    white-space: nowrap;
    margin-top: -50px;
  margin-left:300px;
   
}
#container .scroll {

    display: flex;
    align-items: center;
    width: fit-content;
    white-space: nowrap;
    animation: loop 12s linear infinite;
    justify-self: center;
}

#container .scroll#scroll-two {
    transform: translateX(100%);
    animation-delay: 10s; 
}

.fade {
    width: 300%;
    position: absolute;

    inset: 0;
    pointer-events: none;
}

@keyframes loop {
    0% {transform: translateX(150%);}
    100% {transform: translateX(-100%);}
}
.item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:  0rem 1rem;
    margin: 0rem 0.5rem;

    white-space: nowrap;
}