html {
margin: auto;
height: 100%;
scroll-behavior: smooth;
font-size: 10pt;
}

body {
background: #ff69b4;
font-family: Arial,  monospace;
margin-top: 2px;
text-align: center;
 perspective: 500px;
}

img {
max-width: 100%;
}

p {
background: greenyellow;
color: white;
border-radius: 2em;
padding: 1em;
font-size: 2em;
max-width: 60%;
margin: 3em auto;
box-shadow: 0 0 1em 0 pink;
}

h3 {
background: greenyellow;
color: white;
border-radius: 1em;
padding: 1em;
font-size: 2em;
max-width: 60%;
margin: 1em auto;
box-shadow: 0 0 1em 0 pink;

}

h1 {
   line-height: 1;
   color: pink;
   padding: 3rem;
   border-radius: 10em;
   width: fit-content;
   font-size: clamp(2rem, 10vw, 8rem);
   box-shadow: inset 0 0 1em pink;
   margin: 0;
   font-family: Helvetica, Arial, sans-serif;
}

.welcome {
    line-height: 1;
    color: pink;
    font-family: Arial;
    font-size: clamp(4rem, 10vw, 10rem);
    border-radius: 10em;
    padding: clamp(1rem, 5vw, 3rem);
    width: fit-content;
    max-width: 90%;
    box-sizing: border-box;
    box-shadow: inset 0 0 1em pink;
    margin: 0 auto;
}

.what {
    font-weight: bold;
    font-family: arial;
    text-shadow: 0 0 0.5em deeppink;
    font-size: clamp(4rem, 5vw, 8rem);
    padding: 1rem;
    margin: 1rem;
    border: 25px double  rgb(255,255,0);
    background-color: lightgray;
    /* box-shadow: 2px 2px 15px rgb(228, 48, 78);*/
    overflow-wrap: anywhere;
    caret-color: rgb(0, 0, 0);
    letter-spacing: normal;
    text-align: center;
    background-colmarqueeor: rgb(211, 211, 211);
    width: fit-content;
}

.install {
   font-size: clamp(4rem, 5vw, 8rem);
font-weight: bold;
    font-family: arial;
    color: gray;
      border-radius: 10em;
      background-color: rgb(211, 211, 211); 
}

.installation {
   font-family: Arial, Helvetica, sans-serif;
         background-color: pink; 
         font-size: 2rem;

}

.links3 {
  font-size: 20px;
    font-weight: bold;
color: gray; 
font-family: Helvetica;
 font-style: normal;
  font-variant-caps: normal;
   letter-spacing: normal;
 text-align: start; 
 text-indent: 0px; 
 text-transform: none; 
 white-space: normal;
 word-spacing: 0px;
  -webkit-text-stroke-width: 0px;
   background-color: pink
}

.installlinks {
  color: white; 
  text-decoration: underline; 
  caret-color: rgb(0, 0, 0); 
  font-family: monospace;
   font-size: 20px;
    font-style: normal; 
    font-variant-caps: normal;
     font-weight: 400; 
     letter-spacing: normal; 
     text-align: start;
      text-indent: 0px;
       text-transform: none; 
       white-space: normal;
     word-spacing: 0px; 
     -webkit-text-stroke-width: 0px;
      background-color: rgb(211, 211, 211);

}
.server {
font-weight: bold;
line-height: 1;
color: pink; 
padding: 3vw; 
border-radius: 10em; 
width: fit-content;
font-size: clamp(4rem, 5vw, 8rem);
box-shadow: inset 0 0 1em pink;
margin: 0;
font: Arial;
color:#ffc0cb;

}

.intro {
    font-size: 2rem;  
    font-family: arial;
    border: 10px double yellow; 
    font-weight: 400;
    background-color: rgb(211, 211, 211);
    text-align: center;

}


.intro12 {
     font-size: 2rem;  
      color: gray;
  font-family: Arial, Helvetica, sans-serif;
   border: 10px double yellow; 
  background-color: rgb(211, 211, 211);
text-align: center;
}



.intro2 {
    color: rgb(255, 105, 180); 
    font-family: Arial, Helvetica, sans-serif;
     font-size: 2rem;
      font-style: normal; 
      font-variant-caps: normal; 
      font-weight: 400; 
      letter-spacing: normal;
       orphans: 2;
        text-indent: 0px;
         text-transform: none; 
         white-space: normal; 
         widows: 2; 
         word-spacing: 0px;
          -webkit-text-stroke-width: 0px;
           background-color: rgb(239, 239, 239);
            text-decoration: none;
             display: inline;
              float: none;
}

.writing {
   font-family: arial; 
   text-shadow: 0 0 3px white;
   background-color:pink;
   border: 3vw; 
   text-align: center;
color: white;
border-radius: 2em;
padding: 1em;
font-size: 2em;
max-width: 60%;
margin: 3em auto;
box-shadow: 0 0 1em 0 pink;
}

