@font-face {
  font-family: MadimiOne;
  src: url(../font/MadimiOne-Regular.ttf);
}

@font-face {
  font-family: Whisper;
  src: url(../font/Whisper-Regular.ttf);
}

:root {
  --main: #1e90ff;
  --unsel: #333;
  --sel: #1e90ff;
  --bg: #fff;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: MadimiOne;
  background: var(--bg);
  padding: 0;
  margin: 0;
}

/* Navbar */

.nav {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}

.navigation {
  display: flex;
  justify-content: space-between;
  width: 1440px;
}

/* Logo */

.logo {
  font-family: Whisper;
  font-size: 4rem;
  margin: auto 20px;
}

.logo a {
  text-decoration: none;
  color: var(--unsel);
  transition: color ease 0.2s;
}

.logo a:hover {
  color: var(--sel);
}

/* Nav buttons */

.navbar {
  display: flex;
  list-style: none;
  font-size: 2rem;
  margin: auto 20px;
}

.navbar a {
  text-decoration: none;
  color: var(--unsel);
  margin-left: 40px;
  transition: color ease 0.2s;
}

.navbar a:hover .fa-regular {
  color: var(--sel);
  transform: translateY(-5px);
}

.navbar a:hover {
  color: var(--sel);
}

/* Icons */

.fa-regular {
  color: var(--unsel);
  margin-right: 5px;
  transition: ease 0.2s;
}

/* Main */

.content {
  padding: 200px 0 80px 0;
}

/* About */

.about {
  width: 1440px;
}

.about h1 {
  font-size: 5rem;
  padding: 20px;
}

.about p {
  font-size: 2rem;
  padding: 30px;
}

.project-text {
  color: var(--sel);
  text-decoration: none;
  transition: color ease 0.2s;
}

.project-text:hover {
  color: #1a75c1;
}

/* Info */

.terminal {
  height: 40px;
  background: #e1dfe1;
  border-radius: 15px 15px 0 0;
}

.circle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50px;
}

.red {
  margin: -622px 10px;
  background: #ff605c;
}

.yellow {
  margin: -622px 40px;
  background: #ffbd44;
}

.green {
  margin: -622px 70px;
  background: #00ca4e;
}

.infoboard {
  margin-top: 40px;
  padding: 10px 0 10px 0;
  width: 1440px;
  background: #1a2b4c;
  font-size: 2rem;
  border-radius: 0 0 10px 10px;
}

.infoboard p {
  margin-left: 40px;
  color: #fff;
}

.infoboard .text {
  color: #87e8de;
}

.infoboard a {
  color: #ff7f50;
  text-decoration: none;
  transition: color ease 0.2s;
}

.infoboard a:hover {
  color: #cc5a31;
}

/* Projects */

.projects {
  padding-top: 600px;
  font-size: 3rem;
}

.project-main {
  /* background: #f00; */
}

.projects-main {
  width: 1440px;
  border-radius: 500px 5px 5px 5px;
}

.project1 {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  transition: ease 0.3s;
  border-radius: 500px 5px 5px 5px;
  background: #d4d4d4;
  margin-top: 40px;

}

.project1:hover {
  cursor: pointer;
  background: var(--sel);
}

.project1:hover body {
  background: var(--main);
}

.project1:hover h1 {
  color: var(--bg);
}

.project1:hover p {
  color: var(--bg);
}

.project1:hover img {
  transform: scale(1.1) translate(-10px, 10px) rotate(-1deg);
}

.project1 h1 {
  font-size: 3rem;
  padding: 20px;
  align-content: center;
  transition: ease 0.3s;
  color: var(--unsel);
}

.project1 p {
  font-size: 1.3rem;
  padding: 30px;
  align-content: center;
  transition: ease 0.3s;
  color: var(--unsel);
}

.project1 img {
  justify-content: end;
  width: 432px;
  aspect-ratio: 16/9;
  transition: ease 0.3s;
}

.line {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -40px);
  width: 120px;
  height: 10px;
  background: var(--main);
}

/* Contact */

.contact {
  font-size: 3rem;
}

.contact-info {
  background: var(--bg);
}

.contact-text {
  text-align: center;
  font-size: 2rem;
}

.mail {
  color: var(--unsel);
  text-decoration: none;
  transition: color ease 0.2s;
}

.mail:hover {
  color: var(--sel);
}

.footer {
  padding: 20px;
  font-size: 1.2rem;
}