/* ===============================
   Author: {Marina}
   Date:   {August 2026}
   
   Notes:
   Hand coded for Build a Website
   from Scratch with HTML & CSS
   by Marina VFX
   
   Colour Palette:
   ---------------
   Void:		         #070912
   Deep Space:			#11172A
   Field Blue:			#19243D
   Starlight:			#F1EEE5
   Cosmic Dust:      #9299AA
   Marina Gold:      #E3CB73
   Stellar Gold:     #F1DFA0
   Quantum Violet:   #685B88
   =============================== */
/* Fonts */
@font-face {
  font-family: 'Cormorant';
  src: url('../fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'PlexMono';
  src: url('../fonts/IBMPlexMono-ExtraLight.ttf') format('truetype');
}
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype');
}
/* General */
body {
   background: #070912;
   color:#F1EEE5;
   font-size: 12px;
}
.container {
   width: 1280px;
   margin: 0 auto;
   /*padding: 30px 24px;*/
   /*background: #685B88;*/
}
html {
   scroll-behavior: smooth;
}

/* Typography */
h1, h2, h3, h4, h5, h6, p{
   margin: 0;
   font-family: 'Cormorant';
}
a:link{
   color: #F1EEE5;
}
a:visited{
   color: #F1EEE5;
}
a:hover{
   color: #E3CB73;
}
h1{
   font-size: 82px;
   text-transform: uppercase;
   color: #F1EEE5;
}
h2{
   font-size: 22px;
   color: #E3CB73;
}

/* Header */
header {
   position: relative;
   height: 84px;
   /*background: #685B88;*/
}
#header-logo{
   width: 350px;
   height: 84px;
   position: absolute;
   top: 0;
   left:0;
   background: url(../images/logo-04.png) top left no-repeat;
   background-size: auto 84px;
   text-indent: -9999px;
}
#header-logo:hover{
   width: 350px;
   height: 84px;
   position: absolute;
   top: 0;
   left:0;
   background: url(../images/logo-03.png) top left no-repeat;
   background-size: auto 84px;
}
#header-star{
   position: absolute;
   top: 21px;
   right: 20px;
}
header nav{
   text-align: center;
   position: absolute;
   top:0;
   right: 140px;
   
   font-family: 'Manrope', sans-serif;
   font-size: 13px;
   letter-spacing: 0.14em;
   font-weight: 500;
   line-height: 1;
}
header nav ul{
   margin: 0;
   padding: 0;
   list-style: none;
   display: block;
   line-height: 84px;
}
header nav ul li{
   display: inline-block;
   padding: 0 20px;
}
header nav ul li a:link{
  text-transform: uppercase;
  text-decoration: none;
}
header nav ul li a:hover{
   padding-top: 21px;
   background: url('../images/star-02.png') top center no-repeat;
   background-size: 21px;
}

