* {
    margin: 0;
}

body{
    background-color: rgb(54, 54, 54);
    width: 100%;
    /* background-image: url("resources/background-black.jpg"); */
    /* background-image: url("resources/background/black-points-background.jpg"); */
    background-image: url("resources/background/back1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;
}

a{
    color: rgb(68, 68, 68);
    font-weight: 700;
    transition: 0.2s;
}
.box a{
    transition: 1s;
}

.viewl{
    position: absolute;
    left: 1.5em;
    bottom: 1.5em;
}
.viewr{
    position: absolute;
    right: 1.5em;
    bottom: 1.5em;    
}

.container{
    display: flex;
    background-color: black;
    justify-content: right;
    margin: 0;
    width: 100%;
    box-shadow: -3px 8px 5px black;
}

.container nav{
    display: flex;
    background-color: rgba(126, 126, 126, 0.5);
    border-radius: 13px;
    margin: 10px;
    padding: 8px;
    height: 30px;
    font-size: 155%;
    border: none;
    cursor: pointer;
}

.container nav:hover{
    outline: solid rgb(207, 207, 207) 3px;
    outline-offset: 5px;
    background-color: rgb(126, 126, 126);

}

.container p{
    color: rgb(126, 126, 126);
    font-size: auto;
}
.container a{
    text-decoration: none;
    color: inherit;
}

.container a:hover{
    transform: translateY(+10%);
}
.container a:last-of-type{
    transform: none;
}



.box{
    width: 60%;
    margin-left: 38%;
    height: 15em;
    outline: black 5px solid;
    outline-offset: 0px;
    border-radius: 1px;
    margin-top: 4em;
    transition: 1s;
    animation: 1.5s ease-out 0s 1 slideInFromRight;

    font-size: 150%;

    color: rgb(150, 163, 163);
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    position: relative;

    background-image: url("resources/background/back3.jpg");
    /* background-image: url("resources/black_texture.jpg"); */
    background-size: cover;
    background-color: rgba(0,0,0,0.5);
    background-repeat: no-repeat;
    border-radius: 0;
    box-shadow: 10px 10px 10px black;

}
.box:nth-child(even){
    margin-left: 2%;
    animation: 1.5s linear 0s 1 slideInFromLeft;
}

.box:hover a{
    color: aquamarine;
}

.box:hover{
    transform: translateX(-10%);
    outline-offset: 15px;
    border-radius: 5px;
    color: azure;
    box-shadow: 35px 35px 10px black;
    width: 65%;
    height: 16em;
    margin-top: 1.27em;
    font-size: 165%;
}
.box:hover:nth-child(even){
    background-color: rgb(63, 63, 63);
    transform: translateX(+10%);
}
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(-10%);
    }
    100% {
        transform: translateX(0);
    }
}
@keyframes slideInFromRight {
    0% {
        transform: translateX(+100%);
    }
    50% {
        transform: translateX(+10%);
    }
    100% {
        transform: translateX(0);
    }
}

div p{
    padding: 2em;
    color: black;
    font-size: 1.5em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    background-color: rgb(0, 0, 0, 0.3);
}


.name{
    font-size: 30px;
    padding: 0;
    position: absolute;
    left: 15px;
    top: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}


.acount{
    border: solid rgb(141, 141, 141) 2px;
    border-radius: 5em;
    width: 48px;
    height: 48px;
    margin-top: 6px;
    margin-right: 6px;
    position: relative;
    background-color: black;
}
.acount:hover{
    border-color: rgb(50,50,50);
}
.acount img{
    border-radius: 5em;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
}



.impress{
    border-top: solid 5px black;
    width: 100%;
    margin-top: 100px;
    background-color: rgb(0, 0, 0, 0.8);
    height: 5em;
    padding-top: 1em;
}
.impress div{
    margin-top: 10px;
    justify-content: center;
    display: flex;
}


.vis{
    display: none;
}
.mobile_visible{
    display: none;
}