/*                                                                              DESKTOP */
@media (min-width: 800px) {

  .header {
    display: block;
    padding: 20px;
    text-align: left;
    gap: 0;
    position: sticky;
    z-index: 9998;
  }
  
  table {
    border-collapse: collapse;
    display: inline;
  }
          
  th, td {
    border: 1px solid grey;
    padding: 8px;
    text-align: center;
  }
  
  th {
    background-color: white;
  }

/*                                                                TEXT */
  .t1 {
    font-size: 35px;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 0.1;
    color: red;
    text-align: center;
  }
        
  .p1 {
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.25;
    color: red;
    text-align: center;
  }
  
  .p1 a:link {
    text-decoration: none;
    color: red;
  }
        
  .p1 a:visited {
    color: red;
    text-decoration: none;
  }
  
  .p1 a:hover {
    color: grey;
  }
  
  .p2 {
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.25;
    color: white;
  }
  
  .p2 a:link {
    color: white;
    text-decoration: underline white;
  }
  
  .p2 a:visited {
    color: white;
    text-decoration: none;
  }
  
  .p2 a:hover {
    color: blue;
    text-decoration: underline blue;
  }
  
/*                                                                IMAGES */  

  .draggable {
    position: absolute;
    cursor: grab;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: box-shadow 0.2s ease, opacity 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
  }
    
  .draggable:hover {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
    transform: rotate(10deg);
  }
    
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

/*                                                                HOMEPAGE */
  
  #AppleBackground {
    position: fixed;
    left: 32.5%;
    top: 20%;
    z-index: 1;
    height: 60%;
    width: auto;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
  }
  
  #Sticker-MemoryMachine {
    height: 65px;
    width: auto;
    left: 32%;
    top: 60%;
    transform: rotate(-5deg);
  }
  
  #text-catalogs {
    position: absolute;
    left: 36.5%;
    top: 42%;
    text-align: center;
    z-index: 2;
  }

/*                                                                CATALOGS */

  .div-catalog {
    display: block;
    width: 450px;
    position: relative;
    left: 32%;
    text-align: center;
  }
  
  .img-catalog {
    width: 450px;
    height: auto;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
  }
  
}

/*                                                                              MOBILE */

@media (max-width: 800px) {
  
  .header {
    display: block;
    padding: 20px;
    text-align: center;
    gap: 0;
  }
  
  table {
    border-collapse: collapse;
    display: inline;
  }
          
  th, td {
    border: 1px solid grey;
    padding: 8px;
    text-align: center;
  }
  
  th {
    background-color: white;
  }

/*                                                                TEXT */
        
  .t1 {
    font-size: 25px;
    font-family: Helvetica, Arial, sans-serif;
    color: red;
    text-align: center;
  }
        
  .p1 {
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    line-height: 1.25;
    color: red;
  }
  
  .p1 a:link {
    text-decoration: none;
    color: red;
  }
        
  .p1 a:visited {
    color: red;
    text-decoration: none;
  }
  
  .p1 a:hover {
    color: grey;
  }
  
  .p2 {
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace;
    line-height: 1.25;
    color: white;
  }
  
  .p2 a:link {
    color: white;
    text-decoration: underline white;
  }
  
  .p2 a:visited {
    color: white;
    text-decoration: none;
  }
  
  .p2 a:hover {
    color: blue;
    text-decoration: underline blue;
  }
  
/*                                                                IMAGES */
  
  .draggable {
    position: absolute;
    cursor: grab;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: box-shadow 0.2s ease, opacity 0.3s ease;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
  }
    
  .draggable:hover {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
    transform: rotate(10deg);
  }
    
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
 
  
/*                                                                HOMEPAGE */

  #AppleBackground {
    position: fixed;
    left: 8%;
    top: 20%;
    z-index: 1;
    height: 45%;
    width: auto;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
  }

  #Sticker-MemoryMachine {
    height: 60px;
    width: auto;
    left: 5%;
    top: 50%;
    transform: rotate(-5deg);
  }
  
  #text-catalogs {
    position: absolute;
    left: 18%;
    top: 38%;
    text-align: center;
    z-index: 2;
  }
  
/*                                                                CATALOGS */
  
  .div-catalog {
    display: block;
    width: 80vw;
    position: relative;
    text-align: center;  
    margin: 0 auto;
  }
  
  .img-catalog {
    width: 80vw;
    height: auto;
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
  }
        
}