/*
color palette:
    main hue: 220°
    main backgroound color:      rgb(76, 131, 239)
    secondary background color : rgb(7, 71, 198)
    main text color:             rgb(255, 255, 255)
    link text color:             rgb(58, 82, 216)
*/

/* old css style */

.div_header {

    color: rgb(255, 255, 255);
    margin-left: 20%;
    margin-right: 20%;
    background-color: rgb(76, 131, 239);
}

.div_header_link {

    color: rgb(255, 255, 255);
    text-decoration: none;
}


.div_main_text {

    color: rgb(255, 255, 255); 
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 5%;
    text-align: justify;
}
   

.list_header {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* new css style */

h1 {
    font-size: 300%;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 0%;
    margin-right: 0%;
}

h3 {font-size: 150%;}

p {font-size: 130%;}

body {font-family: Arial, Helvetica, sans-serif;}

.nolink {text-decoration: none;}

.link_wh:hover {color: rgb(255, 255, 255);}

.nolist {list-style-type: none;}

.nomargin {margin: 0px;}

.nopadding {padding: 0px;}

.dp_il {display: inline;}

.dp_ilb {display: inline-block; height: 28px;}

.dp_b {display: block; height: 28px;}

.font {font-family: Arial, Helvetica, sans-serif;}

.c_white {color: rgb(255, 255, 255);}

.c_blue {color: rgb(58, 82, 216);}

.c_light_blue {color: rgb(137, 155, 255);}

.fs_main {font-size: 150%;}

.fs_big {font-size: 400%;}

.fs_bold {font-weight: bold;}

.center {text-align: center;}

.justify {text-align: justify;}

.left {float: left;}

.right {float: right;}

.logo {width: 28px;}

.logo_big {width: 120px;}

.header {
    color: rgb(255, 255, 255);
    padding-left: calc(-30px + 10vw);
    padding-right: calc(-30px + 10vw);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: calc(10px + 10vw);
    margin-right: calc(10px + 10vw);
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 5px ;
    background-color: #042147;
    border-top: 0px;
    border-bottom: 0px;
}

.footer {
    background-color: rgb(76, 131, 239);
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: 20%;
    margin-right: 20%;
}

.background {
    background-image: url("/media/background2.png");
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    background-attachment: fixed;
}

.img {
    width: 60%;
    height: 60%;
    margin-top: 10px; 
    margin-bottom: 10px;
    margin-left: 20%;
    margin-right: 20%;
}

.social_background {
    background-image:linear-gradient(0deg,#042147 2%,#846cee 108%);
    width: auto;
    height: 100vh;
}

.social_new_background {
    aspect-ratio: 960 / 300;
    width: auto;
    height: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(/media/layered-waves-haikei.svg) ;
}

.home_body_background { 
    background-color: #042147;

}

.home_background { 
    background-color: #041122;

}

.li_el {
    padding: 5px 20px;
}

.li_so  {

    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 0px;
    margin-bottom: 40px;
    margin-left: 0px;
    margin-right: 0px;
    background-color: #509cff;
    width: 500px;
    border: px solid #509cff;
    border-radius: 5px;
    color: #fff;
    transition: 120ms;
    cursor: pointer;
}

.li_so:hover {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 0px;
    margin-bottom: 40px;
    background-color: #fff;
    width: 500px;
    border: px solid #fff;
    border-radius: 5px;
    color: #509cff;
}

.social_box {
    align-content: center;
    padding-left: 90px;
    padding-right: 90px;
    padding-top: 21px;
    padding-bottom: 21px;
    margin: 0px 0px;
    color: inherit;
    transition: 120ms;

}


.li_so:hover ~ .social_box {
    padding-left: 90px;
    padding-right: 90px;
    padding-top: 21px;
    padding-bottom: 21px;
    margin: 0px 0px;
    color: #509cff;
    transition: 120ms;

}

.home_main_margin {
    margin-left: calc(10px + 10vw);
    margin-right: calc(10px + 10vw);
    margin-top: 0%;
    margin-bottom: 0%;
    /*height: 100vh;*/
    padding-top: 0px;
    padding-bottom: 20px;
    border-radius: 5px;
}

.home_text_margin {
    padding-left: calc(-30px + 10vw);
    padding-right: calc(-30px + 10vw);
    padding-top: 0px;
}

.home_aside {
    width: calc(300px - 15vw + 15%);
    /*height: 20%;*/
    margin-top: 20px;
    margin-bottom: 0em;
    margin-left: 0px;
    margin-right: 1em;
    padding-left: calc(-30px + 10vw);
    float: left;
}

.navbar {
    padding: 15px;
    text-decoration: none;
    border: 15px;
    font-size: 200%;
}

.navbarel  {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    margin-right: 5px;
}