/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Crete+Round&family=Poppins:wght@200;300&family=Tourney&display=swap");

/* Variables */
:root {
  --body-color: #00B1D2FF;
  --container-color: #050a30;
  --text-color: #ffff;
  --second-buttonColor: #e77b9f;
  
  /* --body-color: #F2AA4CFF;
  --container-color:  #101820FF;
  --text-color: #ffff;
  --second-buttonColor: #7A2048; */

 

  /* ===============Font and Tryprography============= */

  --body-font: "Crete Round", serif;
  --intro-font: "Tourney", cursive;
  --nav-font: "Poppins", sans-serif;

  --altrabiggest-font-size: 6.25rem;
  --biggest-font-size: 5.125rem;
  --big-font-size: 4.5rem;
  --h1-font-size: 3.4rem;
  --h2-font-size: 3rem;
  --h3-font-size: 2.8rem;
  --normal-font-size: 2rem;
  --semi-font-size:1.8rem;
  --small-font-size: 1.4rem;
  --smallest-font-size:1.3rem;
  --smallest-small-font-size:1.1rem;
  --btn-font-size:26px;


  --font-medium: 500;
  --font-semi-bold: 200;

  --z-tooltrip: 10;
  --nav-width: 7rem;

  --colum-width:55vw;



}


/* ====== Base ======== */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
head title{
  font-family: var(--body-font);
  font-size: 1rem;
}
html {
  scroll-behavior: smooth;
  background: var(--body-color);
  overflow-x: hidden;
}
html,
body {
  height: 100%;

}
body {
  transition: 0.4s;
  font-family: var(--body-font);
  font-size: var(--h2-font-size);
  color: var(--text-color);
}
h1,
h2,
h3,
h4 {
  color: var(--text-color);
  font-weight: var(--font-semi-bold);
}
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: var(--container-color);
}

img,
video {
  max-width: 100%;
  max-height: auto;
  -webkit-user-drag: none; 
  -khtml-user-drag: none; 
  -moz-user-drag: none; 
  -o-user-drag: none; 
}
input{
  height: 2.5rem;
  -webkit-appearance: none; box-shadow: none !important;
  font-family: var(--body-font);
  padding-left: .5rem;
  border: none;
}
textarea{
  padding-top: .5rem;
  padding-bottom: .8rem;
  padding-left: .5rem;
  font-family: var(--body-font);
  max-width: 100%;
  max-height: 5rem;
  overflow: hidden;
}
input:focus,textarea:focus {
  outline: none;
  padding-left: .5rem;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
textarea{
  height: 4rem;

}
.button {
  cursor: pointer;
  border: none;
  display: inline-flex;
  height: 4rem;
  justify-content: center;
  text-transform: capitalize;
  align-items: center;
  text-align: center;
  border-radius: 6px;
  font-size:var(--btn-font-size);
  font-weight: 200;
  transition: .5s;
}
.button:hover{
    transform:translateY(-5px);
}

.colum {
  width: var(--colum-width);
  position: absolute;
  height: 1050vh;
  background-color: var(--container-color);
}
.contains {
  margin-left: var(--nav-width);
  position: relative;
  padding: 4rem 0 0 4rem;
  margin-bottom: 14rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sectionTitle {
  text-transform: capitalize;
  position: absolute;
  font-weight: 300;
  font-size: var(--biggest-font-size);
  padding-top: 2rem;
  left: 20vw;
}

.stop{
  position: fixed;
  overflow: hidden;
}
/* media */
@media  screen and (max-width:1400px){
  :root{
  --nav-width: 5rem; 
    }
    .contains{
      padding: 3rem 0 0 3rem;
    }
}
@media  screen and (max-width:1200px){
  :root{
  --biggest-font-size: 4rem;
  --nav-width: 5rem; 
  --big-font-size: 3.2rem;
  --h1-font-size: 2.8rem;
  --semi-font-size:1.6rem;


    }
    .contains{
      padding: 3rem 0 0 3rem;
    }
}
@media  screen and (max-width:968px){

  :root{
  
  --biggest-font-size: 4.125rem;
  --big-font-size: 3rem;
  --h1-font-size: 2.5rem;
  --h2-font-size: 2.5rem;
  --h3-font-size: 2rem;
  --normal-font-size: 1.5rem;
  --semi-font-size:1.4rem;
  --small-font-size: 1rem;
  --smallest-font-size:1.3rem;
  --smallest-small-font-size:1.2rem;
  --btn-font-size:20px;
  --colum-width:50vw;
  --nav-font:var(--body-font);
  --nav-width: 0rem;
  
  }
  .contains {
    padding: 4rem 0 0 2rem;
    
  }
  .sectionTitle {
    left: 10vw;
  }
 
  
  }
  @media  screen and (max-width:750px){
    :root{
      --biggest-font-size: 3rem;
       --normal-font-size: 1rem;
      --big-font-size: 2rem;
      --h1-font-size: 2rem;
      --semi-font-size: 1.2rem;
      --h2-font-size: 1.8rem;
      --small-font-size: .8rem;
      --smallest-small-font-size:.8rem;
    
    
    
    }
    .button{
      height: 3rem;
    }


  }
  @media  screen and (max-width:480px){
:root{
  --biggest-font-size: 3.5rem;
  --normal-font-size: 1.5rem;
  --colum-width:100vw;
  --big-font-size: 2.5rem;
  --h1-font-size: 1.5rem;
  --semi-font-size: 1.2rem;
  --h2-font-size: 1.8rem;
  --small-font-size: 1.2rem;
  --smallest-small-font-size:1rem;



}
.contains {
  grid-template-columns: 1fr;
  margin-bottom: 5rem;

}
.sectionTitle {
  left: 4rem;
}
.button{
  height: 3rem;
}
.colum {
  width: var(--colum-width);
  position: absolute;
  height: 900vh;
  background-color: var(--container-color);
}
  }