/****************************************/
/* GENERAL STYLING */
/****************************************/


@import url("https://fonts.googleapis.com/css?family=Muli:300,300i,400,400i,600,600i,700,700i,800,800i,900&display=swap");
/* Normal desktop :1200px. */
/* Normal desktop :992px. */
/* Tablet desktop :768px. */
/* small mobile :320px. */
/* Large Mobile :480px. */
/* 1. Theme default css */
@import url("https://fonts.googleapis.com/css?family=Muli:300,300i,400,400i,600,600i,700,700i,800,800i,900&display=swap");


@font-face {
    font-family: 'Raleway';
    src: url('../Raleway/static/Raleway-Regular.ttf') format('truetype');
  }

body{ 
    /* font-family: 'Raleway'; */
    font-family: "Muli";
    /* background-color: #150b13; */
    
    margin: 0;
}

/****************************************/
/* HEADER */
header {background-image: url(../photos/banner.png);     background-repeat: no-repeat;
  background-size: cover;}
header              {  z-index: 10; top: 0; left: 0; width: 100%;position: fixed;padding: 10px;  }
header nav          { display: flex; justify-content: space-between; align-items: center;}
header nav ul       { display: flex;margin-inline-end: 30px; }
header nav ul li    { margin: 0px 15px; list-style: none;}
header nav>a img    { height: 70px; margin-left: 30px; }
header nav>a img:hover{background-image: url("../photos/logowhitename.svg"); height: 70px;}
header a            { font-family:'Muli'; font-size: 25px; color: white; transition: all 400ms ease; cursor: pointer; }
header a:hover      { color:#fc8c15;text-decoration: none; }
/* ************************************ */
/* MAIN INDEX */

.info{
 
  display: flex;
  margin-top: 110px;
  justify-content: center;
  
  align-content: center;
  flex-wrap: nowrap;
  margin-left: 30px;
  margin-right: 30px;
}
.Maintext{
  margin-top: 150px;
  font-size: 60px;
  text-align: center;
  color: azure;
  margin-bottom: 10px;
}
.myphoto{
  max-width: 600px;
  max-height: 600px;
}
.mainphoto{
  max-width: 130px;
  max-height: 130px;
  padding-top: 10px;
}
.subjects{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 25px;
}
.subjects1{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 25px;
  margin-top: 25px;
  text-align: right;
}
.subjects1 h1{
  font-size: 40px;
  color: white; 
  font-family:'Raleway';
  cursor: pointer;
  transition: all 400ms ease; 
  text-decoration: none;
}
.subjects1 h1:hover{
  color: #513b2e;
}
.subjects1 p{
  font-size: 16px;
  color: white; 
  font-family:'Raleway';
  align-items: center;
}
.subjects h1{
  font-size: 40px;
  color: white; 
  font-family:'Raleway';
  cursor: pointer;
  transition: all 400ms ease; 
  text-decoration: none;
}
.subjects h1:hover{
color:rgb(255, 132, 0);
}

.subjects p{
  font-size: 16px;
  color: white; 
  font-family:'Raleway';
  align-items: center;
}
a{
  text-decoration: none;
}
.line{
  border: 0;
  margin-left: 100px;
  margin-right: 100px;
  border-top: 1px solid rgba(240, 255, 255, 0.899);
}
.USD{
  width: 50%;
}
.MP{
  width: 50%;
}
.FED{
  width: 50%;
}
/* ABOUT ME */
.text2 h1{
  font-size: 90px;
  text-align: center;
  color: azure;
  margin-top: 130px;
  margin-bottom: 30px;
}
.me{
  width: auto;
  height: 400px;
}
.boxbg{
    background-color: white;
    padding: 40px 80px 30px 100px;
    display: grid;
    align-items: center;
    column-gap: 120px;
    grid-template-columns: auto auto;
}
.box-text {
  font-size: 24px;
  text-align: center;
  color: black;
}

.skill-text h2{
  font-size: 50px;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 700;
  
}
.skills{
  text-align: center;
  color: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
  justify-items: center;

}
.design h1{
  font-size: 28px;
  display: flex;
  justify-content:center;
  align-items: center;
  padding-bottom: 30px;
}
.design p{
  font-size: 24px;
  display: flex;
  justify-content:flex-start;
  align-items: center;
  color: black;
}

.iconskill{
  max-width: 55px;
  max-height: 130px;
  margin-right: 10px;
}

.goal-text h2{
  font-size: 37px;
  color: azure;
  text-align: center;
  max-width: 450px;
}
.goal-text{
  padding: 20px;
  font-size: 22px;
  text-align: center;
  background-color: #150b13;
  color: #f0ffff;
  max-width: 450px;
}
.positionicon{
  padding-top: 20px;
}
.icon{
  height: 50px;
  width: 50px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.icon:hover {
  transform: scale(1.4) translate3d(0, 0, 0);
  transition: all 0.3s ease-in-out;
}
/* ************************ */

/* FOOTER */
footer {
  background-image: url(../photos/banner.png);
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  color: white;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
  justify-items: center;
}
.line{
  border: 0;
  margin-left: 100px;
  margin-right: 100px;
  border-top: 1px solid rgba(240, 255, 255, 0.899);
}
.Alicjamail{
  height: 30px;
  width: 30px;
  padding-right: 10px;
  box-sizing: content-box;
}
.contactme p{
  margin: 0;
 padding-top: 5px;
}
.contactme{
  display: grid;
  align-items: center;
  color: white;
  grid-template-columns: auto;
  align-items: center;
  column-gap: 10px;
  padding-bottom: 10px;
  justify-content: center;
}

.contactme a{
  color: white;
  padding-top: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contactme a:hover{
  color:rgb(252, 140, 21);;
  text-decoration: none;
}
.logofooter{
  height: 80px;
}
.logofooter:hover{
  background-image: url("../photos/logowhitename.svg");
  height: 80px;

}
.portfoliofooter{
  display: grid;
  align-items: center;
  align-content: center;
}
.portfoliofooter p{
  margin:0;
}


/* ************************ */
/* SUBJECT WINDOWS UCD,MP,FED */
.line1{
  border: 0;
  border-top: 1px solid rgba(240, 255, 255, 0.899);
}

.topic h1{
  font-size: 40px;
  color: white; 
  font-family:'Raleway';
  align-items: center;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
}
.subjectsgrid{
    padding: 10px;
    justify-items: center;
}
.challenge{
  padding: 10px;
  text-align: center;
}
.challenge h2{
  font-size: 20px;
  color: white; 
  font-family:'Raleway';
}
.challenge h2{
  font-size: 20px;
  color: white; 
  position: relative;
  display: inline-block;
  font-family:'Raleway';
}
.challenge h2::after{
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -5px ;
  left: 0;
  background-color: #f0ffff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.challenge h2:hover::after{
  transform: scaleX(1);
  transform-origin: bottom left;
}

.TopicOfTask{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.TopicOfTask h1{
  font-size: 40px;
  color: white;  
  transition: all 400ms ease; 
  text-decoration: none;
  font-family:'Raleway';
  text-transform: uppercase;
}
.TopicOfTask h1:hover{
  color: #513b2e;
}

.skip{
  color: white;
  text-align: center;
  font-size: 65px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: all 400ms ease; 
  text-decoration: none;
}
.skip:hover{
  color: #513b2e;
}


/********* PROJECT **********/
.Project{
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(3, 1fr);
  padding: 60px 30px 30px 30px;
  justify-content: space-evenly;
}
.myworkandprojects h1{
  font-size: 50px;
  margin-top: 140px;
  align-items: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #001D38;
}
.frame{
  margin-top: 50px;
}
.Project p{
  color: white;
  font-size: 17px;
}
.Project a:hover{
  color: #513b2e;
}

.Project h1{
  color: white;
  font-size: 35px;
}



.colourlogo{
  max-width: 400px;
  max-height: 250px;
}
.head h2{
  margin-top: 130px;
  display: grid;
  justify-content: center;
  color: white;
  font-size: 55px;
  align-items: center;
}
.head a{
  display: grid;
  justify-content: center;
  color: white;
  font-size: 25px;
  align-items: center;
}
.head a:hover{
  color: #513b2e;
}
.img{
  justify-content: center;
  align-items: center;
  background-image: url("../photos/project/back.png");
  background-size: cover;
  min-height: 400px;
  min-width: 400px;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  color: white;
  font-size: 25px;
}
a{
  color: white;
}

/* WEBSITE */
.skills2{
  font-size: 16px;
  color: black;
}
.skills2 ul, li{
  font-weight: 300;
  font-size: 16px;
}
.skills2 p{
  margin: 0;
}
.webgrid{
  display: grid;
  grid-template-columns: 50% 50%;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 25px;
  margin-right: 100px;
  margin-left: 100px;
  justify-items: center;
}

.computer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 450px;
  height: 450px;
  overflow: hidden;
  
}

.computer1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 450px;
  height: 450px;
  overflow: hidden;
  
}


.computerBorder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  height: 350px;
  overflow: hidden;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.2));
}

video {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 94%;
  /* Put this value too  */
  z-index: -1;
}

.website h1{
  font-size: 50px;
  font-weight: 700;
}
.website{
  margin-top: 150px;
    padding-bottom: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    z-index: -1;
}
.website .about_large_title {
  font-weight: 800;
  color: #F5F6F7;
  font-size: 235px;
  position: absolute;
  left: 21%;
  top: 0;
}
/* Figma */
.Figma h1{
font-weight: 700;
  font-size: 50px;
  
}
.Figma{
  margin-top: 150px;
    padding-bottom: 20px;
    position: relative;
    display: flex;
    justify-content: center;
    z-index: -1;
}
.Figma .about_large_title {
  font-weight: 800;
  color: #F5F6F7;
  font-size: 235px;
  position: absolute;
  left: 06%;
  top: 0;
}
.Dreamzz{
  min-height: 450px;

}

.Figmagrid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  
}
/* Design */
.artphoto{
  height: 400px;
  padding-left: 10px;
  padding-right: 10px;
}
.artphoto1{
  height: 400px;
  padding-left: 10px;
  padding-right: 10px;
}
.artgallery{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}