style-mobile.css

/* -------------------- Header -------------------- */

header {
  width: 100vw;
  height: 15vh;
  max-height: 20vh;
  position: relative;
  top: 0;
}

.header-background {
  top: 15vh;
  stroke-width: 5px;
}


/* ------------ Menu --------------- */
nav {
  height: 20vh;
}

.menu-container {
  position: relative;
  /* top: -20px; */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all linear 250ms;
}

.menu-container svg {
  position: relative;
  flex-basis: 30%;
  height: 100%;
  z-index: 0;
}

.menu-container .menu-path-group {
  fill: none;
  stroke-width: 10px;
  stroke: var(--clr-neonBlue);
}

#menu-btn {
  position: absolute;
  width: 40px;
  height: 3px;
  background-color: var(--clr-neonBlue);
  border: none;
  box-shadow: 0 0 10px var(--clr-neonBlue);
  animation: menu-btn-anim 3000ms linear infinite;
}

#menu-btn::before,
#menu-btn::after {
  content: '';
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  background-color: var(--clr-neonBlue);
}

#menu-btn::before {
  top: -7px;
}

#menu-btn::after {
  top: 7px;
}

@keyframes menu-btn-anim {

  0%,
  100% {
    transform: translateY(-15px);
  }

  50% {
    transform: translateY(0px);
  }
}

.small-nav {
  top: 0px;
  background-color: var(--clr-neonBlue);
  background: linear-gradient(0deg, transparent 0 10%, hsla(205, 100%, 53%, 0.25) 40% 60%, transparent 90%);
  backdrop-filter: blur(5px);
  height: 10vh;
}

.small-menu {
  width: 50%;
  top: 0px;
}

/* Menu slide */

.menu-slide {
  width: 100vw;
  height: 80vh;
  position: absolute;
  top: 1vh;
  left: -105vw;
  background-color: var(--clr-mainBackground);
  border-radius: 0 25px 25px 0;
  border: 5px solid var(--clr-neonBlue);
  opacity: .9;
  z-index: 100;
  transition: all linear 250ms;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-header {
  position: relative;
}

.menu-header h2 {
  color: var(--clr-neonBlue);
  text-align: center;
  margin-top: 1rem;
  font-size: 3rem;
}

.close-menu-btn {
  width: 30px;
  height: 30px;

  position: absolute;
  top: 1rem;
  right: 1rem;

  font-size: 1rem;
  font-weight: bold;
  color: var(--clr-neonBlue);

  border: 2px solid hsla(205, 100%, 53%, 0.507);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

.menu-slide__content-container ul {
  padding: 0;
  list-style: none;
  text-align: center;
  margin-bottom: 5rem;
}

.menu-slide__content-container li {
  font-size: 1.5rem;
  line-height: 5rem;
}

.menu-slide__content-container a {
  text-decoration: none;
  color: var(--clr-ligthBlue);
}

/* ------------- Main ------------ */
main {
  padding: 0;
  grid-template-rows: minmax(max-content, auto) repeat(2, minmax(100vh, max-content));
}

#greetings-page {
  padding-top: 10vw;
}

#greetings-page::before,
#greetings-page::after{
  top: 12vw;
}

#greetings-page__content-container {
  margin-top: 10px;
}

#rol>p:first-child {
  font-size: calc(100vw/6);
}

#rol>p:last-child {
  font-size: calc(100vw/10);
}

/* ---- Picture Visual Widget ----- */

#myPicture-visualWidget__container{
  flex-direction: column;
}

#myPicture {
  margin-top: -150px;
  opacity: .75;
  border-radius: 10% 10% 50% 50%;
}

/* ------ About me  ----------- */

.subtitle {
  font-size: 1.25rem;
}

.topics-container ul li > img{
  width: 10%;
}


/* -------- CODING SITES --------- */

.coding-site__content-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
}


/* ------------------------------- */

/* --- Projects Gallerie -- */

.projects-gallerie-container {
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}
/* 
#left-side__container,
#right-side__container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#tech-list,
#projectType-list {
  padding: .5rem 1rem;
  flex-basis: 100%;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(var(--clr-mainBackground), hsla(205, 100%, 50%, 0.094), var(--clr-mainBackground));
}


#right-side__container {
  max-height: 10vh;
  border-top: 1px solid var(--clr-neonBlue);
}

#projectType-list {
  font-size: 3rem;
  color: var(--clr-ligthBlue);
}

.gallerie-set{
  border: 0;
  flex-direction: column;
  background: linear-gradient(180deg, #0f9bff 0% 30%, transparent 95% 100%);
}

#desktop-link{
  display: none;
}

.visit-link i {
  color: var(--clr-ligthBlue);
  font-size: 2.5rem;
  margin-top: 1rem;
}

.gallerie-item-img>img {
  border-right: 2px solid #0f9bff;
  border-top: 1px solid #0f9bff;
  border-bottom: 1px solid #0f9bff;
  border-radius: 5px 20px 20px 5px;
}

.project-title{
  font-size: 1.5rem;
}

.project-description {
  max-height: 5rem;
} */

/* ---------- Project Collection --------- */
/* #content-container {
  grid-column: 1 / span 3;
  grid-row: 4;
  max-height: 80vh;
  overflow-y: scroll;
} */