.first-button{
  left:calc(25% - 75px);

}
.second-button{
  left:calc(50% - 75px);
}

.third-button{
  left:calc(75% - 75px);
}



.WEX{
  left:calc(15% - 100px);
}

.coding{
  left:calc(50% - 100px);
}

.activities{
  left:calc(85% - 100px);
}

.WEX,
.coding,
.activities,
.button-child {
  position: absolute;
  width:200px;
  height:200px;
  border:none;
  border-radius:100px;
  user-select: none;
  transition: transform 1s ease-in-out;
  cursor:pointer;
}

.parent-buttons{
  position: relative;
  height:200px;
  margin-top:30px;
  margin-bottom:100px;
}


.writing-space{
  height:500px;
  margin-left:15px;
  margin-bottom:30px;
}

.button-child-container,
.parent-buttons{
  width:100%;
  white-space: nowrap;
  user-select: none;
  position: relative;
  
}

.button-child-container{
  height: 300px;
}

.button-child {
  position: absolute;
  background-color: white;
  height:150px;
  width:150px;
  border:none;

}



.otherImage {
  float:right;
  width:15%;
  height: auto;
}




.ExperienceImage,
.ExperienceImageBigger {
  float:right;
  width:30%;
  border-radius: 10px;
  height: auto;
}

.ExperienceImageBigger {
  width:50%;
}

.text-with-image {
  font-size: 30px;
  margin-top:0px;
  width:100%;
  overflow: hidden;
  height:auto;
  display: inline-block;
}

.text-float-left {
  width:67%;
  float:left;
}


.logo-image-cpp{
  width:100px;
  height:100px;
}

.logo-image-renishaw{
  width:110px;
  height:30px;
}

.logo-image-siemens{
  width:120px;
  height:25px;
}

.logo-image-dense-air{
  width:120px;
  height:40px;
}

.logo-image-python{
  width:75px;
  height:75px;
}

.logo-image-grades{
  width:100px;
}

.logo-image-parkrun{
  width:125px;
}

.grade-bunch{
  margin-bottom: 50px;
  font-size:45px;
  color:rgb(247, 181, 96);
}

.grade{
  font-size:35px;
  color:rgb(192, 171, 146);
  margin:0px;
}

.link{
  color:rgb(87, 87, 252);
  text-decoration: none;
}