/* =========================
   RESET
========================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* =========================
   BODY
========================= */

body{
  background:#fafafa;
  font-family:Arial, Helvetica, sans-serif;
  color:white;
  display:flex;
  justify-content:center;
  padding:30px;
}

/* =========================
   MAIN CONTAINER
========================= */

.container{
    width:1000px;

    background:#ffffff;

    border-radius:50px;

    padding:30px;

    box-shadow:0 0 300px rgba(0,0,0,0.6);
}

/* =========================
   HEADER
========================= */

header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:40px;
}

.logo{
    font-size:32px;
    font-weight:bold;

    color:#000000;
}

nav a{
    text-decoration:none;

    color:rgb(0, 0, 0);

    margin-left:25px;

    transition:0.3s;
}

nav a:hover{
    color:#af1919;
}

/* =========================
   NAVIGATION
========================= */

nav{
  display:flex;
  gap:60px;
}

nav a{
  text-decoration:none;
  font-size:28px;
  font-weight:bold;
}

.courses{
  color:#000000;
}

.contact{
  color:#030303;
}

/* =========================
   MAIN SECTION
========================= */

.content{
  display:flex;
  gap:40px;
  margin-bottom:40px;
}

/* =========================
   PROFILE BLOCK
========================= */

.profile{
    width:300px;
    height:450px;

    border-radius:1px;

    overflow:hidden;
}

.profile img{
    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center 0%;

    display:block;
}
/* =========================
   PROJECTS
========================= */

.projects{
  flex:1.2;

  display:flex;
  flex-direction:column;
  gap:30px;
}

.project{
  height:120px;
  padding:25px 40px;

  font-size:28px;
  font-weight:bold;
  transition:0.3s;
}

.project:hover{
    transform:translateY(-5px);
}

/* PROJECT 1 */

.project1{
  border:5px solid;
  border-image:linear-gradient(to right,#52fff3,#d9ff00) 1;
  color:#ff4d6d;
}

/* PROJECT 2 */

.project2{
  border:5px solid;
  border-image:linear-gradient(to right,#d9ff00,#a7ff00) 1;
  color:#52b6ff;
}

/* PROJECT 3 */

.project3{
  border:5px solid;
  border-image:linear-gradient(to right,#ff00ff,#ff4d4d) 1;
  color:#ff5b5b;

  height:150px;
}

/* =========================
   MAIN CONTENT
========================= */

.main-content{
    background:#36273a;

    border-radius:1px;

    padding:100px;

    margin-top:30px;

    box-shadow:0 0 20px rgba(0,0,0,0.4);
}

.main-text{
    width:100%;
}

.main-text h2{
    color:#dfe7ec;

    font-size:20px;

    margin-bottom:15px;
}

/* =========================
   FOOTER
========================= */

footer{
  border:5px solid;
  border-image:linear-gradient(
    to right,
    #39ff14,
    #d9ff00,
    #4db8ff
  ) 1;

  display:flex;
  justify-content:space-around;

  padding:20px;

  font-size:32px;
  font-weight:bold;
}

.footer-left{
  color:#ff3d6e;
}

.footer-center{
  color:#b14dff;
}

.footer-right{
  color:#4db8ff;
}

/* =========================
   RESPONSIVE DESIGN
========================= */

@media(max-width:900px){

  .content{
    flex-direction:column;
  }

  header{
    flex-direction:column;
    gap:20px;
  }

  nav{
    gap:25px;
  }

  footer{
    flex-direction:column;
    align-items:center;
    gap:15px;
  }

}

.main-text p{
    color:#d4dde2;
  font-size:15px;
  line-height:1;
  margin-bottom:15px;
}