* {
    margin: 0;
    padding: 0;
    color: rgb(157, 148, 148);
    font-family: sans-serif;
    box-sizing: border-box;
}
body{
    overflow-x: visible;
}
header {
    background-color: #303030;
    min-width: 1106px;
    height: 44vw;
    min-height: 500px; 
}
main{
    background-color: #222222;
    min-width: 1106px;
}
.menu{
    width: 35px;
    visibility: hidden;
    filter: brightness(0) invert(1);
}
.nav_bar nav {
    display: flex;
    justify-content: space-between;
    padding-top: 14px;
}

.nav_bar nav ul {
    display: flex;
    padding-right: 40px;
}

.nav_bar nav ul li {
    padding-right: 30px;
    list-style: none;
}

nav h3 {
    color: gray;
    padding-right: 60px;
    padding-left: 10vw;
}

.nav_bar nav li a {
    text-decoration: none;
}

ul.icons li img {
    width: 16px;
    filter: brightness(0) invert(1);
}

.laugh {
    width: 16px;
    margin-right: 5px;

}

.roy80 li a {
    color: gray;
    font-weight: bold;
}

li a.active {
    color: white;
}

li a:hover {
    color: white;
}

li.same {
    display: flex;
}

.container {
    display: flex;
    justify-content: space-between;
    min-width: 1100px;
}

.mid {
    position: absolute;
    right: 10px;
    top: 2vw;
}

.image {
    padding-left: 90px;
    width: 34vw;
    min-width: 520px;
    overflow-x: visible;
}

div.shadow {
    border: none;
    border-radius: 50%;
    width: 30vw;
    height: 30vw;
    min-width: 450px;
    min-height: 450px;
    position: absolute;
    left: 36vw;
    background-color: rgba(26, 25, 25, 0.766);
}

.left {
    padding-top: 10vw;
    padding-left: 10vw;
}

.left h2 {
    font-size: 50px;
    font-weight: bolder;
    font-family: serif;
}

.left h1 {
    font-size: 70px;
    font-weight: bolder;
    font-family: serif;
    color: white;
}

.left p {
    font-size: 18px;
    padding-top: 15px;
    line-height: 27px;
}
.right{
    padding-top: 5%;
    padding-right: 13%;
}
.right p{
    font-size: 22px;
    line-height: 27px;
}
.border {
    border-bottom: 5px solid orange;
    padding-bottom: 15px;
    width: 15vw;
}

.font {
    font-size: 25px;
}

.arr {
    width: 27px;
    margin-left: 20px;
}

.flexgain {
    display: flex;
}

.ico li img {
    width: 20px;
    filter: invert(82%) sepia(97%) 
    saturate(2973%) hue-rotate(349deg) 
    brightness(98%) contrast(108%);
    
}
.ico{
    display: flex;
    justify-content: space-between;
    padding-right: 70px;
    padding-top: 20px;
}
.ico li {
    list-style: none;
}
.google{
    width: 17vw;
    margin-top: 8%;
    padding: 2vw;
    height: 7.5vw;
}
.meta{
    width: 17vw;
    margin-top: 8%;
    height: 7.4vw;
}
.link{
    width: 17vw;
    height: 7.4vw;
    margin-top: 8%;
}
.slack{
    width: 17vw;
    margin-top: 8%;
    height: 7.3vw;
    padding-left: 4vw;
    padding-right: 4vw;
}
.contain{
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
}
.back{
    visibility: hidden;
}
.contain li{
    list-style: none;
}
.same{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    position: absolute;
    left: 10vw;
    background-color:  #303030;
    box-shadow: 5px 5px 20px black;
}
.same li img{
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    background-color:  #222222;
}
@media (max-width: 832px){
    div.shadow{
        left: 45vw;
    }
    .same{
        left: 30vw;
    }
}
.div div img{
    width: 30px;
}
.whole{
    display: flex;
    justify-content: space-between;
    padding-top: 15vw;
    min-width: 1000px;
    padding-bottom: 20px;
    
}
.whole div h3{
    font-size: 45px;
    font-family: sans-serif;
    font-weight: bold;
    color: white;
}
.space{
    padding-right: 50px;
    padding-bottom: 10px;
}
small.top{
    margin-top: 30px;
}
.color{
    color: orange;
    font-weight: bolder;
    font-size: 30px;
    padding-top: 13px;
}
small{
    font-size: 17px;
}
.div div h3.font{
    font-size: 20px;
    margin-right: 8vw;
    align-self: center;
    margin-left: 20px;
}
.div div{
    display: flex;
    border-bottom: 0.1px solid gray;
    padding: 20px 20px;
}
.div div img.size{
    width: 13vw;
    min-width: 180px;
}
.div div img.ar{
    width: 22px;
    height: 22px;
    align-self: center;
    margin-left: auto;
}
.div{
    margin-right: 10vw;
}
.first p{
    line-height: 30px;
}
.first{
    padding-left: 9vw;
}
.lorem div{
    display: inline-block;
    margin-left: 10vw;
    margin-top: 9vw;
    background-color: #303030;
    padding: 20px;
    padding-bottom: 90px;
    padding-right: 60px;
    box-sizing: border-box;
    box-shadow: 1px 1px 20px black;
}
.lorem div h3{
    color: white;
    font-size: 25px;
    padding-top: 15px;
    font-family: sans-serif;
    font-weight: bolder;
}
.lorem div p{
    line-height: 25px;
}
.lorem div i{
    color: yellow;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: #222222;
    padding: 10px;
}
footer{
    background-color: #303030;
    min-width: 1106px;
}
@media(max-width: 561px){
    .nav_bar nav ul{
        visibility: hidden;
    }
    .menu{
        visibility: visible;
    }
    .container{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20%;
    }
    div.shadow{
        position: static;
        order: 1;
        margin-top: 40px;
    }
    .mid{
        position: static;
        border-radius: 23px;
    }
    .image{
        width: 30px;
    }
    .right{
        padding-left: 30px;
    }
    .same{
        position: static;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    header{
        height: 220vw;
        min-height: 1250px;
    }
    .whole{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 20%;
    }  
    .lorem{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}