:root {
       --black: black;
       --white: white;
       --colourA: rgb(247,150,32);
       --colourB: rgb(250,209,227);
       --colour-background: var(--colourB);
       --colour-text: var(--black);
       --colour-accent: var(--colourA);
       --font: "DMSans", sans-serif;

     }
     body, html {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
     }

     body {
       background: var(--colour-background);
       color: var(--colour-text);
       font-family: var(--font);
       position: relative;
       min-height: 100vh;
     }
     a {
         color: var(--black);
         text-decoration: none;
         cursor: pointer;
     }
     a:visited {
         color: inherit;
     }
     a:hover {
         color: var(--colour-accent);
     }
     a.current {
         color: var(--colour-accent);
     }
     main {
       max-width: 1400px;
       padding: 1rem;
       margin: auto;
     }
     header {
       max-width: calc(100% * 0.7);
       margin: auto;
       padding: 1rem;
       display: flex;
       justify-content: flex-end;
       align-items: center;
       font-weight: 100;
     }
     header h1 {
       font-size: 1rem;
       font-weight: 100;
     }

     header nav {
         display: flex;
         justify-content: space-around;
         gap: 2rem;
     }
     a:active {
         color: var(--colour-accent);
     }
     article {
         margin-left: 4rem;
         margin-right: 4rem;
         margin-bottom: 7rem;
     }

     figure {
         max-width: 100%;
         margin: 0;
         padding: 0;
     }

     figure img {
         max-width: 100%;
     }

     footer {
       position: absolute;
       bottom: 0;
       left: 7rem;
       padding-bottom: 4rem;
       height: 3rem;
       display: flex;
       flex-flow: column;
       gap: 0.25rem;
     }

     .title-box {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 2.5rem;
       gap: 1rem;
     }

     .title-box img {
       height: 100%;
     }

     .underlined {
         text-decoration: underline;
     }

     @media(max-width: 667px) {
         header {
             padding: 0;
             flex-flow: column;
             max-width: 100%;
             justify-content: flex-start;
             align-items: flex-start;
         }
         header nav {
             width: 100%;
             padding-top: 0.75rem;
             flex-flow: column;
             font-size: 0.85rem;
             gap: 0.75rem;
             text-align: right;
             justify-content: flex-end ;
         }
         header nav a {
             max-width: 100%;
         }
         article {
             margin-left: 0;
             margin-right: 0;
         }
         footer {
             left: 1rem;
         }
     }
     html {
         visibility: visible;
         opacity: 1;
     }