@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,800;1,400&display=swap');

* {
 box-sizing: border-box;   
    
}


body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
   overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    width: 95%;
    margin: 0 auto;
    
    
}
/* ===============
Typography 
==================
*/
h1 {
  font-weight: 300;
font-size: 2.5rem;
   
}
.title {
    font-size: 2.5rem;
    margin-bottom: 1.5em;
}

@media (min-width:60rem ) {
    .title {
        font-size: 4.5rem;
    }
    
}
    
    
/* buttons */


.button {
    display: inline-block;
    font-size: 1.2rem;
    text-decoration: none;
    text-transform: uppercase;
    border-width: 3px;
    border-style: solid;
    padding: 1.0% 1.0%;
    transition: 0.2s;
}

.button-accent {
    color: #0546bc;
    border-color: #0546bc;
}

.button-accent:hover,
.button-accent:focus {
            border-color: #0652DD;
            color: #0652DD;
}

@media (min-width: 60rem) {
    .button {
        font-size: 1.5rem;
        margin-right: 4rem;
    }
    
    
    
}

/* ===============
Header 
==================
*/


header {
    position: absolute;
    margin: 1em;
    right: 0;
    left: 0;

}


nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

nav li {
    display: inline-block;
    margin: 1.0em;
}

nav a {
    font-weight: 900;
    text-decoration: none;
    text-transform: uppercase;
    font-size: .9rem;
    padding: .5em;
    color: #FFF;
    transition: 0.2s;
}

nav a:hover,
nav a:focus {
        color: #ddd;
        }

@media (min-width: 60rem) {
    nav a {
        font-size: 1.5rem;
        
    }
    
    
}
    
/* ===============
Home-Hero
==================
*/


.home-hero {
    background-image: url(../img/Colorful3.jpg);
    background-size: cover;
    background-position: center;
    padding: 10em 0;
    
}

@media (min-width: 60rem) {
    .home-hero{
    height: 100vh;
    padding-top: 33vh;  
    }
    }

/* ===============
What-We-Do
==================
*/
.what-we-do {
    background-image: url(../img/What-We-do-About.jpg);
    width: 100vw;
     margin-left: -2.7%;
    padding: 3em;
    background-size: cover;
    background-position: center;
    font-weight: 500;
}
.what-we-do-textbox {
       color: white;
        font-size: 1.1rem;
        top: .3em;
}

.what-we-do-textbox h1 {
                color: white;
                }

.youtube-logo1 {
        max-width: 15%;
        left: 50%;
    
}

.analytics-logo1 {
             max-width: 15%;
           
}

.map-logo1 {
        max-width: 15%;
    
}

.videocam-logo-1 {
         max-width: 15%;
}

@media (min-width: 60rem) {
    .what-we-do-iconstext {
            font-size: 1.4rem;
                    }
    .youtube-logo1 {
        width: 11%;
       
    }
    
    .analytics-logo1 {
             width: 11%;
            
}

    .map-logo1 {
        width: 11%;
    
}
    
.videocam-logo-1 {
         width: 11%;
}

}
.youtube-logo-text {
    outline: 2px solid #0546bc;
    
}
.what-we-do-iconstext {
    color: white;
    
}
.featured-par-2 {
        outline: 2px solid #0546bc;
    
}

.featured-par-3 {
     outline: 2px solid #0546bc;
    
}

.featured-par-4 {
     outline: 2px solid #0546bc;
    
}

/* ===============
Home-About-Section
==================
*/
.Home-About-Section {
    background-image: url(../img/Colorful1.jpg);
    width: 100vw;
     background-size: cover;
    background-position: center;
    padding: 0.1em;
   }

@media (min-width: 1000px) {
    .Home-About-Section {
        height: 100vw;
        font-size: 140%;
        width: 100vw;
    }
    
    
}

.home-about-h1 {
  font-size: 300%;
}
.home-about-par {
    font-size: 160%;
    margin-left: 25%;
    margin-right: 25%;
   outline:4px solid #0546bc;
    color: white;
    font-weight: 500;
    
}
.subscribe-button {
    
}
@media (max-width: 655px) {
    .home-about-par {
            font-size: 150%;
             margin-left: 15%;
    margin-right: 15%;
    }
}
 @media (max-width: 481px) {
    .home-about-par {
            font-size: 130%;
             margin-left: 15%;
    margin-right: 15%;
    }
}
.email-mail {
    text-decoration: none;
    color: lightgreen;
    }

@media (width: 1249px) {
    .image14 {
          
    }
    
    
}
.image14 {
}
@media (max-width: 1248px) {
    .image14 {
          width: 0%;
        
    }
}
    
    

    
/* ===============
Footer
==================
*/ 
.footer{
    padding: 0;
    margin: 0;
    background-image: url(../img/Colorful3.jpg);
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    font-size: 16px;
    font-weight: 500;
    padding: 55px 50px;
     border-style: inset;
            border-width: 2px;
            border-color:#0546bc;
}
.footer .footer-left,
.footer .footer-center,
.footer .footer-right{
    display: inline-block;
    vertical-align: top;
    }