/* Hero */
#hero{
   height: 720px;
   background: url(../images/hero-bg.png);
   position: relative;
}
#hero h1{
   position: absolute;
   left: 60px;
   top: 90px;
   
   font-family: 'Cormorant', serif;
   font-size: 76px;
   font-weight: 500px;
   line-height: 0.95;
   letter-spacing: 0.06em;
}
#hero h2{
   position: absolute;
   left: 60px;
   top: 350px;
   
   font-family: 'Cormorant', serif;
   font-size: 28px;
   font-style: italic;
   font-weight: 400;
   line-height: 1.2;
   letter-spacing: 0.03em;
}
#hero p{
   font-size: 17px;
   position: absolute;
   left: 60px;
   top: 390px;
   
   font-family: 'Manrope', sans-serif;
   font-size: 18px;
   font-weight: 400;
   line-height: 1.7;
   letter-spacing: 0.01em;
   color:#9299AA;
}
#hero-button{
   position: absolute;
   left: 60px;
   top: 480px;

   /*height: 54px;*/
   font-family: 'Manrope', sans-serif;
   font-weight: 500;
   padding: 20px 64px 20px 20px;
   font-size: 13px;
   border: 1px solid #F1EEE5;
   border-radius: 2px;
   text-transform: uppercase;
   text-decoration: none;
   background: url(../images/star-01.png) top right no-repeat;
   background-size: 54px;
   letter-spacing: 0.18em;
}
#hero-button:hover{
   color: #11172A;
   background: #F1EEE5 url(../images/star-01-dark.png) top right no-repeat;
   background-size: 54px;
   border: 1px solid #11172A;
}
/* Content Hub */
#content-hub{
   height: 720px;
   background: url(../images/content-bg.png) top left no-repeat;
   text-align: center;
   position: relative;
}
#content-hub h2{
   margin-top: 0;
   
   font-family: 'Cormorant', serif;
   font-size: 52px;
   font-weight: 500;
   line-height: 1.05;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #F1EEE5;

   position: relative;
   top: 100px;
   
}
#content-hub-explore{
   position: relative;
   top: 120px;
   
   font-family: 'Manrope', sans-serif;
   font-size: 11px;
   font-weight: 500;
   letter-spacing: 0.20em;
   color:#9299AA;
}
#content-hub ul{
   margin: 0;
   padding: 0;
   list-style: none;
   display: block;
   position: absolute;
   top: 250px;
   left: 169px;
} 
#content-hub ul li{
   display: inline-block;
   margin: 0 20px;
   width: 274px;
   height: 353px;
}
#portfolio{
   background: url(../images/portsolio-card.png) top left repeat;
   background-size: 274px 353px;  
}
.content-hub-item-content{
   transform: translateY(250px);
   color: #F1EEE5;
}
.content-hub-item-content a{
   color: #F1EEE5;
   text-decoration: none;
}
.content-hub-item-content a:hover{
   color: #E3CB73;
   text-decoration: none;
}
.content-hub-item-content p{
   font-size: 10px;
}
#tutorials{
   background: url(../images/tutorials-crad.png) top left repeat;
   background-size: 274px 353px;
}
#articles{
   background: url(../images/articles-card.png) top left repeat;
   background-size: 274px 353px;
}
#portfolio h3, #tutorials h3, #articles h3{
  font-family: 'Manrope', sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  
}
#portfolio p, #tutorials p, #articles p{
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color:#9299AA;
  letter-spacing: 0.08em;
  transform: translateY(5px);
}
/* Transition */
#transition{
   height: 220px;
   width: 1280px;
   background: url("../images/transition-bg-02.png") top left no-repeat;
   background-size: 1280px 220px;
   position: relative;
}
#transition h2{
   text-transform: uppercase;
   color: #F1DFA0;
   text-align: center;
   font-size: 40px;

   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 100px;
}
#transition img{
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 20px;
}

/* Featured Work */
#featured {
   height: 800px;
   background: url(../images/featured-bg.png) top left repeat;
   position: relative;
}
#featured h2{
   text-transform: uppercase;
   color: #F1DFA0;
   text-align: center;
   font-size: 50px;
   font-family: 'Cormorant', serif;
   font-weight: 500;
   line-height: 1.05;
   letter-spacing: 0.08em;
   color: #F1EEE5;

   position: absolute;
   right: 80px; 
   top: 100px;
}
#featured-description{
   position: absolute;
   right: 80px;
   top: 165px;
   
   font-family: 'Manrope', sans-serif;
   font-size: 15px;
   font-weight: 400;
   line-height: 1.6;
   color: #9299AA;
}
#featured-item-one{
   width: 600px;
   height: 400px;
   background: url(../images/featured-main-item.png);
   position: absolute;
   top: 250px;
   left: 20px;
}
#featured-item-one a{
   position: absolute;
   top:332px;
   left: 20px;
}
#featured-item-one h3{
   position: absolute;
   top:232px;
   left: 20px;
   
   font-family: 'Cormorant', serif;
   font-size: 35px;
   font-weight: 500;
   line-height: 1.1;
   letter-spacing: 0.06em;
   color: #F1EEE5;
}
#featured-item-one p{
   position: absolute;
   top: 292px;
   left: 20px;
   
   font-family: 'PlexMono', monospace;
   font-size: 12px;
   font-weight: 400;
   line-height: 1.4;
   letter-spacing: 0.12em;
   color: #9299AA;
}
#featured-item-two{
   width: 600px;
   height: 188px;
   background: url(../images/featured-secondary-item-tutorial.png);
   position: absolute;
   top: 250px;
   right: 20px;
}
#featured-item-three{
   width: 600px;
   height: 188px;
   background: url(../images/featured-secondary-item-tutorial-02.png);
   position: absolute;
   top: 462px;
   right: 20px;
}
#featured-item-two a, #featured-item-three a{
   position: absolute;
   top: 120px;
   left: 20px;
}
#featured-item-two h3, #featured-item-three h3{
   position: absolute;
   top: 40px;
   left: 20px;
   
   font-family: 'Cormorant', serif;
   font-size: 27px;
   font-weight: 500;
   line-height: 1.1;
   letter-spacing: 0.06em;
   color: #F1EEE5;
}
#featured-item-two p, #featured-item-three p{
   position: absolute;
   top: 80px;
   left: 20px;
   
   font-family: 'PlexMono', monospace;
   font-size: 12px;
   font-weight: 400;
   line-height: 1.4;
   letter-spacing: 0.12em;
   color: #9299AA;
}

