@font-face {
  font-family: 'Nunito';
  src: url("./fonts/nunito.woff2") format('woff2'),
    url('./fonts/nunito.woff') format('woff');
}

:root {
  --fill1: #dedede75;
  --fill2: #3a3a3a75;

  --inset1: #ffffff60;
  --inset2: #00000060;

  --insetalt1: #ffffff20;
  --insetalt2: #00000020;

  --text1: #000000dd;
  --text2: #ffffffcc;

  --hover1: #555555dd;

  --shadow0: #00000030;
  --shadow1: #00000040;
  --shadow2: #00000050;
  --shadow3: #00000070;

  --wallpp: url("./images/wall1.png");
  /* transition: all 0.5s ease-in-out, height 0ms; */
}

html {
  scroll-behavior: smooth;
  transition: all 0.2s ease-in-out, height 0ms;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
  background: var(--wallpp) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: var(--text1);
  background-attachment: scroll;
  transition: all 0.2s ease-in-out, height 0ms;
}

body:after{
  content:"";
  position: fixed; /* stretch a fixed position to the whole screen */
  top: 0;
  height: 100vh; /* fix for mobile browser address bar appearing disappearing */
  left: 0;
  right: 0;
  z-index: -1; /* needed to keep in the background */
  background: var(--wallpp) center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: scroll;
  transition: all 0.2s ease-in-out, height 0ms;
}

a {
  text-decoration: none;
  color: var(--text1);
}

/* * {
  transition: all 0.5s ease-in-out, height 0ms;
} */

/* ::-webkit-scrollbar {
  display: none;
} */


/* ----- START NAVBAR ----- */
header {
  background: var(--fill1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  box-shadow: inset 0 0 20px var(--inset1), 0 0 15px var(--shadow0);
  border-bottom: 2px solid var(--inset1);
  width: 100%;
  position: fixed;
  z-index: 2000;
  top: 0;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 58px;
}

.navtext {
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text1);
  /* transition: all 0.5s ease-in-out, height 0ms; */
}

nav ul {
  list-style-type: none;
} 

.logo {
  display: flex;
  align-items: center;
  margin-left: 30px;
  /* transition: all 0.5s ease-in-out, height 0ms; */
}

.logotextresponsive {
  font-size: 1.2;
  /* transition: all 0.5s ease-in-out, height 0ms; */
}

.logo img {
  height: 50px;
  margin-right: 10px;
  margin-top: 5px;
  text-decoration: none;
  filter: invert(0%);
  fill-opacity: 50%;
  /* transition: all 0.5s ease-in-out, height 0ms; */
}

.menu {
  display: flex;
  margin-right: 20px;
  transition: all 0.5s ease-in-out, height 0ms;
}

.menu ul {
  list-style-type: none;
}

.menu li {
  position: relative;
  text-decoration: none;
  margin-right: 30px;
  transition: all 0.2s ease-in-out, height 0ms;
}

.menu a:hover {
  text-decoration: underline;
  color: var(--hover1);
}


.darklight {
  width: 50px;
  height: auto;
  position: fixed;
  top: 90px;
  right: 30px;
  transition: all 0.2s ease-in-out, height 0ms;
  z-index: 2;
}


.notif {
  width: 40px;
  height: auto;
  position: fixed;
  top: 160px;
  right: 35px;
  transition: all 0.2s ease-in-out, height 0ms;
  z-index: 2;
}





/* END NAVBAR */



/* ------------------------------------------------------------------- NEW STUFF ------------------------------------------------------------------- */

.intro {
  width: 100%;
  height: 600px;
  display: flex;
  padding-bottom: 60px;
}

