html {
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
}

@font-face {
  font-family: "CodeFont";
  /* name you’ll use in CSS */
  src: url("assets/codefont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: rgb(38, 38, 38);
  user-select: none;
  text-align: center;
}

.me {
  width: 150px;
  height: 150px;
  border-radius: 15%;
  object-fit: cover;
}

h1 {
  font-family: Helvetica;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 50px;
}

h3 {
  font-family: Helvetica;
  font-weight: bold;
  color: #ffffff;
  margin-top: 50px;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  padding-top: 75px;
  height: 100px;
}

.slcbutton {
  background-color: #0040d6;
  color: #ffffff;
  border: none;
  height: 50px;
  width: 150px;
  border-radius: 7.5px;
  font-size: 16px;
  font-family: "CodeFont";
  font-weight: bold;
  cursor: pointer;

  transition: background-color 0.2s ease;

}

.slcbutton:hover:not(.clicked) {
  transform: scale(1.05);
}

.spacer {
  height: 150px;
  padding-top: 50px;
  width: 100%;
}

div {
  width: 80%;
  margin: 0 auto;
  /* optional: centers the divs horizontally */
}

#volleyballimg {
  border-radius: 15px;
  border: 8px solid #0011ff;
  transition: color 0.2s ease;
  cursor: pointer;
}

#volleyballimg:hover:not(.clicked) {
  transform: scale(1.05);
}

#typingimg {
  transition: color 0.2s ease;
  cursor: pointer;
}

#typingimg:hover:not(.clicked) {
  transform: scale(1.05);
}

#chessimg {
  transition: color 0.2s ease;
  cursor: pointer;
}

#chessimg:hover:not(.clicked) {
  transform: scale(1.05);
}

#switchImage {
  transition: transform 0.1s ease;
  cursor: pointer;
  background-color: black;
}

#switchImage:hover:not(.clicked) {
  transform: scale(1.05);
}



#name {
  font-size: 24px;
  font-weight: bold;

  transition: color 0.2s ease;
  cursor: pointer;
}

#name:hover:not(.clicked) {
  transform: scale(1.05);
}

#engineeringtxt {
  transition: transform 0.1s ease;
  cursor: pointer;
}

#engineeringtxt:hover:not(.clicked) {
  transform: scale(1.05);
}

#engineeringsubtxt {
  transition: transform 0.1s ease;
  cursor: pointer;
}

#engineeringsubtxt:hover:not(.clicked) {
  transform: scale(1.05);
}

#engineeringsubtxt:hover:not(.clicked) {
  transform: scale(1.05);
}


#disclaimer {
  color: lightgray;
  transition: transform 0.1s ease;
  cursor: pointer;
}

#disclaimer:hover:not(.clicked) {
  transform: scale(1.05);
}

.clicked {
  transform: scale(0.95);
}