body{
  cursor: url('Batcursor.png'),auto;
margin:0;
background-image:url(images/download.jpg);
background-repeat:no-repeat;
background-size:2000px,2000px;
font-family: "Press Start 2P", system-ui;
}
  


.container{ margin:50px auto;
    padding:1px;
    max-width:1000px;
    max-height:1000;
    display:grid;
    grid-gap:50px;
   grid-template-columns:250px minmax(0,ifr);
   cursor: url('Batcursor.png'),auto;
}
.container2{
  padding:1px;
  display:grid;
  overflow:hidden;
  cursor: url('Batcursor.png'),auto;
  }

.main{
  position:fixed;
  background-image: url(images/TABLET%20SCREENSHOT%20BACKGROUND.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
    overflow:hidden;
    color:darkgoldenrod;
    border:70px solid black;
     border-image:url(images/golden-photo-frame.png)33% round;
      height:max-content;
    width:500px;
    top:35px;
    right:90px;
}

.image{
  top:8px;
  left:20px;
    width:50%;
    height:50vh;
    display:grid;
    justify-content: center;
    align-items: center;
}
.image img{
  top:8px;
  left:20px;
    height:300px;
    width:300px;
    border-radius: 50%;
    border:10px solid #8a00ff;
}

body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('images/stars.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

.circle{
            background-color:blueviolet;
            width:100px;
            height:100px;
            top:200px;
            left:500px;
            border-radius:50%;
            border-color:black;
            position:absolute;
            transition-property:transform;
            transition-duration:0.3s;
            transition-timing-function:ease-in-out;
            transition-delay:0s;
             display:flex;
            
    }
    .circle:hover{ transform: translateY(-10px);
    }
    
.content{
    position:absolute;
    width:inherit;
    height:auto;
    top:20%;
    right:25px;
    transform:translate y(-50%);
    color:#491655;
    font-style:italic;
    font-family: "Press Start 2P", system-ui;
    text-align:center;
}
.circle2{
            background-color:blueviolet;
            width:100px;
            height:100px;
            top:200px;
            left:100px;
            border-radius:50%;
            border-color:black;
            position:absolute;
            transition-property:transform;
            transition-duration:0.3s;
            transition-timing-function:ease-in-out;
            transition-delay:0s;
             display:flex;
    }
    .circle2:hover{ transform: translateY(-10px);
    }
    
.content2{
    position:absolute;
    width:inherit;
    height:auto;
    top:20%;
    right:20px;
    transform:translate y(-50%);
        text-align:center;
    color:#491655;
    font-style:italic;
    font-family: "Press Start 2P", system-ui;
    font-size:xx-small;
}
.circle3{
            background-color:blueviolet;
            width:100px;
            height:100px;
            top:320px;
            left:300px;
            border-radius:50%;
            border-color:black;
            position:absolute;
            transition-property:transform;
            transition-duration:0.3s;
            transition-timing-function:ease-in-out;
            transition-delay:0s;
             display:flex;
    }
    .circle3:hover{ transform: translateY(-10px);
    }
    
.content3{
    position:absolute;
    width:inherit;
    height:auto;
    top:20%;
    right:20px;
    transform:translate y(-50%);
        text-align:center;
  font-family: "Press Start 2P", system-ui;
    color:#491655;
    font-style:italic;
    font-size:small;
}
.circle4{
            background-color:blueviolet;
            width:100px;
            height:100px;
            top:310px;
            left:460px;
            border-radius:50%;
            border-color:black;
            position:absolute;
            transition-property:transform;
            transition-duration:0.3s;
            transition-timing-function:ease-in-out;
            transition-delay:0s;
             display:flex;
    }
    .circle4:hover{ transform: translateY(-10px);
    }
    
.content4{
    position:absolute;
    width:inherit;
    height:auto;
    top:20%;
    right:27px;
    transform:translate y(-50%);
        text-align:center;
    font-family: "Press Start 2P", system-ui;
    color:#491655;
    font-style:italic;
    font-size:x-small;
}

#scare {
text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000, 0 0;
 font-style: normal;
 font-size:2em;
 font-weight:bold; 
 color: #401758;
}



.link {
position: relative;
transition: clip-path 275ms ease;
}
.link:hover span::before, .link:focus span::before {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.link span {
position: relative;
display: inline-block;
}
.link span::before {
position: absolute;
content: attr(data-content);
text-decoration: underline;
clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
transition: clip-path 275ms ease;
}
span.wavy::before {
text-decoration-style: wavy;
}