@import url(https://fonts.googleapis.com/css?family=Playfair+Display);

@font-face {
    font-family: 'Cyrillic Old Face';
    src: URL('https://odoomagic.com/Hitler/cyrillicoldface.ttf') format('truetype');
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
* {
  box-sizing: border-box;
}

/** Dark/Light mode **/

body {
  --card-border:  1px solid #AAA;
  --card-shadow: 5px 5px 10px rgba(69, 42, 42, 0.8);
  --card-shadow-hover: 2px 2px 5px rgba(128, 42, 42, 0.2);
}

body.dark {
}

.experience {
  display: flex;
  flex-direction: column;
}
.experience span{
    /* Photo FRAME */
    padding: 1em 2em 4em;
}
@media screen and (max-height: 520px) {
  .experience {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/* Default padding */
.odoo {
    padding: 2rem 2rem 3rem 6rem; /* This is applied when none of the below conditions are met */
}

/* Smaller devices (phones, tablets in portrait) */
@media (max-width: 600px) {
    .odoo {
        padding: 1rem; /* Smaller padding for smaller screens */
    }
}

/* Medium devices (tablets in landscape) */
@media (min-width: 601px) and (max-width: 900px) {
    .odoo {
        padding: 1.5rem 1.5rem 2rem 4rem; /* Slightly larger padding */
    }
}

/** Text Cards **/
article .odoo:not(:has(.experience img)), article .odoo:not(:has(.experience witch)) {
    border: var(--card-border);
    border-radius: 10px;
	  box-shadow: var(--card-shadow);
	  transition-duration:300ms;
    margin-bottom: 1rem;
    text-align: justify;
}
article .odoo:not(:has(.experience img)) *, article .odoo:not(:has(.experience witch)) * {
    display: inline;
}
/** Text Cards :hover **/
article .odoo:not(:has(.experience img)):hover,
article .odoo:not(:has(.experience img)):active {
	  box-shadow: var(--card-shadow-hover);
}

/****** CardMAGIC background ********************/


.CardMAGIC {
    position: relative;
    overflow: hidden;
    border: var(--card-border);
    box-shadow: var(--card-shadow);
    border-radius: 2rem;
}

.CardMAGIC .card {
    background-color: transparent;
    z-index: 1;
}

.CardMAGIC::before,
.CardMAGIC::after,
.CardMAGIC > .card::before,
.CardMAGIC > .card::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background-image: url('https://shabbat.lamourism.com/wikipedia/commons/f/fe/Used_Punchcard_(5151286161).png');
    background-size: cover;
    transition: transform 0.5s ease;
}

.CardMAGIC::before {
    top: 0;
    left: 0;
    z-index: 0;
}

.CardMAGIC::after {
    top: 0;
    right: 0;
    transform: scaleX(-1);
    z-index: 0;
}

.CardMAGIC > .card::before {
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
    z-index: 0;
}

.CardMAGIC > .card::after {
    bottom: 0;
    right: 0;
    transform: scaleX(-1) scaleY(-1);
    z-index: -1;
}

.CardMAGIC:hover {
    box-shadow: var(--card-shadow-hover);
}

/**************************/

article h1,
article h2,
article h3,
article h4,
article h6 {
    font-size: 200%;
    text-align: center;
    margin: 3rem;
}
article h5 {
    font-size: 120%;
    margin: 0;
}



body{
    font-family: Ubuntu, "times new roman", times, roman, serif;
    font-size: 1.5em;
    color:#282F33;
}

article {
    font-family: Ubuntu, "times new roman", times, roman, serif;
}

.CyrillicMAGIC, h5 {
    font-family: "Cyrillic Old Face", Ubuntu, "times new roman", times, roman, serif;
}

.CyrillicMAGIC {
    font-size: 300%;
}

article a {
    text-decoration: none;
}

h1{
    color: #21272B;
}

.bg {
    position:relative;
}
.bg:after{
    content: "";
    background-image: url('https://odoomagic.com/Hitler/bg.png');
    opacity: 0.1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
.title {
    font-size: 72px;
}
.magic {
    font-weight: bold;
    background: -webkit-linear-gradient(45deg, #9e26dd, #fe6c03);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.supermagic {
    font-weight: bold;
    background: -webkit-linear-gradient(45deg, #fe6c03, #9e26dd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a.nomagic {
    text-decoration:none;
}
a.nocursor:hover {
    cursor:none;
}

.circle {
    border-radius: 50%;
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
    -webkit-transform: rotate(0.000001deg); 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%;
}


.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


article .odoo:has(.experience witch),
article .odoo:has(.experience img) {
  /*slanted rainbow background */
  background-image: linear-gradient(45deg, #b145c7 9%, #7646d6 9%, #7646d6 18%, #4a5adb 18%, #4a5adb 27%, #4a78e4 27%, #4a78e4 36%, #3a9dcf 36%, #3a9dcf 45%, #38bf73 45%, #38bf73 54%, #80c83b 54%, #80c83b 63%, #cad839 63%, #cad839 72%, #e7ba37 72%, #e7ba37 81%, #e77337 81%, #e77337 90%, #e9411f 90%, #e9411f 100%, #b145c7 100%);
  padding:12px 0;
  width:80%;
  margin: 5rem auto 2%;
}
article .odoo:not(:has(.experience witch)),
article .odoo:not(:has(.experience img)) {
    background-color: white;
}

article .odoo > .experience witch,
article .odoo > .experience img {
  width: 97%;
  height: auto;
  display: block;
  margin:  auto;
  padding: 5%;
  border: 6px double rgba(197,197,197,.7);
  box-shadow:
    /*inside picture frame, after double border */
    0 0 0 2.5vw rgba(193,193,194,.2) inset,

    /*inside picture frame, after double border - inset overlay*/
    0 50px 60px rgba(255,50,20,.75) inset,
    0 -50px 60px rgba(250,250,50,.75) inset,
    50px 0 60px rgba(50,20,250,.75) inset,
    -50px 0 60px rgba(250,50,250,.75) inset,

    /*outer picture frame border*/
    0 0 0 11px rgba(83, 83, 83,.7);

  opacity:.89;
}

@keyframes moveUpDown {
    0% {
        transform: rotate(180deg) translateY(-3px);
    }
    50% {
        transform: rotate(180deg) translateY(10px);
    }
    100% {
        transform: rotate(180deg) translateY(0);
    }
}

.ThePirateCIRCUS {
    display: inline-block;
    animation: moveUpDown 2s infinite;
}



.ThePIRATES {
    text-align: center;
    font-weight: bold;
    font-size: 200%;

    background: linear-gradient(45deg,#FFFFFF, #e7e7e7,#e52e71, #FF0000);
    background-size: 500% 500%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: TheOCEAN 10s ease infinite;
}

.PiratesTHE {
    background: linear-gradient(45deg,#000000, #e52e71, #e7e7e7, #000000);
    background-size: 500% 500%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: TheOCEAN 10s ease infinite;
}

@-webkit-keyframes TheOCEAN {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes TheOCEAN {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


/*
 *   https://codepen.io/pedroo-andre/pen/gOeqqEb
 *
 ************************************************/

TheExecutionGROUND, TheExecutionGROUND * {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
}


.TheExecutionGROUND {
	  position: relative;
	  width: 100%;
	  height: 400px;
	  border-radius: 100vmax;
	  display: flex;
	  align-items: center;
	  justify-content: center;
}

@keyframes scaleFire {
    0% {
        transform: translate(-50%, -50%) scale(1); /* Original size */
    }
    50% {
        transform: translate(-50%, -50%) scale(2.5); /* Scale up */
    }
    100% {
        transform: translate(-50%, -50%) scale(1); /* Back to original size */
    }
}

.TheHolyFIRE {
    cursor: grab;
    position: absolute;
    z-index: 42;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    animation: scaleFire 8s linear infinite; /* Apply the animation */
}

.TheMAGICIANS {
	  position: absolute;
	  width: 400px;
	  height: 100%;

    top: 50%;  /* Align vertically centered */
    left: 50%; /* Align horizontally centered */
    transform: translate(-50%, -50%); /* Adjust to center */

	  font-family: consolas;
	  color: #000;
	  font-size: 32px;
	  animation: rotate 8s cubic-bezier(0.14, 0.53, 0.93, 0.59) infinite;

}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform:  translate(-50%, -50%) rotate(-360deg);
    }
}

.TheMAGICIANS a {
	  position: absolute;
	  left: 50%;
	  font-size: 2em;
	  transform-origin: 0 200px;
    text-decoration: none;
    width: 400px;
}

.hljs-title {
    color: #01FF10;
}

.TheMAGICIANS a.hidden {
    display: none;
}

.hljs-keyword {
    color: #0101FF
}

.TheMAGICIANS a span {
    letter-spacing: -0.2em;
}
/*<!-- WitchCRAFT -->*/

.MagicMIRROR-X {
    transform: scaleX(-1);
}

.hljs-string {
    color: black;
}

.MagicMIRROR-Y {
    transform: scaleY(-1);
}

.hljs{
    background: rgba(255, 0, 255, 0.03);
}

.MagicMIRROR-XY {
    transform: scaleX(-1) scaleY(-1);
}

pre code, code {
    color: #F00;
}

.MagicMIRROR-Z {
    transform: scaleZ(-1);
}