/** Style of all project pages  */
.flyingtododiv {

     font-family: var(--font);
     padding-bottom: 100px;
}
.epistudiosprojects {

     font-family: var(--font);
     padding-bottom: 100px;
}

/** Main Style  */
.hrcontainerprojects {
     display: flex;
     flex-direction: row;
     gap: 10px;
     align-items: center;
     width: 100%;
     margin-top: 15px;
     margin-left: 10%;
}

.onehrprojects {
     margin: 0;
     width: 3%;
     height: 2px;
     border: none;
     background-color: var(--font-color-main);
}

.twohrprojects {
     margin: 0;
     width: 80%;
     height: 2px;
     border: none;
     background-color: var(--accent-color);
}
.introproject {
     margin-top: 100px;
     text-align: center;
}
.projecttype {
     color: var(--markblue);
     margin-bottom: 20px;
}
.projectname {
     margin-top: 0px;
     margin-bottom: 0px;
     font-size: 3rem;
     font-weight: bold;
}
.projectdesc {
     opacity: 0.4;
     max-width: 50%;
     margin: 30px auto;
}


.projectsborders {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     border-top: 1px rgba(128, 128, 128, 0.348) solid;
     border-bottom: 1px rgba(128, 128, 128, 0.348) solid;
}
.case {
     border-right: 1px rgba(128, 128, 128, 0.348) solid;
     flex: 1;
     background-color: rgb(10, 16, 45);
}
.case p {
     margin-left: 15px;
}
.casetitle {
     color: var(--markblue);
}

/* *Gradient  */

.banner-gradient {
     background: linear-gradient(
          135deg,
          #2b5aed 0%,
          #3f87ff 40%,
          #47e1ff 100%
     );
     width: 100%;
     height: 100%;
     margin-bottom: 70px;
}
.banner-gradient img {
     display: block;
     margin: 0 auto;
     height: 70%;
     width: auto;
     padding-top: 30px;
     padding-bottom: 30px;
     border-radius: 100px;
}

/** Text Fomatting  */
.singletitle {
     margin-left: 10%;
     font-size: 3rem;
     margin-top: 10px;
     margin-bottom: 10px;
}
.singletext {
     max-width: 80%;
     margin-left: 10%;
     line-height: 1.5;
     font-size: 1.1rem;
     margin-top: 0px;
     color: rgb(209, 209, 209);
     margin-bottom: 30px;
}
.linebreak {
     display: block;
     margin-top: 1rem;
}


/* * Technologies  */

.techcontainer {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin-left: 10%;
     gap: 5%;
}
.langcontainer {
     display: flex;
     flex-direction: column;
     align-items: center;
}
.langcontainer img {
     height: 100px;
     width: auto;
}
.langcontainer p {
     color: rgb(209, 209, 209);
}

/** More projects  */
.projectsmoreapps {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     width: 100%;
     box-sizing: border-box;
     justify-content: space-around;
     margin-top: 100px;
}
.moreprojcontone {
     display: flex;
     flex-direction: column;
     border: 2px rgba(77, 76, 76, 0.415) solid;
     border-radius: 15px;
     width: 40%;
     padding: 50px 0px 50px 0px;
     background-color: rgba(35, 35, 35, 0.442);
     box-shadow: 1px 1px 6px rgb(0,0,0,0.1);
}
.moreprojcontone * {
     margin-left: 10%;
}
.moreprojdate {
     margin-bottom: 0px;
     border-left: 3px white solid;
     padding-left: 5%;
}
.moreprojcontone div {
     margin-left: 10%;
     border-left: 3px rgba(77, 76, 76, 0.415) solid;
}
.moreprojtitle {
     margin: 0px;
     margin-left: 6%;
}
.moreprojcontone a {
     display: inline-block;
     text-decoration: none;
     color: rgb(209, 209, 209);
     font-weight: bold;
     font-size: 1.5rem;
     margin-top: 10%;
     margin-left: 7%;
}