.introimg {
  background-image: url("../static/images/introbig.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0 0 40px 0;
  box-shadow: 0 0 20px var(--shadow3);
  height: 100%;
  width: 60%;
  margin-top: 59px;
  transition: all 0.5s ease-in-out, height 0ms;
}

.introtext {
  width: 40%;
  height: 400px;
  margin: 159px -10% 0;
  background-color: var(--fill1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  border-radius: 40px;
  box-shadow: inset 0 0 100px var(--inset1), 0 0 20px var(--shadow1);
  border: 2px solid var(--inset1);
  text-align: center;
  position: relative;
}

.introtext p {
  font-size: 3.2em;
  color: var(--text1);
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.aboutme {
  width: 80%;
  margin: 59px auto -60px; 
  background-color: var(--fill1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  border-radius: 40px;
  box-shadow: inset 0 0 100px var(--inset1), 0 0 20px var(--shadow1);
  border: 2px solid var(--inset1);
  padding: 20px 0;
}

.abouttext {
  width: 82%;
  height: auto;
  margin: 10px auto;
  display: flex;
}

.left {
  width: 60%;
}

.right {
  width: 40%;
}

.smalltext {
  font-size: x-large;
  height: auto;
  padding: 20px 0;
}

.bigtext {
  font-size: 3em;
  height: auto;
  padding: 0 20px 20px 0;
}



.gallerycontainer {
  width: 80%;
  margin: 120px auto 21px; 
  transition: all 0.2s ease-in-out, height 0ms;
}

.minigallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 150px);
  gap: 20px;
  transition: all 0.2s ease-in-out, height 0ms;
}

.galleryitems {
  margin: 0px;
  border-radius: 40px;
  color: var(--text1);
  background-color: var(--fill1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  box-shadow: inset 0 0 50px var(--inset1), 0 0 20px var(--shadow1);
  border: 2px solid var(--inset1);
  margin: 0%;
  height: 100%;
  transition: all 0.2s ease-in-out, height 0ms;
}

.galleryitems:hover {
  transform: scale(1.03);
  text-decoration: underline;
  color: var(--text1);
}

.galleryimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.imagetext {
  position: relative;
  /* background-color: var(--fill1); */
  padding: 10px 0;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  box-shadow: inset 0 0 15px var(--insetalt1), 0 0 20px var(--shadow2);
  border: 2px solid var(--inset1);
  margin: auto;
  width: calc(100% - 40px);
  height: auto;
  text-align: center;
  top: 20px;
  /* transition: all 0.5s ease-in-out, height 0ms; */
}

.galleryitem1 {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
  /* background-image: url("../static/images/image1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
}

.galleryitem2 {
  grid-column: 2 / span 2;
  grid-row: 1 / span 1;
  /* background-image: url("../static/images/image2.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
}

.galleryitem3 {
  grid-column: 1 / span 2;
  grid-row: 2 / span 1;
  /* background-image: url("../static/images/image3.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
}

.galleryitem4 {
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
  /* background-image: url("../static/images/image4.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
}

.galleryitem5 {
  grid-column: 1 / span 3;
  grid-row: 3 / span 1;
  /* background-image: url("../static/images/image5.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
}

.galleryitem6 {
  grid-column: 2 / span 2;
  grid-row: 3 / span 1;
  /* background-image: url("../static/images/image6.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center; */
}




/* TESTING BLOB */

.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.box {
  width: 60vmin;
  height: 60vmin;
  position: relative;
  
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    transform: scale(1.42);
  }
}

.spin-container {
  width: 100%;
  height: 100%;
  animation: spin 12s ease-in-out infinite alternate;
  position: relative;
}

.shape {
  width: 100%;
  height: 100%;
  transition: border-radius 1s ease-out;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 5s ease-in-out infinite both alternate;
  position: absolute;
  overflow: hidden;
  z-index: 5;
  
  box-shadow: inset 0 0 100px var(--inset1), 0 0 20px var(--shadow1);
  /* border: 2px solid var(--inset1); */
}

.bd {
  width: 142%;
  height: 142%;
  position: absolute;
  left: -21%;
  top: -21%;
  /* background: url(https://images.unsplash.com/photo-1519345182560-3f2917c472ef?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=2868fd5c3f30697d38732224e0ef51ed); */
  
  background-color: var(--fill1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  
  background-size: 100%;
  background-position: center center;
  display: flex;
  color: var(--text1);
  font-size: 3em;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: spin 12s ease-in-out infinite alternate-reverse;
  opacity: 1;
  z-index: 2;
}

@keyframes morph {
  0% {border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;} 
  100% {border-radius: 40% 60%;} 
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}


/* ----------------------------- Individual pages ----------------------------- */

/* .aboutme {
  width: 80%;
  margin: 59px auto -60px; 
  background-color: var(--fill1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  border-radius: 40px;
  box-shadow: inset 0 0 100px var(--inset1), 0 0 20px var(--shadow1);
  border: 2px solid var(--inset1);
  padding: 20px;
} */



.titlecontainer {
  width: 80%;
  margin: 120px auto 60px; 
  /* transition: all 0.5s ease-in-out, height 0ms; */
  color: var(--text1);
  background-color: var(--fill1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  border-radius: 40px;
  box-shadow: inset 0 0 100px var(--inset1), 0 0 20px var(--shadow1);
  border: 2px solid var(--inset1);
}

.title {
  font-size: xx-large;
  font-weight: bold;
  margin: 40px 40px 20px; 
}

.explanationtext {
  margin: 0 40px 40px;
  font-size: larger;
}

.textcontainer {
  width: 80%;
  margin: 60px auto; 
  /* transition: all 0.5s ease-in-out, height 0ms; */
  color: var(--text1);
  background-color: var(--fill1);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  border-radius: 40px;
  box-shadow: inset 0 0 100px var(--inset1), 0 0 20px var(--shadow1);
  border: 2px solid var(--inset1);
}

.subtitle {
  font-size: x-large;
  margin: 40px 40px 15px; 
  font-weight: 600;
}

.text {
  margin: 0 40px 40px;
}

.text a {
  text-decoration: none;
}

.text a hover{
  text-decoration: underline;
}

.textbutton {
  display: block;
  border-radius: 20px;
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  box-shadow: inset 0 0 15px var(--insetalt1), 0 0 20px var(--shadow2);
  border: 2px solid var(--inset1);
  text-align: center;
  margin: 20px auto 0;
  height: auto;
  width: 200px;
}


.logoexample, .layoutexample, .fullwidthimage {
  width: calc(100% - 80px);
  padding: 0 40px 40px;
}

.signsimg {
  max-width: 30%;
  max-height: 30%;
}

.fixsignsimg {
  max-width: 60%;
  max-height: 30%;
}

.commits {
  width: calc((100% - 80px) * 0.3);
  padding: 0 40px;
  margin-left: calc((100% - 80px) * 0.35);
  margin-right: calc((100% - 80px) * 0.35);
}

.wallpaperexample {
  width: 67%;
}

.figmaprototypes {
  display: flex;
}

.figmaprototype {
  width: 50%;
  margin: 10px 0;
  background-image: url("../static/images/loading.gif");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: center;
}

.figmaprototype2 {
  width: 80%;
  margin: 10px auto;
  background-image: url("../static/images/loading.gif");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: center;
}

.textelement {
  display: flex;
}

.textelementtext1 {
  width: 40%;
  padding-right: 20px;
}

.textelementtext2 {
  width: 40%;
  padding-left: 20px;
}

.textelementtext3 {
  width: 60%;
  padding-right: 50px;
}

.textelementtext4 {
  width: 80%;
  padding-right: 20px;
}

.textelementtext5 {
  width: 70%;
  padding-right: 20px;
}

.textelementelement {
  width: 60%;
  height: 425px;
}

.git {
  width: 40%;
  height: 100%;
}

.waiter {
  width: 100%;
  height: auto;
  max-height: 350px;
}

.oldnewlogo {
  width: 20%;
  height: 100%;
}

.taskanal {
  width: 30%;
  height: 100%;
}

.extratopmargin {
  margin-top: 20px;
}

.photoportfolio {
  width: 100%;
  height: 700px;
}

.timeline {
  width: 80%;
  margin: 10px 10% 0;
}

.videography {
  width: 100%;
  height: auto;
  margin-top: 20px;
  border-radius: 10px;
}

.fontyscript {
  width: 100%;
  height: 600px;
  margin: 20px 0 0;
}

.superellipse {
  width: 220px;
  height: 220px;
  position:relative;
  border-radius:20%;
}

.superellipse::before, .superellipse::after {
  content:'';
  position:absolute;
  z-index:-1;
}

.superellipse::before {
  border-radius: 2%/30%;
  background-color: white;
  top: 33px;
  bottom: 33px;
  right: -2px;
  left: -2px;
}

.superellipse::after {
  border-radius: 30%/2%;
  background-color: white;
  left: 33px;
  right: 33px;
  top: -2px;
  bottom: -2px;
}


/* ------------------------- RUBBISH CODE FOR THE WINDOWS 1 LOGO IN GRID ------------------------- */
/* .gallerycontainer2 {
  width: 50%;
  margin: 80px auto; 
  transition: all 0.5s ease-in-out, height 0ms;
  border-radius: 75px;
  overflow: hidden;
}

.gallery2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 5vw);
  gap: 30px;
  transition: all 0.5s ease-in-out, height 0ms;
}

.gallery2item1 {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
  background-color: #96c4eb;
  margin: 0%;
  height: 100%;
}

.gallery2item2 {
  grid-column: 3 / span 3;
  grid-row: 1 / span 3;
  background-color: #96c4eb;
  margin: 0%;
  height: 100%;
}

.gallery2item3 {
  grid-column: 1 / span 2;
  grid-row: 3 / span 3;
  background-color: #96c4eb;
  margin: 0%;
  height: 100%;
}

.gallery2item4 {
  grid-column: 3 / span 3;
  grid-row: 4 / span 2;
  background-color: #96c4eb;
  margin: 0%;
  height: 100%;
} */




/* This section is to create extra spacing right above the subtitles
  it will also get an ID in the HTML, so that links can automatically scroll to it */
#top, #about, #outcomes {
  height: 1px;
}

.section {
  height: 0px;
}


.scrolltop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  height: 40px;
  width: 40px;
  transition: all 0.5s ease-in-out, height 0ms;
}

.scrolltop:hover {
  transform: scale(1.2);
}

.end {
  margin-bottom: 150px;
}




/* Responsiveness to displays narrower than 950px */

@media screen and (max-width: 950px) {

  .navtext {
    font-size: 1rem;
  }

  .logo {
    margin-left: 10px;
  }

  .logo img {
    margin-right: 0px;
    transform: scale(0.75);
  }
  
  .logotext {
    font-size: 0;
  }

  .logotextresponsive {
    font-size: 1rem;
  }

  .menu {
    margin-right: 10px;
  }

  .menu li {
    margin-right: 10px;
  }

  .darklight {
    top: 70px;
    right: 10px;
    transform: scale(0.75);
  }

  .notif {
    top: 120px;
    right: 14px;
    transform: scale(0.75);
  }

  .intro {
    height: 500px;
  }

  .introimg {
    background-image: url("../static/images/introsmall.png");
    width: 70%;
  }

  
  .introtext {
    width: 40%;
    height: 300px;
    margin-top: 159px;
    margin-left: -12.5%;
  }
  
  .introtext p {
    font-size: 2.5em;
  }

  .aboutme {
    width: 95%;
  }

  .abouttext {
    width: 95%;
    margin: 5px auto;
  }

  .textcontainer {
    width: 95%;
  }

    
  .titlecontainer {
    width: 95%;
  }

  .end {
    margin-bottom: 100px;
  }

  .scrolltop {
    bottom: 20px;
    right: 20px;
    transform: scale(0.75);
  }



  .gallerycontainer {
    width: 95%;
    font-size: 0.85em;
  }

  .gallery {
    grid-gap: 10px;
  }


  .bd {
    font-size: 2.5em;
  }

  .minigallery {
    grid-template-rows: repeat(3, 130px);
    
  }


}



/* Responsiveness to displays narrower than 650px (mostly mobile) */

@media screen and (max-width: 650px) {

  .intro {
    height: 550px;
    display: block;
    padding: 0;
  }

  .introimg {
    height: 400px;
    width: 100%;
    margin-top: 59px;
    border-radius: 0;
  }

  .introtext {
    width: 50%;
    height: 200px;
    margin: -30px auto 20px;
    border-radius: 30px;
  }

  .introtext p {
    font-size: 2em;
  }

  .aboutme {
    border-radius: 30px;
  }
  .abouttext {
    flex-direction: column;
  }

  .left {
    width: 100%;
  }

  .right {
    width: 100%;
    padding-bottom: 25px;
  }

  .bigtext {
    padding-bottom: 25px;
    text-align: center;
  }

  .bd {
    font-size: 2em;
  }

  .minigallery {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, 82px);
    gap: 10px;
  }

  .galleryitems {
    border-radius: 30px;
  }

  .imagetext {
    border-radius: 10px;
  }

  .galleryitem1 {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }

  .galleryitem2 {
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
  }

  .galleryitem3 {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
  }

  .galleryitem4 {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
  }

  .galleryitem5 {
    grid-column: 1 / span 1;
    grid-row: 5 / span 1;
  }

  .galleryitem6 {
    grid-column: 1 / span 1;
    grid-row: 6 / span 1;
  }
    
  .titlecontainer {
    border-radius: 30px;
  }
  
  
  .title {
    margin: 30px 30px 10px; 
  }

  .explanationtext {
    margin: 0 30px 30px;
  }

  .textcontainer {
    border-radius: 30px;
  }
  
  .subtitle {
    margin: 30px 30px 10px; 
  }

  .text {
    margin: 0 30px 30px;
  }

  .textbutton {
    width: 150px;
  }


  .logoexample, .layoutexample, .fullwidthimage {
    width: calc(100% - 60px);
    padding: 0 30px 30px;
  }

}


@media screen and (max-width: 350px) {
  .logotextresponsive {
    font-size: 0rem;
  }
  
  .introtext p {
    font-size: 1.7em;
  }

  .bigtext {
    font-size: 2.5em;
  }
}

/* Dark mode options */

@media (prefers-color-scheme: dark) {

  .logo img {
    filter: invert(100%);
  }

  :root {
    --fill1: #3a3a3a75;
    --fill2: #dedede75;
  
    --inset1: #00000060;
    --inset2: #ffffff60;
  
    --insetalt1: #00000020;
    --insetalt2: #ffffff20;
  
    --text1: #ffffffcc;
    --text2: #000000dd;
  
    --hover1: #bcbcbccc;

    --shadow0: #00000080;
    --shadow1: #00000090;
    --shadow2: #000000a0;
    --shadow3: #000000c0;
  
    --wallpp: url("./images/wall2.png");
  }
  
}