/* styles.css */

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  margin: 0;
}

/* Background */

body {
  background: white;
  font-family: 'Roboto', sans-serif;
}

/* Main container on index page */

.main {
  margin: auto;
  max-width: 1024px;
}

/* Middle container on every page */

.container {
  width: 70%;
 /* background-color: yellow; */
  float: left;
}

/* Blocks container */

.main-container {
  display: flex;
  padding: 0px;
  background-color: #e4eae9;
}

/* Container for left side */

.buttonsleft {
  width: 15%;
  height: 1000px;
  padding: 79px 15px 15px 30px;
  float: left;
 /* background-color: blue; */
}

/* Container for right side */

.buttonsright {
  width: 15%;
  height: 1000px;
  padding: 30px;
  float: left;
 /* background-color: blue; */
}

/* Text */

h1 {
  color: black;
  font-weight: bold;
  font-size: 24px;
}

h2 {
  color: white;
  font-weight: bold;
  font-size: 18px;
  background-color: #4e9d96;
  padding: 10px 15px;
  margin-bottom: 0;
  margin-top: 30px;
}

p {
  color: black;
  font-size: 16px;
}

/* Hidden blocks */

/* Semester 2 blocks */

.hidden {
  display: none;
}

/* Semester 3 blocks */
.hidden2 {
  display: none;
}

.hidden3a {
  display: none;
}

.hidden4a {
  display: none;
}

.hidden5a {
  display: none;
}

.hidden6a {
  display: none;
}

.hidden7a {
  display: none;
}

/* Semester 4 blocks */

.hidden3 {
  display: none;
}

.hidden4 {
  display: none;
}

.hidden5 {
  display: none;
}

.hidden6 {
  display: none;
}

.hidden7 {
  display: none;
}

/* Selection overview blocks */

.hidden8 { /* Media & Design */
  display: none;
}

.hidden9 { /* Media & Design */
  display: none;
}

.hidden10 { /* Business */
  display: none;
}

.hidden11 { /* Business */
  display: none;
}

.hidden12 { /* Software */
  display: none;
}

.hidden13 { /* Software */
  display: none;
}

.hidden14 { /* Technology */
  display: none;
}

.hidden15 { /* Technology */
  display: none;
}

.hidden16 { /* Infrastructure */
  display: none;
}

.hidden17 { /* Infrastructure */
  display: none;
}

/* Blocks on ad-curriculum page */

.block2 {
  width: calc(18% - 10px);
  padding-bottom: 18%;
  cursor: pointer;
  background-color: lightgreen;
  text-align: center;
  position: relative;
  border-radius: 15px;
  float: left;
  margin: 5px;
}

.block2:hover {
  box-shadow: 0 0 50px 15px #dadada;
}

.block2 p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
margin: 0;
}

/* Border */

.block2.active {
border-color: #E5007D;
border-style: solid;
border-width: 2px;
}

/* Disabling blocks */

.block2.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Buttons */

.button {
  background-color: white;
  border-radius: 10px;
  width: 130px;
  color: black;
  padding: 10px 15px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  display: inline-block;
  border: 2px solid black;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}

.button p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  margin: 0;
  }

/* .navbar li a:hover .fa-chevron-right { */
  /* margin-left: 10px; */
  /* transition: .3s;  */
/* } */

.button:hover {
  box-shadow: 0 0 50px 15px #dadada;
}

.button:hover .fa-chevron-right {
  margin-left: 10px;
  transition: .3s;
}

.fa-chevron-right {
  color: #E5007D;
  margin-left: 5px;
}

/* Custom cursor */

.cursor-ball {
  width: 8px;
  height: 8px;
  background-color: black;
}

.cursor-outline {
  width: 3rem;
  height: 3rem;
  border: 1px solid black;
  transition: all 0.10s ease;
}

.cursor-ball,
.cursor-outline {
  border-radius: 50%;
  position: absolute;
  z-index: 100;
  pointer-events: none;
  transform: translate(-50%, -50%)
}

/* Back to top */

#backtotopbutton {
  display: none; /* Hidden by default */
  width: 60px;
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #524d43; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

.overview {
  pointer-events: none;
}

/* .navbar { */
  /* margin: 0; */
/* } */

/* .unorderedlist { */
  /* list-style-type: none; */
  /* margin: 0; */
  /* padding: 0; */
  /* overflow: hidden; */
  /* background-color: #663366; */
  /* color: white; */
/* } */

ul {
  margin: 0;
}

/* .navbar li { */
  /* float: left; */
/* } */

/* li a { */
  /* display: block; */
  /* color: white; */
  /* padding: 10px 15px; */
  /* text-decoration: none; */
  /* font-size: 18px; */
/* } */

/* li a:hover { */
  /* background-color:#855c85; */
  /* text-decoration: underline; */
/* } */

.text {
  line-height: 1.5;
  padding-top: 11px;
}