:root {
    --mainBrandColour: #643b8e;
}

*,
*::before,
*::after {box-sizing:border-box;}
* {margin:0; padding:0; font:inherit;}

html {scroll-behavior:smooth; font-size:1.25rem;}
body {min-height:100vh; line-height:1.5; font-size:1rem; font-weight:400; font-family:"Poppins",sans-serif; font-style:normal;}

strong {font-weight:700;}
p {margin:0 0 2rem 0;}

a.link {color:#643b8e; transition:all 0.3s ease-out; text-decoration:none; position:relative; padding:0.2rem;}
a.link:hover {color:#fff;}
a.link::before {background:var(--mainBrandColour); content:""; position:absolute; left:0; top:0; width:0; height:100%; z-index:-1; transition:all 0.3s ease-out;}
a.link:hover::before {width:100%;}

.container {width:min(100%, 1240px); margin:0 auto; padding:0 40px;}

.intro-section {display:grid; grid-template-columns:1fr; column-gap:2rem; padding-bottom:2rem;}
.intro-column ul {list-style:none; padding:0; font-weight:700; margin:0 0 2rem 0; columns:2;}
.intro-column ul li {margin-bottom:0.5rem;}

.hero {width:100%; height:auto; position:relative;}
.hero img {object-fit:contain; width:100%; max-width:100%; height:auto;}
.screen {position:absolute; top:0; left:0; width:100%; height:80%; z-index:-1; background:rgb(13,45,64); background:linear-gradient(0deg, rgba(13,45,64,1) 0%, rgba(37,66,82,1) 100%); transition:opacity 1s ease-out; transition-delay:0.5s;}
.screen.animate {opacity:0;}

video {position:absolute; top:49%; left:50%; translate:-48% -58%; width:38%; height:auto; z-index:-2;}

#gallery {display:grid; grid-template-columns:1fr; gap:1px; background:var(--mainBrandColour); padding:1px 0 1px 0}
.img-fluid {width:100%; max-width:100%; height:auto; display:block;}

.work-link {position:relative; color:var(--mainBrandColour); animation:colorChangeOff 1s ease-in-out backwards; cursor:pointer; font-size:0.75rem; line-height:45px; margin:0 0 2em; display:block; max-width:160px; position:relative; text-decoration:none; text-transform:uppercase; width:100%; text-align:center;}
.work-link::before {background:var(--mainBrandColour); content:""; position:absolute; left:0; top:0; width:0; height:100%; z-index:-1; transition:all 0.3s ease-out;}
.work-link svg {height:45px; left:0; position:absolute; top:0; width:100%;}
.work-link rect {fill:none; stroke:var(--mainBrandColour); stroke-width:2;}
.work-link:hover {animation:colorChange 1s ease-in-out forwards;}
.work-link:hover::before {width:100%;}

@keyframes colorChange {
    0%    {color:var(--mainBrandColour);}
    100%  {color:#fff;}
}

@keyframes colorChangeOff {
    0%    {color:#fff;}
    100%  {color:var(--mainBrandColour);}
}

/* Error */
.error {padding-top:2rem; text-align: center;}
.error img {width:100%; max-width:320px; height:auto;}
.error-section {text-align:center;}

/* Footer */
footer {text-align:center; padding:6rem 0 8rem 0;}
footer img {max-width:200px;}
footer svg {max-width:200px;}
.pt-2 {padding-top:2rem;}

/* Animation */
.fade-in {opacity:0; transition-delay:0.5s !important; transition:opacity 0.6s ease-out;}
.fade-in.animate {opacity:1;}
.fade-in-right {translate:90px 0; opacity:0; transition-delay:0.5s !important; transition:all 0.6s ease-out;}
.fade-in-right.animate {opacity:1; translate:0 0; }

/* Footer Logo */
@keyframes fadeIn {
    0%    {opacity:0;}
    100%  {opacity:1;}
}

@keyframes moveLeft {
    0%    {translate:13px 0;}
    100%  {translate:0 0;}
}

@keyframes moveRight {
    0%    {translate:-14px 0;}
    100%  {translate:0 0;}
}

@keyframes moveUp {
    0%    {translate:13px 30px;}
    100%  {translate:13px 0;}
}

.footer-logo path {opacity:0;}
.footer-logo.animate .logo-s,
.footer-logo.animate .logo-x,
.footer-logo.animate .logo-f {animation:fadeIn 2s ease-in-out both, moveLeft 0.5s ease-in-out both; animation-delay:0.5s, 3s;}
.footer-logo.animate .logo-v,
.footer-logo.animate .logo-e {animation:fadeIn 2s ease-in-out both, moveRight 0.5s ease-in-out both; animation-delay:0.5s, 3s;}
.footer-logo.animate .logo-i1,
.footer-logo.animate .logo-i2 {animation:fadeIn 2s ease-in-out both, moveUp 0.5s ease-in-out backwards, moveLeft 0.5s ease-in-out forwards; animation-delay:0.5s, 2.5s, 3s;}
.footer-logo.animate .logo-i3 {animation:fadeIn 0.2s ease-in-out both, moveUp 0s ease-in-out both, moveRight 0.5s ease-in-out both; animation-delay:3s, 3s, 3s;}

/* Media Queries */
@media (min-width:576px) {
    #gallery {grid-template-columns:repeat(2,1fr);}
    #gallery div:nth-child(8) {grid-column: 1 / 3; order: 10;}
}

@media (min-width:768px) {
    .intro-section {grid-template-columns:2fr 1fr;}
    footer img {max-width:280px;}
    footer svg {max-width:280px;}
}

@media (min-width:992px) {
    #gallery {grid-template-columns:repeat(3,1fr);}
    #gallery div:nth-child(8) {grid-column:auto; order: 8;}
}