:root {
    --body :rgb(55 64 129);
    --renk1:white;
    --renk2:rgb(250, 178, 178);
    --renk3:rgb(253, 102, 102);
    --renk4:rgb(252, 56, 56);
    --renk5:rgb(176, 6, 6);

}
@font-face {
    font-family: calculator;
    src: url(./Calculator.ttf);
}
.container{
    margin: auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color:var(--body);
    width: 400px;
    height: 505px;

}
.protractor{
    width: 300px;
    height: 300px;
    margin: 100px auto;
    border:2px solid red;
    border-radius: 50%;
    /* outline: 5px solid green;outline-offset: 3px; */
    /* border-top-left-radius: 50px;
    border-top-right-radius: 500px; */
    /* border-bottom: 12px solid white; */
    position: relative;
    display:flex ;
    justify-content:center;
    align-items:center ;
    user-select: none;
    font-size: 100%;
}

.protractor::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    /* transform-origin: center; */
    background-color:var(--body);
    z-index: 100;
    border-radius: 50%;
}
.protractor::after{
    content: '';
    width: 114%;
    height: 50%;
    position: absolute;
    /* transform-origin: center; */
    background-color:var(--body);
    top: 55%;
    z-index: 101;
 
}
.line{
    position: absolute;
    width: 55%;
    height: 2px;
    transform-origin: right;
    /* transform: translateY(-20px); */
    background-color: black;
    display: inline-block;
    top: 50%;
    right: 50%;
    transform: translate(50%,-50%);
    color: white;
    transition: background-color 3s;
    
}
.thrd{
    position: absolute;
    transform-origin: center;
    transform: rotate(258deg) translate(-21%, -88%);
}
.scnd {
    position: absolute;
    transform-origin: center;
    transform: rotate(258deg) translate(-24%, -64%);
}


/* .line1{
    width: 5px;
   transform: rotate(12deg);
} */
.renk1 {
    background-color: var(--renk1) !important;
    transition: all 3.7s;
}
.renk2 {
    background-color: var(--renk2) !important;
    transition: all 3.7s;
}
.renk3 {
    background-color: var(--renk3) !important;
    transition: all 3.7s;
}
.renk4 {
    background-color: var(--renk4) !important;
    transition: all 3.7s;
}
.renk5 {
    background-color: var(--renk5) !important;
    transition: all 3.7s;
}

.stick{
    width: 55%;
    height: 2px;
    transform-origin: right;
    position: absolute;
    background-color: #e84c24;
    transition: transform 1.5s;
    z-index: 105;
    top: 50%;
    right: 50%;
}

.giris input#deg {
    font-size: 20px;
    padding: 5px 10px;
    position: absolute;
 z-index: 102;
 top: 60%;
 left: 6%;
 font-family:consolas;
 font-weight: 900;
}
.giris-monitor input#monitor {
    width: 100px;
    font-size: 50px;
    padding: 1px 10px;
    position: absolute;
 z-index: 102;
 transform-origin: center center;
 top: 25%;
 left: 30%;

 background-color: transparent;
 outline: none;
 font-family:"calculator", consolas;
 font-weight: 900;color: yellow;
 user-select: none;
text-align: center;
}