.App{margin-bottom:0}#root{height:90vh;width:100%}#welcomeBanner{margin-top:10%;display:block;text-align:center}a:any-link{text-decoration:none}.landing{height:70vh;width:80%;margin-top:10%;margin-left:auto;margin-right:auto;display:block}.landing .icon-rack{position:relative;display:flex;top:10%;left:60%;transform:translate(-60%,-50%);justify-content:center;column-gap:20%}.landing p{text-align:center}.projects{width:100%;height:85vh}.projects #project-title{margin-left:auto;margin-right:auto}.landing-chevron{display:block;margin-left:auto;margin-right:auto;padding-bottom:10%;bottom:0}#project-container{background-color:var(--projectContainerBackgroundColour);display:flex;flex-wrap:wrap;position:relative;align-items:stretch;justify-content:stretch;row-gap:50px;margin:2% auto auto;padding-top:2%;padding-bottom:2%;border-radius:25px;width:80%;min-height:var(--projectContainerHeight)}#back-button{color:var(--themeMainColour);visibility:hidden;background-color:var(--themeBackgroundColour);border:0px;cursor:pointer;margin-left:10%}@media only screen and (max-width:600px){.landing{margin-top:15%}.landing-chevron{padding-bottom:10%}}@media only screen and (max-width: 800px) and (min-width:600px){.landing{margin-top:25%}.landing-chevron{padding-bottom:0}}@media only screen and (min-height: 800px){.landing{margin-top:10%}.landing-chevron{padding-bottom:20%}}@media only screen and (max-width: 1000px) and (min-height:1000px){.landing{margin-top:30%}}.folder-card{--borderColour:#ffffff00;--imageBottomBorderColour:var(--projectContainerBackgroundColour);--hoverColour: #424242c1;--boxShadowColour:#000000c1;border-image:linear-gradient(#8c880c,var(--themeMainColour)) 10;border-width:2px;border-style:solid;display:block;position:relative;cursor:pointer;min-width:var(--cardWidth);min-height:var(--cardHeight);max-width:var(--cardWidth);max-height:var(--cardHeight);margin-left:auto;margin-right:auto;box-shadow:0 8px 16px 0 var(--boxShadowColour);transition:.3s}.folder-card:hover{box-shadow:0 8px 16px 0 var(--hoverColour)}.folder-card .preview-image{max-width:var(--cardImageWidth);max-height:var(--cardImageHeight);min-width:var(--cardImageWidth);min-height:var(--cardImageHeight);padding-bottom:0%;display:flex}.folder-card .preview-image img{object-fit:fill;width:100%;min-height:100%}.folder-card .folder-data{margin-top:-1.5%;min-width:100%;max-width:100%}.folder-data .folder-name{margin-top:0%;text-align:center}.project-card{--borderColour:#ffffff00;--imageBottomBorderColour:var(--projectContainerBackgroundColour);--hoverColour: #424242c1;--boxShadowColour:#000000c1;border-image:linear-gradient(#8c880c,var(--themeMainColour)) 10;border-width:2px;border-style:solid;display:flex;flex-direction:column;position:relative;cursor:pointer;min-width:var(--projectCardWidth);max-width:var(--projectCardWidth);min-height:var(--projectCardHeight);max-height:var(--projectCardHeight);margin-left:auto;margin-right:auto;box-shadow:0 8px 16px 0 var(--boxShadowColour);transition:box-shadow .1s ease-in-out}.project-card:hover{box-shadow:0 8px 16px 0 var(--hoverColour)}.project-card .preview-image{display:flex;justify-content:center;align-items:center;overflow:hidden;min-height:80%}.project-card .preview-image img{min-height:100%;width:100%;object-fit:fill}.project-card .project-data{display:inline-block;margin-top:-1.5%;min-width:100%;max-width:100%;max-height:20%}.project-data .project-name{margin-top:5%;text-align:center;line-height:1.2em}.project-expansion{min-width:100%;min-height:var(--expansionHeight);max-height:var(--expansionHeight)}.project-content{display:flex;position:relative;align-items:stretch;justify-content:center}.image-preview-container{min-width:50%;max-width:50%;max-height:100%;min-height:100%}.image-preview{margin-left:auto;margin-right:auto;min-width:50%;max-width:50%;max-height:100%;min-height:100%}.image-preview img{min-height:100%;min-width:100%;object-fit:contain}.project-description{min-width:50%;max-width:50%;min-height:40%;max-height:40%}.image-preview img{display:block;margin-left:auto;margin-right:auto;border-radius:25px;max-width:100%;max-height:100%}.project-description p{text-align:left;white-space:pre-line}#visit-project-button{display:block;margin-left:auto;margin-right:auto;text-align:center;bottom:0}#close-button{color:var(--themeMainColour);background-color:var(--projectContainerBackgroundColour);float:right;border-radius:25px;margin-right:2%;border:0}@media only screen and (min-width:200px) and (max-width:500px){#project-name{font-size:28px}.project-content p{font-size:16px}.project-description p{text-align:center}.project-content{flex-direction:column;justify-content:center;max-width:100%;min-width:100%;max-height:70%;min-height:70%}.image-preview-container{margin-left:10%;display:block;min-height:80%;min-width:80%}.image-preview{display:flex;min-height:80%;min-width:80%}.image-preview img{display:block;width:100%;object-fit:fill}.project-description{margin:10% auto 20% 10%;max-width:80%;min-width:80%;max-height:80%;min-height:80%}#project-container{display:grid;grid-auto-rows:1fr}#visit-project-button{position:bottom}}.footer{margin-top:var(--footerMargin);padding-top:2%;padding-bottom:2%;position:relative;display:flex;min-width:var(--footerWidth);max-width:var(--footerWidth);min-height:var(--footerHeight);max-height:var(--footerHeight);background-color:#d5e071;color:#21243d;flex-direction:column;justify-content:center;text-align:center}.footer .footer-text #copyright-text{color:#000}.footer .icon-rack{margin-top:1.5%;display:flex;flex-direction:row;justify-content:center;column-gap:2%}html,body{height:100%}:root{--themeMainColour:#D5E071;--themeBackgroundColour:#121212;--projectContainerBackgroundColour:#212121;--cardHeight:90%;--cardWidth:20%;--projectCardHeight:90%;--projectCardWidth:20%;--expansionHeight:100%;--projectCardMobileHeight:90%;--projectCardMobileWidth:60%;--cardMobileHeight:90%;--cardMobileWidth:60%;--cardImageWidth:100%;--cardImageHeight:80%;--projectContainerHeight:60%;--footerHeight:20%;--footerWidth:100%;--footerMargin:4%;height:100%;font-family:Heebo;line-height:1.5;font-weight:400;background-color:var(--themeBackgroundColour);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}html{scroll-behavior:smooth}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{line-height:1.1;color:var(--themeMainColour);font-size:50px;font-style:normal;font-family:Heebo;font-weight:700;text-align:center}h2{font-size:30px;text-align:center;color:#fff}.tag-line{font-family:Heebo;font-size:19px}#welcomeBanner{font-family:Heebo}p{color:#fff;font-style:normal;font-weight:400}p,#back-button,#close-button{font-size:15px}@media only screen and (min-width:200px) and (max-width: 500px) and (min-height:400px) and (max-height: 900px){:root{--footerMargin:90%;--projectContainerHeight:10%;--cardHeight:var(--cardMobileHeight);--cardWidth:var(--cardMobileWidth);--projectCardHeight: var(--projectCardMobileHeight);--projectCardWidth: var(--projectCardMobileWidth)}}@media only screen and (min-width:0px) and (max-width: 200px) and (max-height:400px){:root{--footerMargin:100%;--projectContainerHeight:10%;--cardHeight:var(--cardMobileHeight);--cardWidth:var(--cardMobileWidth);--projectCardHeight: var(--projectCardMobileHeight);--projectCardWidth: var(--projectCardMobileWidth)}}@media only screen and (min-width:500px) and (max-width: 900px) and (max-height: 500px){:root{--footerMargin:30%;--projectContainerHeight:20%}}@media only screen and (min-width:500px) and (max-width: 1700px) and (min-height:500px) and (max-height: 600px){:root{--footerMargin:5%;--projectContainerHeight:20%}}@media only screen and (min-width:500px) and (max-width: 1700px) and (min-height:600px) and (max-height: 900px){:root{--footerMargin:2%;--projectContainerHeight:10%}}@media only screen and (min-width:500px) and (max-width: 1700px) and (min-height:900px) and (max-height: 1700px){:root{--footerMargin:0%;--projectContainerHeight:25%}}@media only screen and (min-width:1700px) and (min-height:1000px){:root{--projectContainerHeight:45%}}@media only screen and (min-width: 1000px) and (min-height:1000px){h1{font-size:8vh}h2{font-size:4vh}.tag-line{font-size:3vh}#back-button,#close-button{font-size:2vh}p{font-size:2.5vh}}@media only screen and (max-width: 500px) and (min-height:500px) and (max-height: 900px){h1{font-size:40px}h2{font-size:19px}.tag-line{font-size:15px}p,#back-button,#close-button{font-size:12px}}@media only screen and (max-width:700px){h1{font-size:40px}h2{font-size:19px}.tag-line{font-size:15px}p,#back-button,#close-button{font-size:12px}}