* {
      box-sizing: border-box;
    }



    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
      .nav {
		      height: 15vh;
		}
		.full-screen-menu-mobile{
		top: 15vh;
			height: 0;
		}
		    .full-screen-menu-mobile-active {
      height: 85vh;

    }


      .full-screen-welcome {
        height: auto;
        min-height: 1%;

      }

      .menu-desktop {
        display: none;
      }

      .menu-icon-burger {
        display: inline;
      }

      .flex-center {
        justify-content: space-between;
      }

      .welcome {
        height: 85vh;
      }

      .welcome h1 {
        padding-top: 15vw;
        font-size: 20px;
        letter-spacing: 8px;
      }

      .welcome .logo-text {
        padding-top: 20px;
        width: 80vw;
        min-width: 250px;
      }

      .welcome h2 {
        font-size: clamp(14px, 2vw, 16px);
        width: 70vw;
        max-width: 500px;

      }

      .welcome-feratopians {
        width: 100%;
      }

    }

    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
      .nav      
 {height: 15vh;
		}
				.full-screen-menu-mobile{
		top: 15vh;
								height: 0;

		}
		    .full-screen-menu-mobile-active {
      height: 85vh;

    }


      .full-screen-welcome {
        height: auto;
        min-height: 1%;
      }

      .menu-desktop {
        display: none;
      }

      .menu-icon-burger {
        display: inline;
      }

      .flex-center {
        justify-content: space-between;
      }

      .welcome {
        height: 85vh;
      }

      .welcome h1 {
        padding-top: 9vw;
        font-size: 20px;
        letter-spacing: 8px;
      }

      .welcome .logo-text {
        padding-top: 20px;
        width: 80vw;
        min-width: 500px;
      }

      .welcome h2 {
        font-size: clamp(20px, 2vw, 20px);
        width: 80vw;
        max-width: 700px;
      }

      .welcome-feratopians {
        width: 100%
      }


    }

    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
      .nav {
		      height: 12.5vh;
}
				.full-screen-menu-mobile{
		top: 12.5vh;
								height: 0;

		}
		    .full-screen-menu-mobile-active {
      height: 87.5vh;

    }


      .full-screen-welcome {
        height: 100%;
        min-height: 100%;

      }

      .menu-desktop {
        display: inline;
      }

      .menu-icon-burger {
        display: none;
      }

      .flex-center {
        justify-content: space-between;
      }

      .welcome {
        height: 87.5vh;
      }

      .welcome h1 {
        padding-top: 9vw;
        font-size: 22px;
        letter-spacing: 8px;
      }

      .welcome .logo-text {
        padding-top: clamp(25px, 2vw, 35px);
        width: 40vw;
        min-width: 600px;
      }

      .welcome h2 {
        font-size: clamp(20px, 2vw, 20px);
        width: 60vw;
        max-width: 700px;

      }

      .welcome-feratopians {
        width: auto
      }


    }
	      @media only screen and (min-width: 768px) and (orientation: landscape) {
      .nav {
        height: 25vh;
      }
			  		.full-screen-menu-mobile{
		top: 25vh;
									height: 0;

		}
			      .full-screen-menu-mobile-active {
      height: 75vh;

    }


      .full-screen-welcome {
        height: auto;
        min-height: 100%;

      }

      .menu-desktop {
        display: inline;
      }

      .menu-icon-burger {
        display: none;
      }

      .flex-center {
        justify-content: space-between;
        gap: 30px;
      }

      .welcome {
        height: auto;
      }

      .welcome h1 {
        padding-top: 3vw;
        font-size: 22px;
        letter-spacing: 8px;
      }

      .welcome .logo-text {
        padding-top: clamp(25px, 2vw, 35px);
        width: 40vw;
        min-width: 600px;
      }

      .welcome h2 {
        font-size: clamp(20px, 2vw, 20px);
        width: 60vw;
        max-width: 700px;

      }

      .welcome-feratopians {
        width: auto
      }

    }

    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
      .nav {
		      height: 12.5vh;
}
				.full-screen-menu-mobile{
		top: 12.5vh;
								height: 0;

		}
		    .full-screen-menu-mobile-active {
      height: 87.5vh;

    }


      .full-screen-welcome {
        height: 100%;
        min-height: 100%;
      }

      .menu-desktop {
        display: inline;
      }

      .menu-icon-burger {
        display: none;
      }

      .flex-center {
        justify-content: space-between;
      }

      .welcome {
        height: 87.5vh;
      }

      .welcome h1 {
        padding-top: 7vw;
        font-size: 25px;
        letter-spacing: 10px;
      }

      .welcome .logo-text {
        padding-top: clamp(25px, 2vw, 35px);
        width: 45vw;
        min-width: 600px;
      }

      .welcome h2 {
        font-size: clamp(20px, 3vw, 22px);
        width: 80vw;
        max-width: 700px;

      }
    }

    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
      .nav {
		      height: 12.5vh;
}
				.full-screen-menu-mobile{
		top: 12.5vh;
								height: 0;

		}
		    .full-screen-menu-mobile-active {
      height: 87.5vh;

    }


      .full-screen-welcome {
        height: 100%;
        min-height: 100%;
      }

      .flex-center {
        max-width: 1200px;
      }

      .menu-desktop {
        display: inline;
      }

      .menu-icon-burger {
        display: none;
      }

      .flex-center {
        justify-content: space-between;
      }

      .welcome {
        height: 87.5vh;
      }

      .welcome h1 {
        padding-top: 5vw;
        font-size: 25px;
        letter-spacing: 10px;
      }

      .welcome .logo-text {
        padding-top: clamp(25px, 2vw, 35px);
        width: 45vw;
        min-width: 600px;

      }

      .welcome h2 {
        font-size: clamp(20px, 3vw, 22px);
        width: 45vw;
        max-width: 700px;
      }
    }
	  



    html {
      height: 100%;
    }


    body {
      margin: 0;
      padding: 0;
      image-rendering: -webkit-optimize-contrast;
      height: 100%;


    }

    .nav {
      float: left;
      position: sticky;
      top: 0;
      color: #ffffff;
      background-image: linear-gradient(180deg, #000000ec, #00201cec);
      background-image: linear-gradient(180deg, #00201cec, #000000e6);
    }

    .full-screen-welcome {
      top: 0;
      color: #ffffff;
      transition: min-height 2s;

		background: linear-gradient(180deg, #000000f0, #00ff00), 
			linear-gradient(330deg, #004843, #00ff00),
			linear-gradient(30deg, #071f4e, #0000ff), url(../img/coding_1080p_wz1_hell.png);
		
		background: 
			linear-gradient(180deg, #000000fc 12%, #00ff9f57), 
			linear-gradient(330deg, #00484314, #44ff000a), 
			linear-gradient(30deg, #071f4e, #0000ff5e), url(../img/coding_1080p_wz1_hell.png);

      background-repeat: no-repeat;
      background-size: cover;
    }

    .flex-center {
      display: flex;
      width: 90%;
      padding-top: 32px;
      flex-direction: column;
      align-items: center;
      margin-right: auto;
      margin-left: auto;
      padding-top: 0;
      padding-bottom: 0;

    }

    .flex-space-between {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    .logo-link {
      width: 10%;
      height: 10%;
      min-width: 60px;
      min-height: 60px;
      max-width: 80px;
      max-height: 80px;
      -webkit-transition: opacity .2s ease-in-out;
      transition: opacity .2s ease-in-out;
    }

    .logo {
      width: 100%;
      height: 100%;
    }

    .menu-icon-burger:hover {
      cursor: pointer;
    }

    .menu-burger-flex {
      width: 35px;
      height: 28px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }


    .menu-icon-burger .burger-line {
      display: block;
      height: 4px;
      width: 100%;
      border-radius: 10px;
      background: #1d1e1f;
      background: white;
    }

    .menu-icon-burger .line1 {
      transform-origin: 0% 0%;
      transition: transform 0.4s ease-in-out;
    }

    .line1-active {
      transform: rotate(45deg);
    }

    .menu-icon-burger .line2 {
      transition: transform 0.2s ease-in-out;
    }

    .line2-active {
      transform: scaleY(0);
    }

    .menu-icon-burger .line3 {
      transform-origin: 0% 100%;
      transition: transform 0.4s ease-in-out;
    }

    .line3-active {
      transform: rotate(-45deg);
    }


    .menu-item {
      padding: 10px;
      -webkit-transition: opacity .2s ease-in-out;
      transition: opacity .2s ease-in-out;
      color: #fff;
      color: #d5d5d5;
      font-size: clamp(15px, 2vh, 18px);
      font-weight: clamp(400, 500, 500);
      letter-spacing: 1px;
      text-decoration: none;
      text-transform: uppercase;
      font-family: "Roboto", sans-serif;
    }

    .menu-item:hover {
      opacity: 0.7;
      outline: 0;
    }

    .welcome {}

    .welcome-feratopians {}

    .welcome h1 {
      font-family: "Roboto", sans-serif;
      text-align: center;
      font-weight: 700;
      margin: 0;
      color: #4b5951;
      color: #a8a8a8;
      color: #ccc;
      color: #d5d5d5;

    }

    .welcome .logo-text {}


    .welcome h2 {
      margin: 0;
      padding: 0;
      line-height: clamp(150%, 5vw, 200%);
      text-align: center;
      font-weight: clamp(400, 2vw, 700);
      font-family: "Roboto", sans-serif;
      color: #4b5951;
      color: #a8a8a8;
      color: #ccc;
      color: #d5d5d5;

    }

    .logo-chars {
      width: 80%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }

    .logo-char {
      flex-grow: 1;
      flex-shrink: 1;
      min-width: 0;
    }

    .logo-char1 {
      animation: wave 10s infinite linear;
    }

    .logo-char2 {
      animation: wave 10s 0.8s infinite linear;
    }

    .logo-char3 {
      animation: wave 10s 1.6s infinite linear;
    }

    .logo-char4 {
      animation: wave 10s 2.4s infinite linear;
    }



    @keyframes wave {
      2% {
        transform: rotateY(0deg) scale(1);
      }

      4% {
        transform: rotateY(45deg) scale(1.2);
      }

      6% {
        transform: rotateY(0deg) scale(1.4);
      }

      8% {
        transform: rotateY(-45deg) scale(1.2);
      }

      10% {
        transform: rotateY(0deg) scale(1);
      }

      100% {}
    }

    .bear {
      max-height: 200px;
    }

    .full-screen-menu-mobile {
      position: absolute;
      left: 0;
      width: 100%;
      transition: height 1s;
      overflow: hidden;
      background-image: linear-gradient(180deg, #000000ec, #00201cec);
      background-image: linear-gradient(180deg, #000000ff, #00201cec);

    }


    .menu-flex-mobile {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .menu-item-mobile {
      width: 100%;
      color: #d5d5d5;
      padding: 16px 16px;
      text-decoration: none;
      font-family: "Roboto", sans-serif;
      text-align: center;
      font-size: clamp(16px, 2vh, 18px);
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      -webkit-transition: opacity .2s ease-in-out;
      transition: opacity .2s ease-in-out;

    }

    .menu-item-mobile:hover {
      background-color: #ddd;
      color: black;
      background-color: #009c8a;
      color: #1a1a1a;
    }