@charset "UTF-8";

/* CSS rules go below */

    body {
        background-color: #ffffff;
        display: flex;
        flex-direction:column;
        align-items: center;
        text-shadow: 0px 0px 2px #000;
      }

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

h1 {
    animation: fadeIn 2s ease-in-out;
    background-color: #ffffff; /* Hintergrundfarbe */
    border: 30px solid rgb(255, 124, 183); /* Rahmenfarbe und -dicke */
    padding: 40px; /* Innenabstand */
    color: #3498db; /* Farbe der Schrift */
    font-size: 200px; /* Schriftgröße */
    font-family: Arial, sans-serif; /* Schriftart */
    text-align: center; /* Text zentrieren */
    margin-top: 0px; /* Oberer Abstand */
    margin-bottom: 10px; /* Unterer Abstand */
    text-transform: uppercase; /* Großbuchstaben */
    text-shadow: 4px 2px 9px rgb(255, 124, 183); /* Textschatten */
    }


    div.solid{
      text-align: left;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      margin-top: 10px;
      margin-bottom: 20px;
      font-size: 10pt;
      font-weight: 550;
  }
  h3 {
    font-family: system-ui, sans-serif;
    font-size: 4rem;
    margin:0;
    cursor: pointer;
    padding: 0 .1em;
    color: #000000;
    margin-top: 50px;
    margin-bottom: 30px;
  }
  h3.hover {
    border: 9px solid;
    border-image: repeating-linear-gradient(135deg,#ff80be 0 10px,#ff558b 0 20px,hsl(339, 100%, 70%) 0 30px) 8;
    -webkit-mask: 
      conic-gradient(from 180deg at top 8px right 8px, #0000 90deg,#000 0)
       var(--_i,200%) 0  /200% var(--_i,8px) border-box no-repeat,
      conic-gradient(at bottom 8px left  8px,  #0000 90deg,#000 0)
       0   var(--_i,200%)/var(--_i,8px) 200% border-box no-repeat,
      linear-gradient(#000 0 0) padding-box no-repeat;
    transition: .3s, -webkit-mask-position .3s .3s;
  }
  .hover:hover {
    --_i: 100%;
    color: #ff80be;
    transition: .3s, -webkit-mask-size .3s .3s;
  }
  .wave {
    float: left;
    margin: 20px;
    animation: wave  ease-in-out 0.5s infinite alternate;
    transform-origin: center -36px;
  }
  
  .wave:hover {
    animation-play-state: paused;
    cursor: pointer;
  }
  
  .wave img {
    border: 10px outset #7df4fc;
    display: block;
    width: 200px;
    height: 250px;
  }
  
  .wave figcaption {
    text-align: center;
    margin-top: 10px;
    font-size:larger;
    text-align: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
  }
  
  .wave:after{
    content: '';
    position: absolute;
    width: 10px; 
    height: 20px;
    border: 1.5px solid;
    top: -10px; 
    left: 50%;
    border-bottom: none;
    border-right: none;
    transform: rotate(35deg);
  }
         
  .wave:before{
    content: '';
    position: absolute;
    top: -23px;
    left: 50%;
    display: block;
    height: 44px;
    width: 47px;
    background-image: url("https://cdn.hashnode.com/res/hashnode/image/upload/v1602040503586/FW6g79WBY.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    z-index: 16;
  }
          
  @keyframes wave {
    0% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
  }

.box {
  margin: 2rem auto;
  margin-top: 65px;
  max-width: 40ch;
  border: 8px solid #0038FF;
  color: #000000;
  padding: 2ch;
  position: relative;
  border-image: 
    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%230038FF'/%3E%3C/svg%3E")
    8 stretch;
}

.box:before {
  content: "";
  position: absolute;
  right: -28px;
  top: calc(50% - 14px);
  width: 24px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0H0v8h12v4h4v4h-4v4H0v8h4v-4h8v-4h4v-4h8v-4h-8V8h-4V4H4V0z' fill='%230038FF'/%3E%3Cpath fill='%23161616' d='M0 8h4v12H0z'/%3E%3C/svg%3E");
}

p {
  margin: 0;
}

p + p {
  margin-top: 1ch;
}

a {
  color: #0038FF;
  font-weight: bolder;
}

.solid_box{
    position: relative;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border: #55ff8b 150px;
    border-style: inset;
    margin-top: 25px;
    margin-bottom: 20px;
    font-size: 50pt;
    font-weight: 550;
}

div.teeth{
    position: relative;
    border: 10px dotted rgb(255, 255, 255);
    background-color: #ff558b; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
    font-weight: 550;
    font-size: 17pt;
    margin-top: 40px;
    margin-bottom: 30px;
    width: 390px;
    height: 40px;
    text-align: center;
    line-height: 1.85;

  }

div.fall{
    margin-top: 60px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
    font-size: 15;
    
}

.tyler{
    margin-top:20px; 
    border-top: #fff700 100px dashed;
    border-right: #fff700 100px double;
    border-bottom: #ff00005a 160px hidden;
    border-left: #8f0c565a 160px dashed;
    margin-bottom: 20px;
    border-radius: 20px;
    
}

div.groove_border{
  text-align: center;
  margin-top: 100px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
  font-weight: 550;
  font-size: 17pt;
}

.whacky{
    border-left: #0038FF 90px groove;
    border-right: #ff0000 90px ridge;
    border-top: #ff0000 90px groove;
    border-bottom: #0038FF 90px ridge;
    margin-bottom: 20px;
    border-radius: 90px;
    margin-top: 30px;
}

div.border_trump{
    text-align: center;
    margin-top: 70px;
    font-weight: 550;
    font-size: 17pt;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
}

div.trump{
    border-image: url("../../content/75.jpeg") 10% round;
    border-image-width: 150px;
    border-image-outset: 80px;
    margin-top: 110px;
    border-radius: 100px;
    margin-bottom: 140px;
    overflow: hidden;
}

div.border_trump{
  font-size: 15pt;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

div.cross_border{
  margin-top: 30px;
  border: 12px solid chartreuse;
  outline: 10px solid rgba(0, 255, 179, 0.854);
  margin-bottom: 80px;
}


footer{
    background-color: #ff4800;
    margin-top: 20px;
    border: 40px rgb(236, 224, 219) solid;
    border-radius: 40px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bold;
    text-align: center; 
    font-size: 16PT;
    margin: auto 0;
    margin-top: 20px;
    padding: 5px
  }