#featured a{
   color: #E3CB73;
   padding: 10px 64px 10px 20px;
   
   font-family: 'Manrope', sans-serif;
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   
   border: 1px solid #F1EEE5;
   border-radius: 2px;
   text-decoration: none;
   background: url(../images/arrow_01.png) center right no-repeat;
   background-size: 54px;
   
}
#featured a:hover{
   color: #11172A;
   background: #F1EEE5 url(../images/arrow_01_dark.png) center right no-repeat;
   background-size: 54px;
   border: 1px solid #11172A;
}
/* contacts */

.contacts{
   height: 460px;
   background: url(../images/connect-bg.png) top left no-repeat;
   position: relative;
}
.contacts h2{
  font-family: 'Cormorant', serif;
   font-size: 48px;
   font-weight: 500;
   line-height: 1.05;
   letter-spacing: 0.10em;
   text-transform: uppercase;
   color:#F1EEE5;
   text-align: center;

   position: relative;
   top: 125px;

}
.contacts p{
  font-family: 'Manrope', sans-serif;
   color: #9299AA;
   font-size: 15px;
   font-weight: 400;
   line-height: 1.7;
   letter-spacing: 0.01em;
   text-align: center;

   position: relative;
   top: 150px;

}
#contact-mail{
   font-family: 'Manrope', sans-serif;
   color:#E3CB73;
   padding: 20px 64px 20px 20px;
   font-size: 18px;
   font-weight: 500;
   border: 1px solid #F1EEE5;
   border-radius: 2px;
   text-transform: uppercase;
   text-decoration: none;
   background: url(../images/star-01.png) center right no-repeat;
   background-size: 54px;
   letter-spacing: 0.18em;

   position: absolute;
   top: 275px;
   left: 50%;
   transform: translateX(-50%);
}
#contact-mail:hover {
   color: #11172A;
   background: #F1EEE5 url(../images/star-01-dark.png) center right no-repeat;
   background-size: 54px;
   border: 1px solid #11172A;
}
.contacts ul{
   margin: 0;
   padding: 0;
   list-style: none;
   display: block;
   line-height: 84px;

   position: absolute;
   top: 340px;
   left: 50%;
   transform: translateX(-50%);
}
.contacts ul li{
   display: inline-block;
   padding: 0 20px;
}
.contacts ul li a{
  font-family: 'Manrope', sans-serif';
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
   text-transform: uppercase;
   text-decoration: none;
   color: #9299AA;
}
.contacts ul li a:hover{
   color: #F1EEE5;
}

/* Footer */
.footer{
   position: relative;
}
footer ul{
   margin: 0;
   padding: 0;
   list-style: none;
   display: block;
   line-height: 84px;
   

   position: relative;
   top: 0;
   left: 60px;
}
footer ul li{
   display: inline-block;
   padding: 0 100px;
   width: 200px;
}
#footer-1{
   background: url(../images/logo-03.png) center center no-repeat;
   background-size: 200px 50px;
   text-indent: -9999px;
}
#footer-2{
   color: #9299AA;
   font-family: 'Cormorant', serif;
   font-size: 18px;
   font-style: italic;
   font-weight: 400;
   letter-spacing: 0.04em;
   text-align: center;
}
#footer-3{
   color: #9299AA;
   font-family: 'Manrope', sans-serif;
   font-size: 11px;
   font-weight: 400;
   letter-spacing: 0.08em;
   text-align: center;
}
/* Force Elements to Self Clear its Children: http://css-tricks.com/snippets/css/clear-fix/ */

.clearfix:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
	}
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */