* {
  box-sizing: border-box;
}

.container {
  display: grid;
  min-height: 100vh;
  gap: 15px;
  grid-template-columns: 250px 1fr 250px;
  grid-template-rows: 72px 1fr 50px;
  grid-template-areas:
    "hd hd hd"
    "sd-l main sd-r"
    "ft ft ft";
	padding-left:17px;
	padding-right:17px;
	padding-top:5px;
	padding-bottom:5px;
	margin-top: -75px;
}
main {
grid-area: main;
padding: 13px;
	border: 4px solid;
      border-image-slice: 1;
      border-image-source: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
	color:aliceblue;
    font-family:'Courier New';
    font-weight:bold;
    background-image:url(https://spiral-staircase.neocities.org/more%20rainbow.png)
}

h1 {
text-align:center;
text-shadow: 1px 1px 3px rgba(255, 204, 252, 0.34);
font-family:Georgia;
color:rgba(102, 0, 222, 0.85);

}

 .img2 {
   position:absolute;
   left:950px;
}
#div1 {
     padding: 2rem 2rem;
     margin:auto;
	text-align:center;
	  
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
      "hd"
      "sd-l"
      "main"
      "sd-r"
      "ft";
  }
	
}

header { 
grid-area: hd;
background: rgba(34, 153, 233, 0);
padding: 1rem;
text-align:center;


 }

.navbar {
  width: 100%;
  overflow: auto;
}

.navimg1{
		position:absolute;
		float:left;
	left: 179px; top: 2px;
	z-index: -1;
	}

.navbar a {
  float: left;
  padding: 10px;
  color: white;
  text-decoration: none;
  font-size: 24px;
  width: 25%; /* Four links of equal widths */
  text-align: center;
}

nav ul{
	list-style-type:none;
	display:block;
	text-align:center;
}

ul li a {
  display:inline-block;
  color: #fb4848;
  text-align: center;
  text-decoration: none;
	font-size:large;
}

ul li a:hover {
  background-color: rgba(71, 72, 150, 0.11);
}

.sidebar-l {
grid-area: sd-l;
background-image:url(https://spiral-staircase.neocities.org/watery.gif);
padding: 10px;
	border: 4px solid;
	border-image-slice: 13;
	border-image-source:url(https://spiral-staircase.neocities.org/1013.png);
}

.sidebar-r {
grid-area: sd-r;
background-image:url(https://spiral-staircase.neocities.org/sparkly.gif);
padding: 10px;
border: 4px solid;
	border-image-slice: 13;
	border-image-source:url(https://spiral-staircase.neocities.org/1013.png);

 }

footer { 
grid-area: ft; 
background: #333333; 
padding: 10px; 
	font-family:'Courier New';
	background-image:url(https://spiral-staircase.neocities.org/checkers.gif);
	text-align:center;

}



#mainDiv {
    font-size:20px;
    font-family:'Courier New';
    font-weight: bold;
    text-shadow: 4px 2px 11px rgba(24,122,157,0.57);
background: transparent;
    text-align: center;
    background-image: linear-gradient(45deg, #474896 , #1B9AA6 33%, #883DB8 67%, #444DC9 100%);
    background-clip:content-box;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
    .marquee {
            width: auto;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            /* Start off the right edge */
            transform: translateX(100%);
            /* Animate to the left */
            animation: scroll-left 10s linear infinite;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(-100%);
            }
        }

body {
  margin: 0;
  padding: 0;
}

h2, p {
  margin: 10px;
}

.draggable {
  position:absolute;
  width: 100px;
  height: 100px;
  cursor: grab;
  user-select:auto;
  border-radius: 5px;
  transition: box-shadow 0.2s;
}