.resources {
       font-family: arial; 
   text-shadow: 0 0 3px white;
   background-color:pink;
   border: 3vw; 
   text-align: center;
color: white;
border-radius: 2em;
padding: 1em;
font-size: 2em;
max-width: 60%;
margin: 3em auto;
box-shadow: 0 0 1em 0 pink;
}
.bubble {
    text-align: center;
     padding: 5px;
      border-radius: 400px; 
      background: radial-gradient(#FF6F61, 25%, #fff); 
      font-size: 2em;
       color: rgb(88,88,88);
        padding: 100px; 
         font-weight: 400 coral;
}

.terminal {
    caret-color: rgb(0, 0, 0); 
    color: rgb(255, 105, 180); 
    font-family: monospace; 
    font-size: xx-large;
     font-style: normal;
      font-variant-caps: normal;
       font-weight: bold; 
       letter-spacing: normal;
        orphans: 2;
         text-align: center;
          text-indent: 0px; 
          text-transform: none;
           white-space: normal; 
           widows: 2;
            word-spacing: 0px; 
            -webkit-text-stroke-width: 0px; 
            background-color: rgb(0, 0, 0);
             text-decoration: none; display:
              inline; float:
               none; text-shadow:0 0 0 black;

}



.responsive {
  width: 75%;
  height: auto;
  max-width: 500px;
}


.tabs {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
gap: 2rem;
width: 100%;
max-width: 1200px;
margin: 3rem auto;
padding: 1rem;
box-sizing: border-box;
font-size: clamp(3rem, 4vw, 4rem);
}

.tabs a {
font-family: cursive;
border-radius: 2rem;
background: pink;
font-size: clamp(3rem, 4vw, 4rem);
color: #fff;
padding: 2rem 1rem;
text-decoration: none;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 0;
flex: 1 1 0;
box-shadow: 0 0 20px rgba(255, 20, 147, 0.5);
transition: transform 0.2s, box-shadow 0.2s;
}

/*tabs a:hover { 
transform: scale(1.05);
box-shadow: 0 0 30px deeppink;
}*/

@media screen and (max-width: 600px) {

.tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    width: 100%;
    padding: 1rem;
}

.tabs a {
    width: 100%;
    font-size: 25px;
    border-radius:2rem ;
    padding: 1.5rem 1rem; ;
    flex:none ;
    min-height: 90px;
}

}

.installation {
    font-weight: bold;
line-height: 1;
color: pink; 
padding: 3vw; 
border-radius: 10em; 
width: fit-content;
font-size: clamp(4rem, 5vw, 8rem);
box-shadow: inset 0 0 1em pink;
margin: 0;
color:#ffc0cb;
}

.hosting {
color: white;
font-weight: bold;
font-family: sans-serif; 
text-shadow: 0 0 0.5em deeppink;
font-size: clamp(4rem, 5vw, 8rem);
overflow: visible; 
font-family: monospace;
border: 25px double yellow;
box-shadow: white 2px 2px 15px;
caret-color: pink;
font-style: normal; 
font-variant-caps: normal; 
font-weight: 800; 
letter-spacing: normal;
text-align: center;
text-transform: none; 
white-space: normal;
background-color: rgb(211, 211, 211); 
text-decoration-line: none; 
text-decoration-thickness: auto; 
text-decoration-style: solid;
}

.links {
    font-size: 20px;
    font-weight: bold;
color: gray; 
font-family: Helvetica;
 font-style: normal;
  font-variant-caps: normal;
   letter-spacing: normal;
 text-align: start; 
 text-indent: 0px; 
 text-transform: none; 
 white-space: normal;
 word-spacing: 0px;
  -webkit-text-stroke-width: 0px;
   background-color: rgb(211, 211, 211);
    text-decoration-line: none; 
    text-decoration-thickness: auto;
    text-decoration-style: solid;
}


.links2 {
color: white;
 text-decoration: underline;
  caret-color: rgb(0, 0, 0); 
  font-family: monospace; 
  font-size: 20px;
   font-style: normal;
    font-variant-caps: normal;
     font-weight: 400;
      letter-spacing: normal; 
      text-align: start; 
      text-indent: 0px;
       text-transform: none; 
       white-space: normal; 
     word-spacing: 0px;
      -webkit-text-stroke-width: 0px;
       background-color: rgb(211, 211, 211);
}


.hide {
  display: none;
}
    
#heart:hover + .hide {
  display: block;
  color: white;
  font-size: clamp(2rem, 5vw,);
  font: cursive;
}

.marquee {
 font-family: cursive;
 color: white;
border-radius: 2rem;
background: pink;
font-size: clamp(3rem, 4vw, 4rem);
color: #fff;
}


@keyframes rotation {
  0% {
    rotate: var(--axis) 0;
  }
  100% {
    rotate: var(--axis) 360deg;
  }
}


#heart {
   --axis: y;
position: relative;
width: clamp(70px, 20vw, 100px);
height: 90px;
margin: 50px auto 30px;
 animation: rotation 3s linear infinite;
  transform-style: preserve-3d;
    perspective: 500px;
}

#heart::before,
#heart::after {
content: "";
position: absolute;
top: 0;
width: 52px;
height: 80px;
border-radius: 50px 50px 0 0;
background: pink;
}

#heart::before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}

#heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}

.heart2 {
width: 200px;
display: inline-block;

-webkit-mask:
    radial-gradient(circle at 60% 65%, red 64%, transparent 65%) top left,
    radial-gradient(circle at 40% 65%, red 64%, transparent 65%) top right,
    linear-gradient(to bottom left, red 43%, transparent 43%) bottom left,
    linear-gradient(to bottom right, red 43%, transparent 43%) bottom right;

-webkit-mask-size: 50% 50%;
-webkit-mask-repeat: no-repeat;

mask:
    radial-gradient(circle at 60% 65%, red 64%, transparent 65%) top left,
    radial-gradient(circle at 40% 65%, red 64%, transparent 65%) top right,
    linear-gradient(to bottom left, red 43%, transparent 43%) bottom left,
    linear-gradient(to bottom right, red 43%, transparent 43%) bottom right;

mask-size: 50% 50%;
mask-repeat: no-repeat;

background: linear-gradient(black, pink);
}

.heart2::before {
content: "";
display: block;
padding-top: 100%;}


@media all and (min-width: 600px) {

}


  @media screen and (max-width: 500px) {
  .left, .main, .right {
    width: 100%; 
  }
}

@media screen and (max-width: 500px) {
    .left, .main, .right {width: 100%; }
}