@import "./less/fontawesome.less";
@import "./less/solid.less";
@import "./less/all.css"; // ensures FontAwesome works

@import url(https://fonts.googleapis.com/css?family=Roboto:100);
@import url(https://fonts.googleapis.com/css2?family=DM+Mono);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans&display=swap);


/*
  _____ ___  _   _ _____ ____
 |  ___/ _ \| \ | |_   _/ ___|
 | |_ | | | |  \| | | | \___ \
 |  _|| |_| | |\  | | |  ___) |
 |_|   \___/|_| \_| |_| |____/ */


/* FONT CLASSES */



h1 {
  text-align: center;
  font-family: Open Sans;
  font-size: 2rem;
  padding: 1rem;
  color: #FFF;
  text-transform: uppercase;
  background: black;
}

p {
  font-family: Open Sans;
  font-size: 1rem;
  color: #000;
  line-height: 1rem * 1.5;
  display: block;
  margin-block-start: 0;
}

/*
   ____ ___  _     ___  ____  ____
  / ___/ _ \| |   / _ \|  _ \/ ___|
 | |  | | | | |  | | | | |_) \___ \
 | |__| |_| | |__| |_| |  _ < ___) |
  \____\___/|_____\___/|_| \_\____/ */

@NEC: #ffec00;
@color2: #3b8ea5;
@gemeente: #e2011b;
@otp: #4c2872;
@MIITN: #179a6e;
@campus: #76dcf1;
@hanze: #ee7b00;

/*
   ___ _____ _   _ _____ ____
  / _ \_   _| | | | ____|  _ \
 | | | || | | |_| |  _| | |_) |
 | |_| || | |  _  | |___|  _ <
  \___/ |_| |_| |_|_____|_| \_\*/


 a { text-decoration: none; }

 .link(@background, @color, @hoverColor){
  a {
   text-decoration: none;
   line-height: 1;

   position: relative;
   z-index: 0;
   display: inline-block;
   padding: 5px 5px;
   overflow: hidden;
   color: @color;
   vertical-align: bottom;
   transition: color .3s ease-out;
   &::before {
     content: "";
     position: absolute;
     z-index: -1;
     top: 0;
     left: 0;
     transform: translateY(calc(100% - 2px));
     width: 100%;
     height: 100%;
     //background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%); mega pretty gradient maja past niet fig
     background-color: @background;
     transition: transform .25s ease-out;
   }
   &:hover {
     color: @hoverColor;
     &::before {
       transform: translateY(0);
       transition: transform .25s ease-out;
       }
     }
   }
 }

 /*
    ____ ___  __  __ ____   ___  _   _ _____ _   _ _____ ____
   / ___/ _ \|  \/  |  _ \ / _ \| \ | | ____| \ | |_   _/ ___|
  | |  | | | | |\/| | |_) | | | |  \| |  _| |  \| | | | \___ \
  | |__| |_| | |  | |  __/| |_| | |\  | |___| |\  | | |  ___) |
   \____\___/|_|  |_|_|    \___/|_| \_|_____|_| \_| |_| |____/

/* MAIN SECTIONS */

html {
 font-family: sans-serif;
 margin: 0;
 padding: 0;
}

body {
 margin: 0;
 padding: 0;
 background-color: @MIITN;
 background-image: url(img/bg2.jpg);
 background-size: cover;
 background-attachment: fixed;
}

.content {
  background-color: #FFF;
  width: 60vw;
  text-align: center;
  margin: 0 auto;
  margin-top: 50vh;
  filter: drop-shadow(0 0 0.75rem);

  .logoWrap {
      img {
        max-width: 90%;
        padding: 2rem 0rem;
      }
  }

  .logoWrapSecond {
    .logoWrap();
    background-image: linear-gradient(60deg, @MIITN 0%, @campus 100%);
  }

  .logoWrapFirst {
    .logoWrap();
    background-image: linear-gradient(60deg, @hanze 0%, @NEC 100%);
  }
}

.whenIsEvent {
  color: white;
  font-size: 1.2rem;
  font-family: Open Sans;
  padding-bottom: 2rem;
  span {
    display: inline-block;
    margin-right: 1.2rem;
  }
}

.second .registerButton { background-image: linear-gradient(to right, @MIITN 0%, @campus 50%, @MIITN 100%);}
.first .registerButton { background-image: linear-gradient(to right, @hanze 0%, @NEC 50%, @hanze 100%); }

 .registerButton {
   font-family: Open Sans;
   text-align: center;
   text-decoration: none;
   font-weight: 800;
   font-size: 1em;
   text-transform: uppercase;
   border-radius: 6px;
   margin: 1rem 4rem;
   padding: 1em 3em;
   background-size: 300% 300%;
   color: white;
   box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
   box-sizing: border-box;
   transition: 0.5s;
   outline: none;
   &:hover {
      background-position: right center;
      cursor: pointer;
   }

 }

.textColumns {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.first, .second {
  flex-basis: 100%; //ensures both columns are the same size
}

p {
  .link(@NEC, #000, #000);
  a {
    font-size: 1.6rem;
  }
  //width: 40%;
  margin: 20px;
  text-align: justify;
  img {
    display: inline-block;
  }
  span {
    color: @MIITN;
    font-weight: bold;
    text-align: center;
  }
}

.warning {
  color: rgb(232, 135, 118);
  font-weight: bold;
}

.buttonsParent {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.signupButton {
  background-color: @color2;
  box-shadow: 0 9px #999;
  margin: 25px;
  padding: 20px;
  width: 440px;

  h1 {
    margin-top: 10rem;
    background-color: inherit;
    background-image: url('img/pointer.png');
    background-position:right bottom;
    background-repeat:no-repeat;
    background-size: 40px;
  }

  p {
    color: #FFF;
    margin: 5px;
    background-color: inherit;
  }

  &:hover { background-color: @NEC; }
  &:active {
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }
} // end signup button

.talent { background-image: url("./img/talent.jpg"); background-size: contain; background-repeat: no-repeat;}
.company { background-image: url("./img/company.jpg"); background-size: contain; background-repeat: no-repeat;}

.divider {
  height: 40px;
  background-color: @NEC;
  width: 100%;
}

#program {
  max-width: 85%;
  margin-bottom: 10px;
}

.footer {
  width: 80%;
  margin: auto;
  text-align: center;
}

.logosSupportingOrganizations {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  img {
    max-width: 200px;
    margin: 20px 20px;
  }
}

.showOnMobile {
  display: none;
}


/*
  __  __  ___  ____ ___ _     _____
 |  \/  |/ _ \| __ )_ _| |   | ____|
 | |\/| | | | |  _ \| || |   |  _|
 | |  | | |_| | |_) | || |___| |___
 |_|  |_|\___/|____/___|_____|_____| &c */

@media screen and (max-width: 1060px) {
  //MOBILE

  body {
    background-position: center;
    text-align: center;
  }

  .showOnMobile {
    display: inline-block;
    color: white;
    padding: 0.7rem;
    margin-top: 45vh;
    background: black;
    text-transform: uppercase;
    font-weight: 700;
    font-family: Open Sans;
  }

  .content {
    width: 95%;
    overflow: hidden;
    margin-top: 2vh;
  }

  .textColumns {
    flex-direction: column;
    p {
      width: 90%;
    }
}
} /* EINDE media max-width 1060px */

@media screen and (max-width: 1500px) and (min-width: 1060px) {

  .content {
    width: 80vw;
    overflow: hidden;
  }

  .textColumns {

    p {
      width: 90%;
    }
}
} /* EINDE media max-width 768px */