body {
	background-color: #000
}

.container-picture-terminal-row {
	padding-bottom: 2%;
}

/*////////////////////////////////////////
////////////////Terminal//////////////////
////////////////////////////////////////*/
.container-terminal {
	margin-top: 100px;
	background-color: #000;
	height: 450px;
	width: 70%;
	border-radius: .50rem !important;
}

#console {
	font-family: courier, monospace;
	color: #fff;
	width: 550px;
	margin-left: auto;
	margin-right: auto;
	font-size: 14px;
}

a {
	color: #0bc;
	text-decoration: none;
}

#a {
	color: #0f0;
}

#c {
	color: #0bc;
}

#b {
	color: #ff0096;
}

#k {
    	animation: change 1s;
}

#op{
    	color: #888888
}

@keyframes change {
    	0%  { color:  #0f0; }
    	50% { color:  #0f0; }
    	99% { color: black; }
}


.fakeButtons {
	height: 10px;
	width: 10px;
	border-radius: 50%;
	border: 1px solid #000;
	position: relative;
	top: 6px;
	left: 6px;
	background-color: #ff3b47;
	border-color: #9d252b;
	display: inline-block;
  }
  
  .fakeMinimize {
	left: 11px;
	background-color: #ffc100;
	border-color: #9d802c;
  }
  
  .fakeZoom {
	left: 16px;
	background-color: #00d742;
	border-color: #049931;
  }
  
  .fakeMenu {
	width: 100%;
	box-sizing: border-box;
	height: 25px;
	background-color: #bbb;
	margin: 0 auto;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
  }
  
  .fakeScreen {
	background-color: #151515;
	box-sizing: border-box;
	width: 550px;
	margin: 0 auto;
	padding: 20px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
  }

/*////////////////////////////////////////
//////////Picture_terminal_row////////////
////////////////////////////////////////*/
#aboutMe_pic {
    margin-top: 20%;
    max-width: 250px;
    max-height: 250px;
}

/*////////////////////////////////////////
/////////////////Tongue///////////////////
////////////////////////////////////////*/
.container-tongue {
	padding-bottom: 2%;
}

.tongue-title {
	margin-left: 10%;
}

.tongues {
	margin-left: 12%;
}

.progress {
	width: 40%;
}

.progress-bar {
	background-color: rgb(0, 27, 180);
}

/*////////////////////////////////////////
////////////////Languages/////////////////
////////////////////////////////////////*/
.tools_pic {
	max-width: 100px;
}

.checked {
    color: #fdba04;
}

/* Circle Progress Bar */
.progress {
    width: 100px;
    height: 100px !important;
    float: left;
    line-height: 100px;
    background: none;
    margin: 20px;
    box-shadow: none;
    position: relative
}

.progress:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 12px solid #fff;
    position: absolute;
    top: 0;
    left: 0
}

.progress>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1
}

.progress .progress-left {
    left: 0
}

.progress .progress-bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 12px;
    border-style: solid;
    position: absolute;
    top: 0
}

.progress .progress-left .progress-bar {
    left: 100%;
    border-top-right-radius: 80px;
    border-bottom-right-radius: 80px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left
}

.progress .progress-right {
    right: 0
}

.progress .progress-right .progress-bar {
    left: -100%;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    animation: loading-1 1.8s linear forwards
}

.progress .progress-value {
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: #fff;
    font-size: 24px;
    color: #000;
    line-height: 85px;
    text-align: center;
    position: absolute;
    top: 5%;
    left: 5%
}

/* 50% */
.progress.red .progress-bar {
    border-color: red;
}

.progress.red .progress-left .progress-bar {
    animation: loading-4 1.5s linear forwards 1.8s
}

/* 80% */
.progress.blue .progress-bar {
    border-color: #049dff
}

.progress.blue .progress-left .progress-bar {
    animation: loading-2 1.5s linear forwards 1.8s
}

/* 100% */
.progress.green .progress-bar {
    border-color: green
}

.progress.green .progress-left .progress-bar {
    animation: loading-3 1.5s linear forwards 1.8s
}

/* 25% */
.progress.yellow .progress-bar {
    border-color: #fdba04
}

.progress.yellow .progress-right .progress-bar {
    animation: loading-3 1.8s linear forwards
}

.progress.yellow .progress-left .progress-bar {
    animation: none
}

/* 100% */
@keyframes loading-1 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }
}

/* 80% */
@keyframes loading-2 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(115deg);
        transform: rotate(115deg)
    }
}

/* 75% */
@keyframes loading-3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg)
    }
}

/* 50% */
@keyframes loading-4 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
}

.but-also {
	margin-left: 12%;
    padding-bottom: 2%;
}

.img-comp {
    height: 70px; 
    margin: 0 2.5%;
}

/* Media queries for screens "lg" and less*/
@media (max-width: 1199.98px) {

    .container-picture-terminal-row{
        padding-bottom: 5%;
    }

    #aboutMe_pic {
        margin-top: 8%;
    }

    .container-terminal {
        margin-left: auto;
        margin-right: auto;
    }

    .I-am-title, .tongue-title {
        margin-bottom: 4%;
    }

    .I-am-desc {
        margin-bottom: 5% !important;
    }

    .container-tongue {
        padding-bottom: 5%;
    }

    .comps-row {
        margin-bottom: 4%;
    }

    .best-languages-card {
        margin: 4%;
    }

    .best-languages-card-title {
        text-align: center;
    }

    .best-languages-row {
        padding-bottom: 5% !important;
    }

    .progress {
        margin: 20px 0;
    }

    .prog-lang-col {
        margin-bottom: 4%;
    }

    .languages-col {
        padding-left: 25% !important;
    }

    .languages-rate-col {
        padding-left: 10% !important;
    }

    .but-also {
        margin-top: 5%;
        margin-bottom: 4%;
    }
}

/* Media queries for screens "md" and less*/
@media (max-width: 991.98px) {
    .progress {
        margin: 20px 35%;
    }
}