html {
    scroll-behavior: smooth;
}

:root {
    --white: #eee;
    --black: #000; 
    --text: #fff; 
    --alternate: #fbcf0e;  
	--alternate2: #d40c0c; 
    --darker: #1e552a; 
	--transgrey: rgba(0,0,0,0.9);
    --transdark: rgba(0,0,0,0.5);
    --shadow: rgba(0,0,0,0.7); 
	--othercolour: #d82727; 
	--othercolour2: #f22929; 
	--pale: #f0f0f0; 
    --transcolour: rgba(18, 79, 155, 0.5);
    --green: #9BC500;  
    --lightgrey: #f0f0f0; 
    --evenlighter: #3a3a3a; 
    --abitdarker: #eaeaea; 
    --width: 1200px; 
    --charcoal: #222; 
    --grey: #333; 
    }

html {
    color-scheme: dark;
} 
body{
    background-color: var(--charcoal);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--text); 
    margin: 0 auto; 
    max-width: 1400px;
}
a{
    color: var(--abitdarker);
    text-decoration: none;
    transition: 0.4s;
}
a:hover{
    color: var(--alternate); 
}
a[href^="mailto:"],
h1
{
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
h1{
    color: var(--alternate); 
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 1;
}
h2{
    font-weight: 400;
    line-height: 1;
}
h3{
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
}
img{
    max-width: 100%;
    display: block;

}
header img{
    margin: auto;    
}
header{
    text-align: center;
    padding: 2vw; 
}
section > div{
    max-width: 1000px;
    margin: auto;
    padding: 2vw;
    line-height: 1.7;
}
section ul li{
    margin-bottom: 1rem;
}
section img{
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}
footer{
    margin-top: 1rem;
    background-color: var(--evenlighter);
    color: var(--text); 
    line-height: 1.7;
    padding: 2vw;
}
footer > div{
    max-width: 1000px;
    margin: auto;
}
footer h3{
    color: var(--alternate); 
}









@media (min-width: 1024px) {
    section{
        grid-template-columns: 1fr 1fr;
        display: grid;
        background-color: var(--grey);
        border-radius: 1rem;
    }
    section > div:has(img) {
        padding: 0; 
    }
    section .hero h1{
        font-size: 4rem;
    }
    section > div:nth-child(2) img{
        border-radius: 0 1rem 0 0 ;
    }
    section > div:nth-child(7) img{
        border-radius: 0 0 0 1rem ;
    }
    footer{
        border-radius: 1rem 1rem 0 0;
    }
}