/* Colors
--text: white (#ffffff);
--background: black (#000000);
--primary: #00ffe4;
--secondary: #009b8c;
*/





/*Fonts*/

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-BoldItalic.woff2') format('woff2'),
        url('fonts/JetBrainsMono-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2'),
        url('fonts/JetBrainsMono-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'),
        url('fonts/JetBrainsMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-SemiBold.woff2') format('woff2'),
        url('fonts/JetBrainsMono-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Italic.woff2') format('woff2'),
        url('fonts/JetBrainsMono-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2'),
        url('fonts/JetBrainsMono-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}





/*Background*/

body, html {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /*background-image: linear-gradient(60deg, black 69%, #009b8c);*/
  background-image: radial-gradient(at 110% 13%, #009b8c, black 60%);
  height: 100%;
  background-attachment: fixed;
}




/*Main*/

.main {
  color: white;
  font-family: 'JetBrains Mono';
  font-weight: 600;
}

.main p {
    padding-left: 0.2rem;
}

a {
  color: #00ffe4;
}

h1 {
  font-size: 64px;
  font-weight: bold;
  text-align: center;
  text-shadow: 0px 0px 15px black;
}

p {
  font-size: 20px;
  text-shadow: 0px 0px 5px black;
  
}

#back {
  margin-top: 64px;
  margin-bottom: 64px;
  padding: 12px;
  border-radius: 0px 25px 25px 0px;
  background-color: rgba(0, 255, 228, 25%);
  float: left;
  color: white;
  border-style: solid;
  text-shadow:0px 0px 1px black;
  z-index: 0;
  position: fixed;
  font-family: "JetBrains Mono";
  font-weight: bold;
  width: 4rem;
  display: block;
  transform: translate(-15%, -5em);
  transition: transform 300ms ease-in-out,
  box-shadow 300ms ease-in-out,
  border-radius 350ms ease-in-out,
  background-color 300ms ease-in-out;
  border-width: 0.25%;
  border-color: white;
}

#back:hover {
    transform: translate(5%, -5em);
  border-radius: 8rem;
  box-shadow: 0px 0px 12px white;
  background-color: rgba(0, 255, 228, 50%);
  cursor: pointer;
}

/*Project*/

.project {
  margin-top: 64px;
  margin-bottom: 64px;
  padding: 2rem;
  padding-left: 4rem;
  border-radius: 0% 8rem 8rem 0%;
  background-color: rgba(0, 255, 228, 15%);
  display: block;
  max-width: 32rem;
  text-decoration-line: none;
  color: white;
  border-style: solid;
  border-width: 0.25rem;
  transform: translate(-5%, 0);
  text-shadow:0px 0px 5px black;
  transition: transform 300ms ease-in-out,
  box-shadow 300ms ease-in-out,
  border-radius 350ms ease-in-out,
  background-color 300ms ease-in-out;
  text-align: left;
}

.project:hover{
  transform: translate(5%, 0);
  border-radius: 8rem;
  box-shadow: 0px 0px 12px white;
  background-color: rgba(0, 255, 228, 25%)
}





/*Navbar element*/

#navbar a {
  margin-top: 64px;
  margin-bottom: 64px;
  padding: 12px;
  padding-right: 1rem;
  border-radius: 25px 0px 0px 25px;
  background-color: rgba(0, 255, 228, 25%);
  float: right;
  right:-1%;
  color: white;
  border-style: solid;
  text-shadow:0px 0px 1px black;
  z-index: 0;
  position: fixed;
  font-family: "JetBrains Mono";
  font-weight: bold;
  width: 5rem;
  display: block;
  transition: right 300ms ease-in-out,
  box-shadow 300ms ease-in-out,
  border-radius 350ms ease-in-out,
  background-color 300ms ease-in-out;
  border-width: 0.25%;
  border-color: white;
  text-decoration: none;
  transition: transform 300ms ease-in-out,
  box-shadow 300ms ease-in-out,
  border-radius 350ms ease-in-out,
  background-color 300ms ease-in-out;
}

#navbar a:hover{
  transform: translate(-25% );
  border-radius: 8rem;
  box-shadow: 0px 0px 12px white;
  background-color: rgba(0, 255, 228, 25%)
}

#navbar1 {
  top: 0%;
}

#navbar2 {
  top: 6%;
}

#navbar3 {
  top: 12%;
}

#navbar4 {
  top: 18%;
}

#navbar5 {
  top: 24%;
}