.footer h3{
    color: white;
    font-size:36px;
    margin: 0;
    font-weight: 400;
}
.footer h3 span{
    color: #0546bc;
    
}

.footer .footer-links{
    color: white;
    margin:20px 0 12px;
    padding: 0;
    
}

.footer .footer-links a{
    display: inline-block;
    line-height: 1.2;
    font-weight: 400;
    text-decoration: none;
    color: white;
    margin-right: 8px;
    
    
}

.footer .footer-company{
    color: white;
    font-size: 12px;
    font-weight: normal;
    margin: 0;
    }

.footer .footer-center{
    width: 35%;
    }

.footer .footer-center a{
   width: 36px;
    height: 36px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 0px 5px;
    vertical-align: middle;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    color: black;
    transition: 0.2s;
}
.footer .footer-center a:hover {
    color: #0d0d0d;
    transition: 0.2s;
}
.footer .footer-center p span{
    display: block;
    font-weight: normal;
    font-size: 14px;
    line-height: 2;
    }

.footer .footer-links a:before{
    content: "|";
    font-weight: normal;
    font-size: 20px;
    color: white;
    display: inline-block;
    padding-right: 5px;
    left: 0;
    transition: 0.2s;
    }

.footer .footer-links a:hover {
    color: #ddd;
    
}
.footer .footer-links .link1:before {
    content: none;
    
}
.footer .footer-right{
    width: 20%;
    
}
.footer .footer-company-about{
    line-height: 20px;
    color: white;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    }

.footer .footer-company-about span{
    display: block;
    color: white;
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 20px;
    
}
.footer .footer-social{
    margin-top: 25px;
    }

.footer .footer-social a{
    display: inline-block;
    width: 36px;
    height: 36px;
    }

/* Responsive Code */
@media (max-width: 880px){
    .footer{
        font-size: 14px;
        }
    .footer .footer-left,
    .footer .footer-center,
    .footer .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
        }
    .footer .footer-center{
        margin-left:0;
        } }
/* ===============
Blogs Page
==================
*/

/* ===============
YouTube Page
==================
*/


.home-hero1 {
    background-image: url(../img/YouTube-New-Setup.jpg);
    background-size: cover;
    background-position: center;
    padding: 10em 0;
    
}
@media (min-width: 60rem) {
    .home-hero1{
    height: 100vh;
    padding-top: 33vh;  
    }
    }
.youtube-title {
    font-size: 3.5rem;
    margin-bottom: 1.5em;
    color: black;
    font-weight:400;
    margin-right: 5%;
    margin-top: 0%;
    transition: 0.2s;
    color: black;

}

.youtube-title:hover {
     color: transparent;
  transition: 900ms ease;
    cursor: pointer;
}
.youtube-intro-button {
    border-color: white;
    color: white;
    transition: 0.2s;
    font-size: 220%;
}
.YouTube-Section-2 {
background-image: url(../img/skylineforyoutubesection.jpg);
width: 100vw;
padding: 3em;
background-size: cover;
background-position: center;
font-weight: 500;

}

.youtube-text-1 {
    background-color: white;
    opacity:0.9;
    color: black;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    font-size: 150%;
    
}
.youtube-body-link {
    text-decoration: none;
    color: lime;
    font-weight: bold;
    transition: 0.2s;
}
.youtube-body-link:hover {
    color: #00f200;
    
}
.youtube-text-2 {
      background-color: white;
    opacity:0.9;
    color: black;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    font-size: 150%;
    
}
.youtube-text-3 {
 background-color: white;
    opacity:0.9;
    color: black;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    font-size: 150%;
}
.youtube-text-4 {
    background-color: white;
    opacity:0.9;
    color: black;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    font-size: 150%;
    
}
.hightechanalytics {
    width: 30%;
    top: 
}
.h2-youtube-sec1 {
    transition: 0.2s;
    cursor: pointer;
    }
