/*
css reset
*/


*{
  margin: 0;    
  padding: 0; 
  box-sizing: border-box;
  font-weight: normal; 
  font-size: 100%;
}
  
ul,
ol {
  list-style: none;
}
    
    img,
    video {
      width: 100%;
      }
      
      a {
        color: black; 
        text-decoration: none;                              
        }               
        
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
          }
          /*
          styles
          */
          body {
            font-family: "FivoSansModern";
            padding: 16px 16px 8px 16px;
            font-size: 1.5rem;
            /* border: 1rem solid crimson; 
            
            } */
          }
          
          @font-face {
            font-family: "FivoSansModern";
            src: url("../Fonts/FivoSansModern-Regular.otf") format("embedded-opentype"),
            url("../Fonts/FivoSansModern-Regular.otf") format("woff"),
            url("../Fonts/FivoSansModern-Regular.otf") format("woff2"),
          }

           h1 {
            position: sticky;
            margin-bottom: 1rem;
          } 

          section {
            display: flex;
            gap: 24px;
          }
          
          picture {
            display: flex;
            flex-direction: column;
          }
          
          picture img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 6px;
          }

          @media (max-width: 562px) {
            section {
              flex-direction: column;
            }
          }



          /* h2 {
            font-size: 1rem;
            border-width: 1px;
            border-style: solid;
          
          } */


          .button {
            position: sticky;
            padding: 5px 10px;
            margin: 20px 10px;
            border: 1px black;
            border-style: solid;
            background-color: white;
            border-color: black;
            display: inline-block;
            border-radius: 1px;
            transition: background-color 0.3s ease;
          }

          .button:hover {
            border-color: red;
            color: red;
          }

          .button2 {
            position: sticky;
            padding: 5px 10px;
            margin: 20px 10px;
            /* border-width: 1px; */
            /* border-block-color: black; */
            background-color: greenyellow;
            /* border-color: greenyellow; */
            display: inline-block;
            border-radius: 1px;
            transition: background-color 0.3s ease;
          }

          .button2:hover {
            background-color: aqua;
          }
          
          
           /* header {
            margin-bottom: 192px;
          }  */