@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@media screen and (max-width: 1280px) { div.contentblock {width: 1200px;} }
@media screen and (max-width: 1140px) { div.contentblock {width: 1024px;} }

body, html {
    padding: 0;
    overflow-x: hidden;
    margin: 0;
    font-size: medium;
    font-family: 'Open Sans', sans-serif;;
    background-color: #263238;
}
.clearfix {
    overflow: auto;
}
#logo{
    padding-top: 4px;
    float:right;
    /*padding-right: 10px;*/
    color: white;
}
div.content > h1{
    padding-right: 10%;
}
#first-page{
    height:700px;
    background: white url("../img/promo-img.jpg") no-repeat center bottom;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
ul#header-menu {
    list-style: none; /*убираем маркеры списка*/
    margin: 0; /*убираем отступы*/
    padding-left: 0; /*убираем отступы*/
    /*margin-top:25px; !*делаем отступ сверху*!*/
    background: #263238; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/
    height: 50px; /*задаем высоту*/
    position: fixed;
    right: 0;
    left: 0;
    z-index: 100;
}
a {
    text-decoration: none; /*убираем подчеркивание текста ссылок*/
    background: #263238; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/
    color:#fff; /*меняем цвет ссылок*/
    padding:0 15px; /*добавляем отступ*/
    line-height:50px; /*ровняем меню по вертикали*/
    display: block;
    border-right: 1px solid #263238; /*добавляем бордюр справа*/
    -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
    -o-transition: all 0.3s 0.01s ease;
    -webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
    background:#D43737;/*добавляем эффект при наведении*/
}
ul#header-menu > li {
    float:left; /*Размещаем список горизонтально для реализации меню*/
}
.content {
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
    z-index: 50;
}
.content > .inner-content > p {
    padding-left: 2%;
    padding-right: 2%;
    color: white;

}

#main-page{
    align-content: center;
}
.card:hover {
    transform: scale(1.05);
    border-width: 52.5px;
}
.aqua-code{
    /*background: #747474;*/
    text-align: center;
    align-content: center;
    vertical-align: middle;
    transition: all 300ms;
}
.aqua-code > p{
    padding-bottom: 10px;
    padding-top: 0;
    margin-top: 0;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
}
.aqua-code:hover {
    background-color: #747474;
}

.card {
    border-color: white;
    border-width: 50px;
    border-radius: 10px;
    background-color: #3b3b3b;
    color:white;
    transition: all 600ms;
    float: left;
    width: 25%;
    height: 320px;
    margin-left: 20px;
    overflow: auto;
    padding-left: 1.3%;
    padding-right: 1.3%;

}

.card > h3{
    font-weight: bold;

}
.card > * {
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 3%;

}

.cards {
    padding-bottom: 20px;
    padding-top: 20px;
}
.content > h1 {
    background: #263238;
    color: white;
}

ul#commands-li > li{
    list-style: none;
    color: white;
    transition: all 300ms;
    cursor: pointer;
    padding-right: 15%;
}
ul#commands-li > li:hover{
    transform: scale(1.03);
    color: orange;
}
.right-float{
    float: right;

}

.possibles > *{
    float: left;
    width: 40%;
    height: 500px;
}
#note-img {
    width: 700px;
    /*transform: scale(0.8);*/
}
.possibles > img{
    transform: scale(0.8);
    border-radius: 30px;
    transition: all 1s;
}
.possibles-text-block{
    justify-content: center;
    display: flex;
    align-items: center;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 35px;
    font-weight: bold;
    color: whitesmoke;
}
.possibles > img:hover{
    transform: scale(0.81);
    border-radius: 30px;
}
.possibles{
    padding: 20px 20px 20px 20px;
}
#author{
    padding-left: 60px;
    border-radius: 20px;
    transform: scale(0.8);
}
#author > img{
    transform: scale(0.7);
}

#author > div{
    text-align: left;
    font-size: 20px;
    list-style: none; /*убираем маркеры списка*/
}

#author > div > ul{
    list-style: none; /*убираем маркеры списка*/
    margin: 0; /*убираем отступы*/
    padding-left: 0; /*убираем отступы*/
}