.h2-youtube-sec1:hover {
    color:  #534141;
    transition: 0.2s;
    cursor: pointer;
}
@media (min-width: 280px) {
    .youtube-text1 {
        font-size: 50%;
        margin: 0;
    }
    .h2-youtube-sec1 {
        font-size: 70%;
    }
    .YouTube-Section-2 {
        width: 100%;
        height: 100%;
    }
    
}
@media (max-width: 744px) {
    .youtube-text1 {
        font-size: 50%;
    }
    .h2-youtube-sec1 {
        font-size: 70%;
    }
    .YouTube-Section-2 {
        width: 100%;
        height: 100%;
    }
    
}
@media (min-width: 755px) {
    .h2-youtube-sec1 {
        font-size: 110%;
    }
    .youtube-text1 {
        font-size: 100%;
    }
}
@media (max-width: 2309px) {
    .h2-youtube-sec1 {
        font-size: 110%;
    }
    .youtube-text1 {
        font-size: 100%;
    }
}
@media (min-width: 2309px) {
.YouTube-Section-2 {
background-image: url(../img/skylineforyoutubesection.jpg);
width: 100vw;
padding: 3em;
background-size: cover;
background-position: center;
font-weight: 500;
height: 93vw;
}

.youtube-text-1 {
    background-color: white;
    opacity:0.9;
    color: black;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    font-size: 150%;
    
}
.youtube-body-link {
    text-decoration: none;
    color: lime;
    font-weight: bold;
    transition: 0.2s;
}
.youtube-body-link:hover {
    color: #00f200;
    
}
.youtube-text-2 {
      background-color: white;
    opacity:0.9;
    color: black;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    font-size: 150%;
    
}
.youtube-text-3 {
 background-color: white;
    opacity:0.9;
    color: black;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    font-size: 150%;
}
.youtube-text-4 {
    background-color: white;
    opacity:0.9;
    color: black;
    text-align: center;
    margin-left: 25%;
    margin-right: 25%;
    font-size: 150%;
    
    }
}

    .youtube-section-videos{
         background-image: url(../img/Analytics-Tech-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 10em 0;
    }
@media (max-width: 690px) {
    .youtube-section-videos {
        display: none;
    }
    
}
/* ===============
Studio Page
==================
*/
.studio-hero-home {
     background-image: url(../img/NightclubimageStudio.jpg);
    background-size: cover;
    background-position: center;
    padding: 10em 0;
    }

.studio-h1-title span{
    color: black;
    background-color: white;
    opacity: 0.8;
    }
.studio-sec-par span {
     color: black;
    background-color: white;
    opacity: 0.8;
    font-size: 180%;
    }
.studio-section-2 {
    background-image: url(../img/cyber-studio-img.jpg);
    background-size: cover;
    background-position: center;
    padding: 10em 0;
    width: 100vw;
    height: 51vw;
    }
.studio-location-text {
    font-weight: 500;
    font-size: 280%;
    transition: 0.2s;
}
.studio-location-text:hover {
    color: #242121;
    
}
.studio-location-par {
    font-size: 130%;
    font-weight: 600;
    transition: 0.2s;
}

.studio-location-par:hover {
    color: #242121;
    
}
@media (max-width: 867px) {
    .studio-h1-title span {
    font-size: 80%; }
    .studio-sec-par span {
        font-size: 110%; }
    .studio-location-text {
        font-size:160%;}
    .studio-location-par {
        font-size: 80%;
    }
    }
.studio-section-3 {
    background: url(../img/futuristicearthimage.jpg);
     background-size: cover;
    background-position: center;
    padding: 10em 0;
}
.studio-section-3-h2 {
    font-size: 400%;
}
.studio-section-3-p {
    font-size: 150%;
    margin-left: 25%;
    margin-right: 25%;
    background-color: white;
    opacity: 0.9;
}
/* ===============
Map Page
==================
*/
.map-section-title {
      background: url(../img/MinecraftHome.png);
     background-size: cover;
    background-position: center;
    padding: 10em 0;
    }
.map-title {
    text-align: center;
    margin-top: 10%;
}
.map-header-par  {
    font-size: 150%;
    color: white;
    margin-left: 25%;
    margin-right: 25%;
     border-style: solid;
            border-width: 1px;
            border-color:#0546bc;
}
@media (max-width: 445px) {
    .map-header-par {
        font-size: 110%; } }

.map-section-2 {
     background: url(../img/Minecraftwebsiteimg1.jpg);
     background-size: cover;
    background-position: center;
    padding: 10em 0;
    }
.map-section-2-h2 {
font-size: 300%;
    margin-top: 5%;
}
.map-section-2-p {
    font-size: 180%;
    background-color: white;
    opacity: 0.9;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 5%;
}
@media (max-width: 541px) {
    .map-section-2-p {
        font-size: 130%;
    }
}
.map-section-3 {
     background: url(../img/minecraftimgweb5.jpg);
     background-size: cover;
    background-position: center;
    padding: 10em 0;
}
.map-section-3-h2 {
    font-size: 250%;
    color: white;
    transition: 0.2s;
}
.map-section-3-h2:hover {
   color: #ddd;
    cursor: pointer;
}
.map-section-3-p {
    color: white;
    font-size: 140%;
    margin-left: 25%;
    margin-right: 25%;
     border-style: solid;
            border-width: 1px;
            border-color:#0546bc;
}
.map-download-button {
    float: right;
    font-size: 200%;
}
.modpack-download-button {
    float: left;
    margin-left: 5%;
    font-size: 200%;
}
.youtube-video-map {

}
@media (max-width: 579px) {
    .youtube-video-map {
        display: none;
    }
    }
/* ===============
About Page
==================
*/
.about-section {
     background: url(../img/Cityskyline2.jpg);
     background-size: cover;
    background-position: center;
    padding: 10em 0;
}
.cybernetic-about-email {
    text-decoration: none;
    color: black;
}
.about-section-par {
    background-color: white;
    font-size: 160%;
    margin-left: 25%;
    margin-right: 25%;
}
@media (max-width: 615px) {
    .about-section-par {
        font-size: 120%;
    } }
@media (max-width: 942px) {
    .about-section-par {
        margin: 0;
        font-size: 100%;
    }
}