*{
    cursor: url("rot.png"), pointer;
    cursor: url("rot.png"), crosshair;
}


marquee{
   font-size: 24px;
}

body{
   margin: 0;
   min-height: 100vh;
   background: #fff;
   position: relative;
}



iframe{
   border-radius: 50%;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   /** box-shadow: 0 0 40px 5px #00ff66;
    border: none;**/
}



.txt-up{
  -webkit-writing-mode: vertical-rl;
  white-space: nowrap;
  height: 100vh;
}




/*** iframes ***/

.if-center{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    filter: blur(6px);
    width: 60vmin;
    height: 60vmin;
    /*box-shadow: 2px 2px 40px 8px #71de62;*/
    transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 5;
}

.if-1{
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 97vmin;
    height: 97vmin;
    z-index: 1;
    filter: invert(1);
}


.if-2{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vmin;
    height: 90vmin;
    filter: invert(1);
      z-index: 2;
}


.if-3{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80vmin;
    height: 80vmin;
    filter: invert(1);
      z-index: 3;
}


.if-4{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70vmin;
    height: 70vmin;
    filter: invert(1);
    z-index: 4;
}



/*** iframe effects ***/
.if-center:hover{
    filter: none;
}


/* Button link styles */
.button-link {
    font-size: 2em;
    font-family: arial;
    text-decoration: none;
    color: black;
    background: #d0cfcf;
    border-radius: 3px;
    border: black 1px solid;
    padding: 6px 8px;
    cursor: pointer;
}

.button-link:hover {
    box-shadow: #12f00d 0px 0px 10px 0px;
    filter: none;
}

.center-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: auto;
}


.intro{
    height: 100vh;
    box-shadow: inset 1px 1px 20px 11px #00ff66;
    width: 100%;
    margin-top: 0px;
}


.intro-text{
    color: #000000;
    padding: 1em;
    font-family: arial narrow;
    font-size: 2.5em;
    margin-top: 0px;
    transition: font-size 4s ease;
    position: relative;
    text-emphasis:  #85e083;
    text-emphasis-style: "⊛";
}

.intro-text:hover{
    z-index: 100;
    position: absolute;
    font-size: 4em;
   
}



/* Responsive Design */
@media (max-width: 768px) {
    .if-center,
    .if-1,
    .if-2,
    .if-3,
    .if-4 {
        width: 80vmin !important;
        height: 80vmin !important;
    }
    
    .txt-up {
        font-size: 18px;
    }
    
    marquee {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .if-center,
    .if-1,
    .if-2,
    .if-3,
    .if-4 {
        width: 90vmin !important;
        height: 90vmin !important;
    }
    
    .txt-up {
        font-size: 14px;
    }
    
    marquee {
        font-size: 14px;
    }
}