:root {
    --fuzzy-wuzzy-brown: #c55e5e;
    --japonica: #dc7b66;
    --wafer: #decfcc;
    --can-can: #d59497;
    --emperor: #564b47;
    --tonys-pink: #ecac97;
    --contessa: #c97778;
    --mojo: #c34240;
}
  

.pomo-title {
    background-color: white;
    position: absolute;
    top: 140px;
    width: 1200px;
    height: 60px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 8px 8px 0px black;
    font-size: 40px;
    margin-top: 40px;
    font-family: 'Silkscreen', sans-serif;
    box-shadow: 8px 8px 0px black;
    transition: all 0.2s ease;
}

.pomo-title:hover{
    background-color: var(--wafer);
    transform: rotate(-1deg) scale(1.1);

  }


  .duck-box {
    position: absolute;
    top: 340px;
    left: 100px;
    width: 300px;
    height: 300px;
    background-color: white;
    border: 4px solid black;
    box-shadow: 8px 8px 0px black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
  }
  
  .duck-box img {
    width: 200px;
    height: auto;
  }

  .duck-box:hover{
    transform: rotate(-3deg) scale(1.1);
  }


  .pomo-about{
    position: absolute;
    top: 340px;
    left: 500px;
    width: 860px;
    height: 240px;
    background-color: white;
    border: 4px solid black;
    box-shadow: 8px 8px 0px black;
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center;
    transition: all 0.2s ease;

  }

.pomo-about:hover{
    background-color: var(--wafer);
    transform: rotate(-1deg) scale(1.1);

}


.pomo-about-heading {
    font-family: 'Silkscreen', sans-serif;
    font-size: 40px;
    margin-bottom: 20px;
    text-align: center;
  }
  
  .pomo-about-text {
    font-family: 'Silkscreen', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
  }


  .start-pomo{
    position: absolute;
    top: 620px;
    left: 820px;
    width: 200px;
    height: 100px;
    background-color: var(--contessa);
    border: 4px solid black;
    box-shadow: 8px 8px 0px black;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .start-pomo:hover{
    background-color: var(--fuzzy-wuzzy-brown);
    transform: rotate(-1deg) scale(1.1);
    cursor: pointer;

  }

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

  .start-pomo-text{
    font-family: 'Silkscreen', sans-serif;
    font-size: 2em;
  }

  
  .start-pomo:active {
    transform: translateY(4px); 
    box-shadow: 2px 2px 0px black;
  }