internship.css

@import url("https://fonts.googleapis.com/css2?family=Fira+Sans&family=Open+Sans:wght@500&family=Oswald:wght@500&family=Roboto+Condensed:ital@1&family=Roboto:wght@300;400;700&display=swap");

body {
  /* background-image: url(./images/Internship\ bg.jpg); */
  background-color: aliceblue;
}
/* Toggle Switch styling starts here */
.checkbox {
  opacity: 0;
  position: absolute;
}

#toTopBtn {
  position: fixed;
  bottom: 26px;
  right: 39px;
  z-index: 98;
  padding: 21px;
  background-color: #273f64;
  border-radius: 25%;
}

.js .cd-top--fade-out {
  opacity: 0.5;
}

.js .cd-top--is-visible {
  visibility: visible;
  opacity: 1;
}

.js .cd-top {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s, background-color 0.3s;
}

.cd-top {
  position: fixed;
  bottom: 20px;
  bottom: var(--cd-back-to-top-margin);
  right: 20px;
  right: var(--cd-back-to-top-margin);
  display: inline-block;
  height: 40px;
  height: var(--cd-back-to-top-size);
  width: 40px;
  width: var(--cd-back-to-top-size);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05) !important;
  background: url(https://res.cloudinary.com/dxfq3iotg/image/upload/v1571057658/cd-top-arrow.svg)
    no-repeat center 50%;
  background-color: hsla(5, 76%, 62%, 0.8);
  background-color: hsla(
    var(--cd-color-3-h),
    var(--cd-color-3-s),
    var(--cd-color-3-l),
    0.8
  );
}

.label {
  width: 44px;
  height: 20px;
  background-color: white;
  border: 0.8px solid #4c4c4c;
  display: flex;
  border-radius: 50px;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  position: relative;
  transform: scale(1.5);
}

.ball {
  width: 14px;
  height: 14px;
  background-color: white;
  position: absolute;
  top: 2px;
  left: 2px;
  border: 1px solid #4c4c4c;
  border-radius: 50%;
  transition: transform 0.2s linear;
}

/*  target the elemenent after the label*/
.checkbox:checked + .label .ball {
  transform: translateX(24px);
}

.bi-moon {
  color: black;
}

.bi-sun {
  color: white;
}
/* Toggle Switch styling ends here */

/* dark mode styling starts here */
.dark-mode {
  background-color: black;
  color: white;
}
.dark-nav {
  background-color: black;
}
.dark-anchor-tag {
  color: white;
}
.dark-anchor-tag:hover {
  color: white;
}
.dark-card {
  background-color: #121212;
  border-radius: 20px;
  /* color: white; */
}
.dark-name {
  color: white;
}
/* dark mode styling ends here */
.back-button {
  text-decoration: none;
  color: rgb(151, 151, 151);
}

/**card styling starts **/
.internships-card {
  margin-top: 5vh;
  border-width: 2px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  transition: transform 350ms ease-in-out;
}

.company-name {
  color: rgb(60, 60, 60);
}

/* .common-button {
  margin-top: 5px;
  margin-left: 9vw;
} */
.internship-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: 20px;
  width: 100%;
}

.internships-cards h3 {
  color: #fd7014;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
}

.content {
  margin: 5px 15px;
}

.about {
  margin-bottom: 0px;
  margin-left: 10px;
  margin-top: 15px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 550;
  color: rgb(49, 49, 49);
}

i {
  font-family: "Open Sans", sans-serif;
  text-decoration: none;
}

.location-container {
  margin-left: 25%;
}

.location,
.type {
  font-family: "Fira Sans", sans-serif;
  color: rgb(103, 98, 98);
}

.type-container,
.location-container > i {
  color: blue;
}

.internships-card:hover {
  box-shadow: 0 0px 6px rgb(250, 135, 4);
  transform: scale(1.05);
}

/* Card styling ends */
/* discord button styling*/
.discord-cta {
  padding: 20px;
}

.discord-cta > .discord-link {
  text-decoration: none;
  background-color: rgb(227, 227, 227);
  color: #fd7014;
  border-radius: 20px;
  padding: 12px;
}

.discord-link:hover {
  background-color: transparent;
  color: #fd7014;
  background-color: aliceblue;
  box-shadow: 0 0.5px 1px rgb(92, 92, 92);
}