/* GENERAL */
html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Raleway';
    box-sizing: border-box;
    line-height: 1.5;
}
a{
    text-decoration: none;
}

/* STORMS */
.storms{
    height: 60vh;
    overflow: hidden;

    background-image: url("/static/img/pages/storms/sun_earth.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.cdpp{
    height: 60vh;
    overflow: hidden;

    background-image: url("/static/img/pages/cdpp/SuperSun_min.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.medoc{
    height: 60vh;
    overflow: hidden;

    background-image: url("/static/img/pages/medoc/sun_colors.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.apis{
    height: 60vh;
    overflow: hidden;

    background-image: url("/static/img/pages/apis/planetes2_red.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.maser{
    height: 60vh;
    overflow: hidden;

    background-image: url("/static/img/pages/maser/sun_halloween.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.header h1{
    margin: 0;
    font-size: 12em;
    color: white;
}
.header span{
    margin: 0;
    color: white;
}
.header .title_content{
    position: relative;
    top: 15%;
    left: 2%;
    margin: 0;
    color: white;
}
.header .title_content span{
    font-size: 3em;
    text-shadow: 1px 1px 1px rgb(0 0 0 / 50%);
}

/* STORMS CONTENT */

.f_tools{
    margin: 20px 0;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

}
.f_tool{
    min-width: 350px;
    /* border-right: 1px solid black;
    border-bottom: 1px solid black; */
}
.f_tool h2{
    text-align: center;
}

.content_storms > h2, .content_cdpp > h2, .content_medoc > h2, .content_maser > h2, .content_apis > h2{
    text-align: center;
    color: rgb(0, 157, 255);
    font-size: 4em;
}

.content_storms video, .content_storms img{
    height: 300px;
}

/* CDPP CONTENT */
.content_cdpp img{
    width: 200px;
}
.content_cdpp .f_tool{
    min-width: 100px;
    margin: 5px;
}

/* MASER CONTENT */
.content_maser .f_tool{
    width: 200px;
}

/* ALL CONTENT */
.content_text{
    width: 80%;
    margin: auto;
}





/************** MEDIA QUERIES ****************/
@media (min-width: 1500px){
    .f_tools{
        width: 1500px;
        margin: auto;
    }
    .content_text{
        width: 60%;
        margin: auto;
    }
}

@media (max-width: 800px){
    .header {
        height: 50vh;
    }
    .header h1 {
        font-size: 8em;
    }
    .header .title_content span {
        font-size: 2em;
    }
}

/* SPECIAL NEEDS FOR VIDEO & IMG */
@media (max-width: 650px){
    .content_storms video, .content_storms img{
        height: auto;
        width: 100%;
    }
    .content_text{
        width: 95%;
        margin: auto;
    }
}


/* SMARTPHONES & TABLETS */
@media (max-width: 550px){

    nav{
        height: 50px;
        font-size: small;
    }

    .header {
        height: 30vh;
    }
    .header h1 {
        font-size: 4em;
    }
    .header .title_content span{
        font-size: 1em;
    }

    .content_storms > h2, .content_cdpp > h2, .content_medoc > h2, .content_apis > h2, .content_maser > h2 {
        font-size: x-large;
    }
    .f_tool h2 {
        font-size: large;
    }
}