* {
  transition:250ms;
  font-family: 'monospace';
}

body { 
  padding-left: 1%;
  padding-right: 1%;
  background-color: #f0f0f0;
  color:black;
  padding-bottom:20px;
  margin:0px;
}

.content {
  max-width: 1000px;
  margin:auto;
  padding:0px;
}
.button-contain {
  display:grid;
  grid-gap:0px;
  grid-template-columns: 50% 50%;
}
.box {
  outline:1px dashed rgba(0,0,0,1);
  margin:5px;
  padding: 10px;
  border-radius:  12px;
  background-color: #ffffff;
  box-shadow: #dddddd 1px 1px 1px 1px;
  text-align: center;
  /*max-width: 800px;*/
  height: auto;
  align-items:center;
  
  display:flex;
  flex-direction:column;
  flex-grow:1;
  
  font-size:1.3em;
  user-select:none;
  -webkit-user-select: none;
}
.box-left {
  grid-column: 1 / 2;
}
.box-right {
  grid-column: 2 / 2;
}
.box-single {
  grid-column:1 / 3;
}

.box:hover {
  box-shadow: #dddddd 2px 2px 2px 2px;
  cursor:pointer;
  transform:scale(1.03);
  background-color: #62a0ea;
  color:#ffffff;
}

.box:active {
  transform:scale(0.95);
  box-shadow: #dddddd 0px 0px 0px 0px;
  background-color: #1c71d8;
  color:white;
}

.wibbly {
  animation:wobble 6s linear infinite;
  //animation-iteration-count:infinite;
  //animation-direction:alternate;
  
  background-color:fuchsia;
  width:50px;
  height:50px;
  border-radius: 50% 50% 50% 5px;
  margin:auto;
  margin-top:50px;
  margin-bottom: 30px;
  outline:2px inset aqua;
}

.wibbly:hover {
  background-color:lime;
  transform:scale(2.0);
}

.main-title {
margin-left: 10px;
animation:text-slide 3s ease;
white-space: nowrap;
}

.textpod {
  background-color: #ffffff;
  padding: 50px;
  border-radius:12px;
  box-shadow: #dddddd 1px 1px 1px 1px;
  text-align: justify;
  height: auto;
  align-items:center;
  margin-left:5px;
  margin-right:5px;
  margin-top: 15px;
}

img {
  width:100%;
  border-radius:  12px;
}
.img-article {
  display:block;
  max-width:400px;
  margin:auto;
}
code {
background-color: #f0f0f0;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.fancy-button {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  user-select: none;
  display:block;
}

.button-shadow {
  position: absolute;
  background-color:lightgray;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  transform: translateY(2px);
  will-change: transform;
  transition: 500ms;
}

.button-edge {
  position: absolute;
  background-color: #26a269;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.button-front  {
  position: relative;
  background-color: #33d17a;
  border-radius: 12px;
  transform: translateY(-4px);
  will-change: transform;
  transition: 500ms;
}

@keyframes wobble {
  0% {
    transform:rotate(0deg);
  }
  
  100% {
    transform:rotate(360deg);
  }
  
  
}

@keyframes text-slide {
    from {
      margin-left:150%;
      color:transparent;
    }
    to {
      margin-left:10px;
      color: black;
    }
    
  }


@media (prefers-color-scheme: dark) {
  /* Dark theme style*/
  body {background-color: #333;color:white;}
  .box {
  border-radius:50px;
  
  }
  .box {
  box-shadow: #000000 1px 1px 1px 1px;
  background-color:#555;
  }
  .box:hover {box-shadow: #000000 2px 2px 2px 2px;}
  
  .textpod {
    box-shadow: #000000 1px 1px 1px 1px;
    background-color:#555; 
  }
  
  @keyframes text-slide {
    from {
      margin-left:150%;
      color:transparent;
    }
    to {
      margin-left:10px;
      color: white;
    }
    
  }
}