@media only screen and (min-width: 0px) {
  :root {
    --full-s: 90vw;
    --size: 1;
  }
  html,
  body {
    overflow-x: hidden;
  }

  a {
    color: inherit;
    text-decoration: inherit;
  }

  button {
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    border: none;
    outline: none;
  }

  h1 {
    /*K U B E U S*/
    margin-top: 2.5vw;
    font-size: 6.75vw;
    letter-spacing: 1vw;
    vertical-align: middle;
    line-height: 0.1vw;
  }

  h2 {
    /*K U B A   M R O Z E K*/
    margin-top: 0.1vw;
    line-height: 0.1vw;
    font-size: 1.2vw;
    font-weight: 300;
    letter-spacing: 1.7vw;
  }

  h3 {
    margin-top: 0.5vw;
    font-size: 1.2vw;
    font-weight: 500;
    line-height: 1.2vw;
  }
  h4 {
    margin-top: 0;
    margin-bottom: 0.4vw;
    font-size: 1vw;
    font-weight: 500;
  }

  p {
    margin-bottom: 1vw;
    margin-top: 0;
    font-size: 0.8vw;
    font-weight: 300;
  }

  body {
    margin: auto;

    width: 95vw;
    font-family: "Roboto", sans-serif;
    color: #efefef;
    display: flex;
    justify-content: center;
    background-color: rgba(10, 10, 10, 1);
  }

  .container {
    width: 72vw;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1vw;
    justify-content: center;
    margin-top: 0.5vw;
  }

  header {
    width: 35vw;
    height: 8vw;
    text-align: center; /* centruje w poziomie */

    vertical-align: middle;
  }

  #description {
    width: 34vw;
    height: 8vw;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
  }

  #description p {
    font-size: 0.8vw;
  }

  #experience p {
    font-size: 0.65vw;
  }

  .graphic {
    width: 35vw;
    height: 35vw;
    gap: 1vw;
    display: flex;
  }

  .pion {
    display: flex;
    flex-direction: column;
    gap: 1vw;
  }

  img {
    height: 100%;
    width: 100%;
    opacity: 0.98;
  }

  img:hover {
    -webkit-transform: scale(0.993);
    -ms-transform: scale(0.993);
    transform: scale(0.993);
    transition: all 0.4s ease-in-out;
    object-fit: contain;
  }
  #photo1 {
    width: 23vw;
    height: 23vw;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25;
  }

  #photo1:hover {
    filter: drop-shadow(0px 0px 10px rgba(255, 0, 0, 0.3));
  }

  #photo2 {
    width: 23vw;
    height: 11vw;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25;
  }

  #photo2:hover {
    filter: drop-shadow(0px 0px 10px rgba(218, 170, 13, 0.2));
  }

  #logo {
    width: 11vw;
    height: 11vw;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25;
  }

  #logo:hover {
    filter: drop-shadow(0px 0px 10px rgba(0, 121, 78, 0.3));
  }
  #photo3 {
    width: 11vw;
    height: 23vw;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25;
  }
  #photo3:hover {
    filter: drop-shadow(0px 0px 10px rgba(36, 33, 255, 0.3));
  }
  /*---------------------------------------------------------------------------------------------------------------*/
  /*---------------------------------------------------------------------------------------------------------------*/
  /*---------------------------------------------------------------------------------------------------------------*/
  .right {
    width: 35vw;
    display: flex;
    flex-wrap: wrap;
    gap: 1vw;
  }
  #okladka {
    height: 10vw;
    width: 10vw;
    margin-right: 0.5vw;
    outline: 2px solid rgba(0, 121, 78, 0.6);
  }

  /* The flip cd container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
  .flip-cd {
    width: 22vw;
    height: 10vw;
    padding: 0.5vw;
    background-color: rgba(10, 10, 10, 1);
    outline: 1px solid rgba(0, 121, 78, 0.6);
    perspective: 5000px; /* Remove this if you don't want the 3D effect */
  }
  .flip-cd:hover {
    filter: drop-shadow(0px 0px 10px rgba(0, 121, 78, 0.5));
    outline: 1px solid rgba(0, 121, 78, 0.8);
  }

  .flip-cd-front h3 {
    animation: change 5s ease-in-out;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: forward;
  }

  @keyframes change {
    from {
      filter: drop-shadow(0px 0px 0.2vw rgba(0, 121, 78, 0.3));
    }
    50% {
      color: rgba(0, 121, 78, 1);
      filter: drop-shadow(0px 0px 1.2vw rgb(0, 121, 78));
    }
    to {
      filter: drop-shadow(0px 0px 0.2vw rgba(0, 121, 78, 0.3));
    }
  }
  #cta {
    font-size: 0.8vw;
    text-align: center;
    margin-top: 0.5vw;
  }
  #claim {
    font-size: 0.48vw;
    text-align: center;
    margin-top: -0.5vw;
  }
  #cursor {
    margin-left: 2vw;

    width: 3.5vw;
    height: auto;
  }

  /* This container is needed to position the front and back side */
  .flip-cd-inner {
    position: relative;
    width: 100%;
    height: 100%;

    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  /* Do an horizontal flip when you move the mouse over the flip box container */

  .flip-cd:hover .flip-cd-inner {
    transform: rotateY(180deg);
  }

  /* Position the front and back side */
  .flip-cd-front,
  .flip-cd-back {
    position: absolute;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    background-color: rgba(10, 10, 10, 1);
  }

  /* Style the front side (fallback if image is missing) */
  .flip-cd-front {
    display: flex;
  }

  /* Style the back side */
  .flip-cd-back {
    transform: rotateY(180deg);
  }
  .flip-cd h3 {
    text-align: center;
    margin: 0.2vw;
    padding-top: 0vw;
    font-size: 1.5vw;
    animation: change 3s ease-in-out;
    animation-delay: 0;
    animation-iteration-count: infinite;
    animation-direction: forward;
  }
  #sale {
    margin-top: -0.2vw;
    font-size: 1.2vw;
    border-radius: 0.7vw;
    padding: auto;
    width: 16vw;
    height: 2.2vw;
    background-color: rgba(0, 121, 78, 1);
    color: rgba(255, 255, 255, 0.938);
  }
  #sale:hover {
    filter: drop-shadow(5px 5px 20px rgba(0, 121, 78, 0.7));
    outline: 1px solid rgba(0, 121, 78, 0.8);

    color: rgba(255, 255, 255, 1);
  }

  .m_kw {
    width: 22vw;
    height: 22vw;
    padding: 0.5vw;

    background-color: rgba(10, 10, 10, 0.8);
    outline: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.25s ease-in-out;
  }

  .m_kw:hover {
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));
    outline: 1px solid rgba(255, 255, 255, 0.5);
  }

  .s_kw {
    width: 10vw;
    height: 10vw;
    padding: 0.5vw;

    align-items: center;
    justify-content: center;

    background-color: rgba(10, 10, 10, 0.8);
    outline: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25;
  }

  .s_kw:hover {
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));
    outline: 1px solid rgba(255, 255, 255, 0.5);
  }

  #quote {
    display: flex;
    align-items: center;
    outline: 1px solid rgba(0, 121, 78, 0.6);
    color: rgba(0, 121, 78, 0.9);
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25;
  }

  #quote:hover {
    filter: drop-shadow(0px 0px 10px rgba(0, 121, 78, 0.5));
    outline: 1px solid rgba(0, 121, 78, 0.8);
    color: rgba(0, 121, 78, 1);
  }

  #quote p {
    text-align: left;
    font-size: 1vw;
    font-style: italic;
  }

  /*---------------------------------------------------------------------------------------------------------------*/
  /*---------------------------------------------------------------------------------------------------------------*/
  /*---------------------------------------------------------------------------------------------------------------*/
  .links {
    display: flex;
    flex-direction: row-reverse;
    gap: 1vw;
    margin-bottom: 2vw;
  }
  #some {
    text-align: center;

    transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8;
  }

  #some:has(.spotify:hover) {
    background-color: rgba(30, 215, 96, 0.65);
    color: black;
  }

  #some:has(.yt:hover) {
    background-color: rgba(255, 0, 0, 0.65);
    color: black;
  }

  #some:has(.instagram:hover) {
    background-color: rgba(255, 220, 128, 0.65);
    /*background: url("/0. Img/Inst.jpg") no-repeat;
    opacity: 1;*/
    color: black;
  }

  #some:has(.fb:hover) {
    background-color: rgba(66, 103, 178, 0.65);
    color: black;
  }

  .rect_i {
    height: 10vw;
    width: 22vw;
    padding: 0.5vw;
  }

  .interactive {
    margin-top: 0.5vw;
    width: 22vw;
    height: 9vw;
    align-self: center;
  }
}